Finalize about section and add Procfile for Heroku deployment

Author: eminguyen

Procfile

@@ -0,0 +1 @@
+worker: npm start

public/antony.jpg

@@ -25,6 +25,7 @@ body {
   width: 30vw;
   height: 30vh;
   bottom: 0;
+  z-index: 20000;
   background-image: linear-gradient(rgba(0,0,0,0), rgba(255,255,255,1), rgba(255,255,255,1));
 }
 
@@ -36,7 +37,10 @@ body {
   z-index: 10001;
   height: 100vh;
   display: none;
-  padding: 30px;
+  overflow-y: scroll;
+  user-select: text;
+  -moz-user-select: text;
+  padding-bottom: 10vh;
 }
 
 .about-container p{
@@ -169,11 +173,49 @@ body {
   display: flex;
   align-items: center;
   padding: 0 1.4vw 0 0;
-  background-color: rgba(240,240,240,0.6);
-  box-shadow: 0px 0px 10px 10px rgba(240,240,240,0.4);
+  background-color: rgba(255,255,255,0.6);
+  box-shadow: 0px 0px 20px 5px rgba(255,255,255,0.4);
 }
 
 .logo-wrapper>span {
   font-size: 2.0rem;
   color: #3cbcbb;
 }
+
+.bluebold {
+  color: #3cbcbb;
+}
+
+.aboutcontent {
+  padding: 0 4vw;
+}
+
+.contact {
+  padding-bottom: 15vw;
+}
+
+.profile {
+  padding: 0 4vw;
+  display: flex;
+  align-items: center;
+}
+
+.profile>.image{
+  margin: auto;
+  float: left;
+  border-radius: 100%;
+  border: 5px solid #3cbcbb;
+  transition: all .2s ease-in-out;
+}
+
+.profile>.image:hover{
+  transform: scale(1.1);
+}
+
+.bio {
+  font-size: 1.2rem;
+}
+
+.profile>.image.right{
+  float: right!important;
+}

public/casey.jpeg

@@ -64,9 +64,10 @@ io.on('connection', (socket) => {
   });
 
   socket.on('report', async (data) => {
+    let policePhone = process.env.POLICE_PHONE || config.policePhone;
     if(data.police) {
       let body = `New crime at ${data.address} : ${data.description}`;
-      sendText(body, config.policePhone);
+      sendText(body, policePhone);
     }
     convertAddress(data.address)
       .then(
@@ -86,12 +87,12 @@ io.on('connection', (socket) => {
 
 // firebase setup
 const fb_config = {
-  apiKey: config.apiKey,
-  authDomain: config.authDomain,
-  databaseURL: config.databaseURL,
-  projectId: config.projectId,
-  storageBucket: config.storageBucket,
-  messagingSenderId: config.messagingSenderId
+  apiKey: process.env.API_KEY || config.apiKey,
+  authDomain: process.env.AUTH_DOMAIN || config.authDomain,
+  databaseURL: process.env.DATABASE_URL || config.databaseURL,
+  projectId: process.env.PROJECT_ID || config.projectId,
+  storageBucket: process.env.STORAGE_BUCKET || config.storageBucket,
+  messagingSenderId: process.env.MESSAGING_SENDER_ID || config.messagingSenderId
 }
 firebase.initializeApp(fb_config);
 console.log("firebase is setup!");
@@ -286,7 +287,7 @@ function addUser(name, number){
  */
 async function convertAddress(location){
   let properties = {
-    key: config.mapquest,
+    key: process.env.MAP_QUEST || config.mapquest,
     location: location
   }
   let options = {
@@ -349,8 +350,8 @@ async function findRoute(location, destination, pedestrian) {
 }
 
 /***** Twilio API functions *****/
-const twilioID = config.accountSid;
-const authToken = config.twilioAuthToken;
+const twilioID = process.env.TWILIO_ID || config.accountSid;
+const authToken = process.env.AUTH_TOKEN || config.twilioAuthToken;
 const client = require('twilio')(twilioID, authToken);
 
 /**

public/daniel.jpeg

@@ -38,31 +38,48 @@
   <div class="about-container">
     <i class="x icon" id="close-about"></i>
     <h1 class="heading">About</h1>
-    <p>
-      <!-- The purpose of <b>roadBlock</b> is to allow every individual to feel safe when traveling.
+    <p class="aboutcontent">
 
-      <br />
-      <br /> -->
-
-      <b>roadBlock</b> is a web app that allows you to plan your route based on safety by visually seeing the safest route & directions between two addresses based on avoiding locations with a history of crime.
-      We use prebuilt data given from a <a href="https://data.lacity.org/A-Safe-City/Crime-Data-from-2010-to-Present/y8tr-7khq">public LA dataset</a> in order to find locations of high crime, but you can also report crimes and inform the police, allowing others to receive live updates for when your crime is reported.
+      <b class="bluebold">roadblock</b> is a mapping service that prioritizes
+      the user's. It provides the fastest route between two locations while
+      simulatenously avoiding areas with a history of crime. We keep track of
+      <a class="bluebold" href="https://data.lacity.org/A-Safe-City/Crime-Data-from-2010-to-Present/y8tr-7khq">
+        prerecorded data
+      </a>
+      given by the city of Los Angeles and additionally allow users to report crimes,
+      updating our data while simulatenously notifying law enforcement and other users.
 
       <br />
       <br />
 
-      Ultimately, we strive to allow every individual to feel safe when traveling in areas of high crime rates, whether it be for a vacation or just everyday commutes.
-
-      <br />
-      <br />
-    </p>
-    <h1 class="heading"> Creators </h1>
-    <p class="center">
-      Antony Nguyen | <a href="https://www.linkedin.com/in/emilyhuongnguyen/">LinkedIn</a> | <a href="https://github.com/eminguyen">GitHub</a>
-      <br />
-      Casey Price | <a href="https://www.linkedin.com/in/casprice/">LinkedIn</a> | <a href="https://github.com/casprice">GitHub</a>
-      <br />
-      Daniel Truong | <a href="https://www.linkedin.com/in/daniel-d-truong/">LinkedIn</a> | <a href="https://github.com/numberonetruong">GitHub</a>
+      We strive to allow every individual to feel safe when traveling.
     </p>
+    <div class="center contact">
+      <div class="profile">
+        <img class="ui small circular image" src="antony.jpg">
+        <div class="bio">
+          Antony Nguyen
+          <br>
+          <a href="https://www.linkedin.com/in/emilyhuongnguyen/">LinkedIn</a> | <a href="https://github.com/eminguyen">GitHub</a>
+        </div>
+      </div>
+      <div class="profile">
+        <div class="bio">
+          Casey Price
+          <br>
+          <a href="https://www.linkedin.com/in/casprice/">LinkedIn</a> | <a href="https://github.com/casprice">GitHub</a>
+        </div>
+        <img class="ui small circular right image" src="casey.jpeg">
+      </div>
+      <div class="profile">
+        <img class="ui small circular image" src="daniel.jpeg">
+        <div class="bio">
+          Daniel Truong
+          <br>
+          <a href="https://www.linkedin.com/in/daniel-d-truong/">LinkedIn</a> | <a href="https://github.com/numberonetruong">GitHub</a>
+        </div>
+      </div>
+    </div>
   </div>
 
   <div class="report-container">