More UI tweaks across the board. Added all-page header. Added clear-button component. Added Home and Projects pages.

src/components/ClearButton/ClearButton.css

@@ -0,0 +1,17 @@
+.clearButton, .clearButton:link, .clearButton:visited {
+  border: 2px solid rgb(59, 65, 82);
+  border-radius: 2px;
+  padding: 5px;
+  margin: 5px;
+  color: white;
+  margin: auto;
+  text-decoration: none;
+}
+
+.clearButton:hover {
+  background-color: rgb(59, 65, 82);
+}
+
+.clearButton:active {
+  box-shadow: 0 0 2px black inset;
+}

src/components/ClearButton/ClearButton.js

@@ -0,0 +1,13 @@
+import React, { PureComponent } from 'react'
+
+import './ClearButton.css'
+
+class ClearButton extends PureComponent {
+  render () {
+    return (
+      <a className='clearButton' href={this.props.href}>{this.props.children}</a>
+    )
+  }
+}
+
+export default ClearButton

src/components/Header/Header.css

@@ -0,0 +1,14 @@
+.HeaderContainer {
+  border-bottom: 2px solid rgb(22, 26, 40);
+  width: 65%;
+  margin: auto;
+  margin-bottom: -5px;
+}
+.HeaderContainer h2 {
+  margin-bottom: -5px;
+}
+
+.HeaderContainer p {
+  font-style: italic;
+  font-size: 0.8em;
+}

src/components/Header/Header.js

@@ -0,0 +1,16 @@
+import React, { PureComponent } from 'react'
+
+import './Header.css'
+
+class Header extends PureComponent {
+  render () {
+    return (
+      <div className='HeaderContainer'>
+        <h2>Mitchell J. F. Simon</h2>
+        <p>Cloud Architect, Hypremium.</p>
+      </div>
+    )
+  }
+}
+
+export default Header

src/components/Navbar/Navbar.css

@@ -4,7 +4,7 @@
   right: 0px;
   left: 0px;
   background-color: rgb(59, 65, 82);
-  box-shadow: -1px 0 3px black;
+  box-shadow: -1px -1px 1px rgb(42, 46, 60);
 }
 
 .Navbar-Button {
@@ -17,7 +17,11 @@
 }
 
 .Navbar-Button:hover {
-  box-shadow: 2px 2px 2px black;
+  background-color: rgb(176, 211, 237);
+}
+
+.Navbar-Button:active {
+  box-shadow: 0 0 2px black inset;
 }
 
 .Navbar-Menu {
@@ -26,27 +30,32 @@
   padding: 0 20%;
 }
 
-.Navbar-Menu p {
+.Navbar-Menu div {
   border-radius: 2px;
-  display: block;
   color: white;
   float: left;
   width: 23%;
   background-color: grey;
   padding: 5px;
   margin: 1% 1%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 @media screen and ( max-width: 500px ) {
   .Navbar-Menu {
     padding: 0 5% 3px 5%;
   }
-  .Navbar-Menu p {
+  .Navbar-Menu div {
     width: 100%;
     margin: 5px 0;
   }
 }
 
-.Navbar-Menu p:hover {
-  box-shadow: 2px 2px 2px black;
+.Navbar-Menu div:hover {
+  background-color: rgb(191, 191, 191);
+}
+
+.Active-Button div {
+  box-shadow: 0 0 2px black inset;
 }

src/components/Navbar/Navbar.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
-
 import ResponsiveMenu from 'react-responsive-navbar'
+import { NavLink } from 'react-router-dom'
 
 import './Navbar.css'
 
@@ -15,10 +15,10 @@ class Navbar extends Component {
         smallMenuClassName='Navbar'
         menu={
           <div className='Navbar-Menu'>
-            <p>Home</p>
-            <p>Projects</p>
-            <p>Experience</p>
-            <p>Contact</p>
+            <NavLink activeClassName='Active-Button' exact to='/'><div>Home</div></NavLink>
+            <NavLink activeClassName='Active-Button' to='/projects'><div>Projects</div></NavLink>
+            <NavLink activeClassName='Active-Button' to='/experience'><div>Experience</div></NavLink>
+            <NavLink activeClassName='Active-Button' to='/contact'><div>Contact</div></NavLink>
           </div>
         }
       />