Content tweaks. Componentized SmallText. Standardized naming conventions.

src/components/ClearButton/ClearButton.css

@@ -1,17 +0,0 @@
-.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/index.css

@@ -0,0 +1,17 @@
+.clear-button, .clear-button:link, .clear-button:visited {
+  border: 2px solid rgb(59, 65, 82);
+  border-radius: 2px;
+  color: white;
+  margin: 5px;
+  padding: 5px;
+  text-decoration: none;
+  transition: background-color 0.2s, box-shadow 0.1s;
+}
+
+.clear-button:hover {
+  background-color: rgb(59, 65, 82);
+}
+
+.clear-button:active {
+  box-shadow: 0 0 5px rgb(46, 51, 64) inset;
+}

src/components/ClearButton/index.js

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

src/components/Header/index.css

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

src/components/Header/index.js

@@ -1,13 +1,15 @@
 import React, { PureComponent } from 'react'
 
-import './Header.css'
+import SmallText from '../SmallText'
+
+import './index.css'
 
 class Header extends PureComponent {
   render () {
     return (
-      <div className='HeaderContainer'>
+      <div className='header-container'>
         <h2>Mitchell J. F. Simon</h2>
-        <p>Cloud Architect, Hypremium.</p>
+        <SmallText>DevOps & Software Engineer, Hypremium.</SmallText>
       </div>
     )
   }

src/components/Navbar/Navbar.js

@@ -1,29 +0,0 @@
-import React, { Component } from 'react'
-import ResponsiveMenu from 'react-responsive-navbar'
-import { NavLink } from 'react-router-dom'
-
-import './Navbar.css'
-
-class Navbar extends Component {
-  render () {
-    return (
-      <ResponsiveMenu
-        menuOpenButton={<div className='Navbar-Button'>Menu</div>}
-        menuCloseButton={<div className='Navbar-Button'>Close</div>}
-        changeMenuOn='500px'
-        largeMenuClassName='Navbar'
-        smallMenuClassName='Navbar'
-        menu={
-          <div className='Navbar-Menu'>
-            <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>
-        }
-      />
-    )
-  }
-}
-
-export default Navbar

src/components/Navbar/index.css

@@ -1,4 +1,4 @@
-.Navbar {
+.navbar {
   background-color: rgb(59, 65, 82);
   bottom: 0;
   box-shadow: -1px -1px 1px rgb(42, 46, 60);
@@ -7,58 +7,59 @@
   right: 0;
 }
 
-.Navbar-Button {
+.navbar-button {
   background-color: rgb(126, 161, 187);
   border-radius: 2px;
   color: white;
   float: right;
   margin: 5px;
-  padding: 5px;
+  padding: 2px 5px;
+  transition: background-color 0.2s, box-shadow 0.1s;
 }
 
-.Navbar-Button:hover {
+.navbar-button:hover {
   background-color: rgb(176, 211, 237);
 }
 
-.Navbar-Button:active {
-  box-shadow: 0 0 2px black inset;
+.navbar-button:active {
+  box-shadow: 0 0 5px black inset;
 }
 
-.Navbar-Menu {
+.navbar-menu {
   margin: 0 20%;
   width: 60%;
 }
 
-.Navbar-Menu div {
-  background-color: grey;
-  border-radius: 2px;
+.navbar-menu div {
+  border-radius: 3px;
   color: white;
   float: left;
   margin: 1% 1%;
   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 {
+  .navbar {
     padding-bottom: 5px;
   }
-  .Navbar-Menu {
+  .navbar-menu {
     margin: 5%;
     width: 90%;
   }
-  .Navbar-Menu div {
+  .navbar-menu div {
     margin: 5px 0;
     width: 100%;
   }
 }
 
-.Navbar-Menu div:hover {
-  background-color: rgb(191, 191, 191);
+.navbar-menu div:hover {
+  background-color: rgb(86, 95, 118);
 }
 
-.Active-Button div {
-  box-shadow: 0 0 2px black inset;
+.active-button div {
+  box-shadow: 0 0 5px rgb(22, 26, 40) inset;
 }

src/components/Navbar/index.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import ResponsiveMenu from 'react-responsive-navbar'
+import { NavLink } from 'react-router-dom'
+
+import './index.css'
+
+class Navbar extends Component {
+  render () {
+    return (
+      <ResponsiveMenu
+        menuOpenButton={<div className='navbar-button'>Menu</div>}
+        menuCloseButton={<div className='navbar-button'>Close</div>}
+        changeMenuOn='500px'
+        largeMenuClassName='navbar'
+        smallMenuClassName='navbar'
+        menu={
+          <div className='navbar-menu'>
+            <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>
+        }
+      />
+    )
+  }
+}
+
+export default Navbar

src/components/SmallText/index.css

@@ -0,0 +1,5 @@
+.small-text {
+  color: lightgrey;
+  font-size: 0.8rem;
+  font-style: italic;
+}

src/components/SmallText/index.js

@@ -0,0 +1,13 @@
+import React, { PureComponent } from 'react'
+
+import './index.css'
+
+class SmallText extends PureComponent {
+  render () {
+    return (
+      <p className='small-text'>DevOps & Software Engineer, Hypremium.</p>
+    )
+  }
+}
+
+export default SmallText