Redesign and content changes. Added Experience screen.

src/Website.css

@@ -7,14 +7,16 @@
 
 .main-container {
   margin: auto;
-  margin-bottom: 50px;
-  max-width: 700px;
+  margin-top: 50px;
+  max-width: 500px;
   min-width: 60%;
   text-align: center;
 }
 
 @media screen and ( max-width: 500px ) {
   .main-container {
+    margin-bottom: 50px;
+    margin-top: auto;
     width: 100%;
   }
 }

src/Website.js

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

src/components/ClearButton/index.css

@@ -3,7 +3,7 @@
   border-radius: 2px;
   color: white;
   margin: 5px;
-  padding: 5px;
+  padding: 8px 10px;
   text-decoration: none;
   transition: background-color 0.2s, box-shadow 0.1s;
 }

src/components/Header/index.css

@@ -1,5 +1,5 @@
 .header-container {
-  border-bottom: 2px solid rgb(22, 26, 40);
+  border-bottom: 2px solid rgb(130, 160, 196);
   margin: auto;
   margin-bottom: -5px;
   width: 65%;
@@ -7,3 +7,7 @@
 .header-container h2 {
   margin-bottom: -5px;
 }
+
+.header-container div {
+  margin: 2%;
+}

src/components/Header/index.js

@@ -9,7 +9,7 @@ class Header extends React.PureComponent {
     return (
       <div className='header-container'>
         <h2>Mitchell J. F. Simon</h2>
-        <SmallText>DevOps & Software Engineer, Hypremium.</SmallText>
+        <SmallText>Lead Backend Engineer, Hypremium.</SmallText>
       </div>
     )
   }

src/components/Navbar/index.css

@@ -1,26 +1,22 @@
 .navbar {
-  background-color: rgb(59, 65, 82);
-  bottom: 0;
+  background-color: rgb(59, 65, 83);
   box-shadow: -1px -1px 1px rgb(42, 46, 60);
   left: 0;
   position: fixed;
   right: 0;
+  top: 0;
 }
 
 .navbar-button {
-  background-color: rgb(126, 161, 187);
+  background-color: rgb(139, 191, 209);
   border-radius: 2px;
   color: white;
   float: right;
   margin: 5px;
-  padding: 2px 5px;
+  padding: 5px 10px;
   transition: background-color 0.2s, box-shadow 0.1s;
 }
 
-.navbar-button:hover {
-  background-color: rgb(176, 211, 237);
-}
-
 .navbar-button:active {
   box-shadow: 0 0 5px black inset;
 }
@@ -34,26 +30,12 @@
   border-radius: 3px;
   color: white;
   float: left;
-  margin: 1% 1%;
+  margin: 1% 2.5%;
   overflow: hidden;
   padding: 5px 0;
   text-overflow: ellipsis;
   transition: background-color 0.2s, box-shadow 0.1s;
-  width: 23%;
-}
-
-@media screen and ( max-width: 500px ) {
-  .navbar {
-    padding-bottom: 5px;
-  }
-  .navbar-menu {
-    margin: 5%;
-    width: 90%;
-  }
-  .navbar-menu div {
-    margin: 5px 0;
-    width: 100%;
-  }
+  width: 20%;
 }
 
 .navbar-menu div:hover {
@@ -61,5 +43,35 @@
 }
 
 .active-button div {
-  box-shadow: 0 0 5px rgb(22, 26, 40) inset;
+  background-color: rgb(130, 160, 196);
+  box-shadow: 0 0 5px rgb(59, 64, 83) inset;
+}
+
+.active-button div:hover {
+  background-color: rgb(139, 191, 209);
+}
+
+@media screen and ( max-width: 500px ) {
+  .navbar {
+    bottom: 0;
+    padding-bottom: 5px;
+    top: auto;
+  }
+
+  .navbar-menu {
+    margin: 10%;
+    width: 80%;
+  }
+  .navbar-menu div {
+    margin: 5px 0;
+    width: 100%;
+  }
+  
+  .navbar-menu div:hover {
+    background-color: inherit;
+  }
+  
+  .active-button div:hover {
+    background-color: rgb(130, 160, 196);
+  }
 }

