Reached an MVP to deploy on S3 and CloudFront; to be further improved upon.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-website",
-  "version": "0.1.0",
+  "version": "0.1.9",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.8",

src/Website.js

@@ -6,6 +6,7 @@ import Navbar from './components/Navbar'
 import Home from './screens/Home'
 import Projects from './screens/Projects'
 import Experience from './screens/Experience'
+import Contact from './screens/Contact'
 
 import './Website.css'
 
@@ -19,7 +20,7 @@ class Website extends React.Component {
             <Route exact path='/' component={Home} />
             <Route path='/projects' component={Projects} />
             <Route path='/experience' component={Experience} />
-            <Route path='/contact' component={null} />
+            <Route path='/contact' component={Contact} />
           </Switch>
           <Navbar />
         </div>

src/components/Navbar/index.css

@@ -14,7 +14,11 @@
   float: right;
   margin: 5px;
   padding: 5px 10px;
-  transition: background-color 0.2s, box-shadow 0.1s;
+  transition: box-shadow 0.1s;
+}
+
+.navbar-button-close {
+  background-color: rgb(206, 135, 111);
 }
 
 .navbar-button:active {
@@ -22,8 +26,8 @@
 }
 
 .navbar-menu {
-  margin: 0 20%;
-  width: 60%;
+  margin: 0 18.75%;
+  width: 62.5%;
 }
 
 .navbar-menu div {
@@ -32,7 +36,7 @@
   float: left;
   margin: 1% 2.5%;
   overflow: hidden;
-  padding: 5px 0;
+  padding: 7px 0;
   text-overflow: ellipsis;
   transition: background-color 0.2s, box-shadow 0.1s;
   width: 20%;
@@ -59,11 +63,12 @@
   }
 
   .navbar-menu {
-    margin: 10%;
-    width: 80%;
+    margin: auto;
+    width: 75%;
   }
   .navbar-menu div {
     margin: 5px 0;
+    padding: 5px 0;
     width: 100%;
   }
   

src/components/Navbar/index.js

@@ -11,7 +11,7 @@ class Navbar extends React.Component {
     return (
       <ResponsiveMenu
         menuOpenButton={<div className='navbar-button'><FontAwesomeIcon icon={faBars} /></div>}
-        menuCloseButton={<div className='navbar-button'><FontAwesomeIcon icon={faBars} /></div>}
+        menuCloseButton={<div className='navbar-button navbar-button-close'><FontAwesomeIcon icon={faBars} /></div>}
         changeMenuOn='500px'
         largeMenuClassName='navbar'
         smallMenuClassName='navbar'

src/screens/Contact/index.css

@@ -0,0 +1,18 @@
+.contact-container {
+  text-align: center;
+}
+
+.contact-container img {
+  margin-left: 12px;
+}
+
+.contact-container p {
+  @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono');
+  background-color: rgb(216, 221, 233);
+  border-radius: 5px;
+  color: rgb(46, 51, 64);
+  font-family: 'IBM Plex Mono', mono;
+  margin:  10% auto;
+  padding: 5px;
+  width: 150px;
+}

src/screens/Contact/index.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import './index.css'
+import linkedIn from '../../images/In-2C-128px-TM.png'
+
+class Contact extends React.PureComponent {
+  render () {
+    return (
+      <div className='contact-container'>
+        <p>m@mjfs.us</p>
+        <a href='https://www.linkedin.com/in/mitchelljfsimon/'>
+          <img src={linkedIn} alt='LinkedIn' />
+        </a>
+      </div>
+    )
+  }
+}
+
+export default Contact

src/screens/Experience/index.js

@@ -12,8 +12,8 @@ class Experience extends React.PureComponent {
           <div className='experience-company'>Hypremium.</div>
           <SmallText className='experience-smalltext'>May 2018 - Present</SmallText>
           <ul>
-            <li>Architect all new backend microservices, using Serverless, AWS API Gateway/Lambda, and Golang.</li>
-            <li>Lead backend development team.</li>
+            <li>Architect all new backend microservices using Serverless, AWS API Gateway/Lambda/more, and Golang.</li>
+            <li>Lead backend development team in an Agile (scrumban) environment.</li>
             <li>Monitor and maintain all stages of hosted microservices.</li>
           </ul>
         </div>

src/screens/Home/index.js

@@ -11,9 +11,9 @@ class Home extends React.PureComponent {
         <p>Hello and welcome,</p>
         <p>
           My name is Mitchell Simon. I am the Lead Backend Engineer at
-          Hypremium, where I architect and maintain our servlerless arcitecture,
+          Hypremium, where I lead the architecture of and maintain our serverless,
           Golang backend. I also offer my skills as a consulting/independent
-          web & software developer.
+          web & cloud developer.
         </p>
         <p>
           My professional interests include web development (with an

src/screens/Projects/index.js

@@ -23,7 +23,7 @@ class Projects extends React.PureComponent {
         <div>
           <h4>destinate</h4>
           <p>
-            Destinate is a react-native, iOS (and Android) app. Its main objective
+            destinate is a react-native, iOS (and Android) app. Its main objective
             is to suggest places or activities to the user based on their past
             choices. It utilizes a serverless backend, written in Go and hosted
             on AWS API Gateway/Lambda. It is still under development, as a side