Redesign and content changes. Added Experience screen.

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>
     )
   }
 }