src/components/Navbar/index.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import ResponsiveMenu from 'react-responsive-navbar'
 import { NavLink } from 'react-router-dom'
+import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+import faBars from '@fortawesome/fontawesome-free-solid/faBars'
 
 import './index.css'
 
@@ -8,8 +10,8 @@ class Navbar extends React.Component {
   render () {
     return (
       <ResponsiveMenu
-        menuOpenButton={<div className='navbar-button'>Menu</div>}
-        menuCloseButton={<div className='navbar-button'>Close</div>}
+        menuOpenButton={<div className='navbar-button'><FontAwesomeIcon icon={faBars} /></div>}
+        menuCloseButton={<div className='navbar-button'><FontAwesomeIcon icon={faBars} /></div>}
         changeMenuOn='500px'
         largeMenuClassName='navbar'
         smallMenuClassName='navbar'

src/components/SmallText/index.css

@@ -1,5 +1,5 @@
 .small-text {
-  color: lightgrey;
+  color: rgb(216, 221, 234);
   font-size: 0.8rem;
   font-style: italic;
 }

src/components/SmallText/index.js

@@ -6,7 +6,7 @@ import './index.css'
 class SmallText extends React.PureComponent {
   render () {
     return (
-      <p className='small-text'>{this.props.children}</p>
+      <div className='small-text'>{this.props.children}</div>
     )
   }
 }

src/index.css

@@ -1,5 +1,6 @@
 body {
-  background-color: rgb(46, 51, 64);
+  background-color: rgb(46, 51, 65);
+  color: rgb(254, 255, 254);
   font-family: 'Gothic A1', sans-serif;
   font-size: 100%;
 }

src/screens/Experience/index.css

@@ -0,0 +1,37 @@
+.experience-container {
+  display: flex;
+  flex-flow: row wrap;
+  margin: 2% 0;
+}
+
+.experience-container > div {
+  border-bottom: 2px solid rgb(139, 191, 209);
+  flex: 1 0 90%;
+  font-size: 0.9rem;
+  margin: auto 5%;
+  text-align: left;
+}
+
+.experience-company {
+  color: rgb(216, 221, 234);
+}
+
+.experience-title {
+  font-size: 1.2rem;
+  margin-top: 2%;
+}
+
+.small-text {
+  margin-bottom: 1%;
+}
+
+.experience-container ul {
+  margin-top: 0;
+}
+
+@media screen and ( max-width: 500px ) {
+  .experience-container>div {
+    flex: 1 0 100%;
+    margin: auto;
+  }
+}

src/screens/Experience/index.js

@@ -0,0 +1,65 @@
+import React from 'react'
+
+import SmallText from '../../components/SmallText'
+import './index.css'
+
+class Experience extends React.PureComponent {
+  render () {
+    return (
+      <div className='experience-container'>
+        <div>
+          <div className='experience-title'>Lead Backend Engineer</div>
+          <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>Monitor and maintain all stages of hosted microservices.</li>
+          </ul>
+        </div>
+        <div>
+          <div className='experience-title'>DevOps Engineer</div>
+          <div className='experience-company'>Hypremium.</div>
+          <SmallText className='experience-smalltext'>January 2018 - May 2018, 5 Months</SmallText>
+          <ul>
+            <li>Maintain & migrate Ruby on Rails API and backend application.</li>
+            <li>Oversee and assist with continuous integration for backend development.</li>
+          </ul>
+        </div>
+        <div>
+          <div className='experience-title'>Sales Associate</div>
+          <div className='experience-company'>J. Crew</div>
+          <SmallText className='experience-smalltext'>October 2015 - January 2017, 1 Year 5 Months</SmallText>
+          <ul>
+            <li>Knowing the products and what products best suit the customers’ needs.</li>
+            <li>Helping the customer with any manner of purchase, exchange, or return.</li>
+          </ul>
+        </div>
+        <div>
+          <div className='experience-title'>Intern</div>
+          <div className='experience-company'>Zumasys</div>
+          <SmallText className='experience-smalltext'>June 2015 - August 2015, 3 Months</SmallText>
+          <ul>
+            <li>Main goal was to learn as much about the business and their technology as possible</li>
+            <li>Management and organization of customer correspondence.</li>
+            <li>Auditing of server space.</li>
+            <li>Dispatching and filtering ticketing system and office computer assistance.</li>
+          </ul>
+        </div>
+        <div>
+          <div className='experience-title'>User Support Technician</div>
+          <div className='experience-company'>Point Loma Nazarene University, ITS Deptarment</div>
+          <SmallText className='experience-smalltext'>Jan 2015 - May 2015, 5 Months</SmallText>
+          <ul>
+            <li>First in contact for email hotline, second in contact for phones.</li>
+            <li>Work with customers via email, phone, remote control, and in person.</li>
+            <li>Computer diagnosis, repair, and preparation for customer.</li>
+            <li>Special projects.</li>
+          </ul>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Experience

src/screens/Home/index.css

@@ -7,13 +7,13 @@
   display: block;
   float: left;
   margin-right: 1%;
-  width: 39%;
+  width: 37%;
 }
 
 .signature {
   float: right;
   font-style: italic;
-  margin-right: 10%;
+  margin-right: 3%;
 }
 
 @media screen and ( max-width: 500px ) {

src/screens/Home/index.js

@@ -10,21 +10,22 @@ class Home extends React.PureComponent {
         <img src={profile} alt='Profile' />
         <p>Hello and welcome,</p>
         <p>
-          My name is Mitchell Simon. I am a DevOps & Software Engineer at
-          Hypremium, Computer Science major at Loyola Marymount University, and
-          I offer my skills as a consulting web & software developer.
+          My name is Mitchell Simon. I am the Lead Backend Engineer at
+          Hypremium, where I architect and maintain our servlerless arcitecture,
+          Golang backend. I also offer my skills as a consulting/independent
+          web & software developer.
         </p>
         <p>
-          My professional interests include full-stack web development (with an
+          My professional interests include web development (with an
           emphasis on backend), system administration, network architecture,
           software engineering, cybersecurity, and business administration. My
           personal interests include music performance, skiing, and politics.
         </p>
         <p>
           Thank you for reading my quick bio. If you would like to contact me
-          visit the contact page for all of the options.
+          visit the contact page for all of your options.
         </p>
-        <p className='signature'>-- Mitchell J. F. Simon, III</p>
+        <p className='signature'>- Mitchell J. F. Simon, III</p>
       </div>
     )
   }

src/screens/Projects/index.css

@@ -4,11 +4,22 @@
 }
 
 .projects-container div {
+  border-bottom: 2px solid rgb(139, 191, 209);
   flex: 1 0 45%;
   margin: 2.5%;
+  padding-bottom: 20px;
   text-align: center;
 }
 
+.projects-container h4 {
+  margin-bottom: 0;
+}
+
+.projects-container p {
+  margin-top: 3%;
+}
+
+
 @media screen and ( max-width: 500px ) {
   .projects-container div {
     flex: 1 0 95%;

src/screens/Projects/index.js

@@ -14,19 +14,20 @@ class Projects extends React.PureComponent {
             This website has taken many forms over the years, as my frontend
             and design skills increase. It has been simple HTML, CSS, and JS,
             and a Ruby Sinatra web app. Currently it takes the form of a
-            React.js app. I enjoy React.js (and other similar frontend frameworks)
-            can be used to make even the simplest projects modular and extensible.
+            React.js app. I enjoy React.js (and similar frontend frameworks)
+            as they can be used to make even the simplest projects modular and
+            extensible.
           </p>
           <ClearButton href='https://github.com/mitchelljfs/react-website'>Repository</ClearButton>
         </div>
         <div>
           <h4>destinate</h4>
           <p>
-            Destinate is react-native, iOS and Android app. Its main objective
-            is to suggest places or activities to the user based on there past
-            choices. It utilizes a Serverless Framework backend, written in Go
-            and hosted on AWS. It is still under-development, as a side-project
-            of Arash Lari and I.
+            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
+            project of Arash Lari and I.
           </p>
           <ClearButton href='https://github.com/mitchelljfs/destinate'>Repository</ClearButton>
         </div>