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

src/Website.css

@@ -1,5 +1,21 @@
 .Website {
   display: flex;
   justify-content: center;
+  flex-flow: column nowrap;
   color: white;
+  margin-bottom: 15%;
+}
+
+.MainContainer {
+  max-width: 700px;
+  min-width: 60%;
+  margin: auto;
+  padding-bottom: 10%;
+  text-align: center;
+}
+
+@media screen and ( max-width: 500px ) {
+  .MainContainer {
+    width: 100%;
+  }
 }

src/Website.js

@@ -1,6 +1,10 @@
 import React, { Component } from 'react'
+import { Route, Switch } from 'react-router-dom'
 
+import Header from './components/Header/Header.js'
 import Navbar from './components/Navbar/Navbar.js'
+import Home from './screens/Home/Home.js'
+import Projects from './screens/Projects/Projects.js'
 
 import './Website.css'
 
@@ -8,8 +12,16 @@ class Website extends Component {
   render () {
     return (
       <div className='Website'>
-        <p>Hello, my dudes.</p>
-        <Navbar />
+        <div className='MainContainer'>
+          <Header />
+          <Switch>
+            <Route exact path='/' component={Home} />
+            <Route path='/projects' component={Projects} />
+            <Route path='/experience' component={null} />
+            <Route path='/contact' component={null} />
+          </Switch>
+          <Navbar />
+        </div>
       </div>
     )
   }

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

src/index.js

@@ -1,11 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { BrowserRouter } from 'react-router-dom'
+
 import './index.css'
 import Website from './Website'
 import registerServiceWorker from './registerServiceWorker'
 
-ReactDOM.render(
-  <Website />,
-  document.getElementById('root')
+ReactDOM.render((
+  <BrowserRouter>
+    <Website />
+  </BrowserRouter>
+  ), document.getElementById('root')
 )
 registerServiceWorker()

src/screens/Home/Home.css

@@ -0,0 +1,26 @@
+.HomeContainer p {
+  text-align: left;
+  display: block;
+}
+
+.HomeContainer img {
+  float: left;
+  display: block;
+  width: 40%;
+  margin-right: 5px;
+  border-radius: 2px;
+}
+
+.signature {
+  float: right;
+  font-style: italic;
+  margin-right: 10%;
+}
+
+@media screen and ( max-width: 500px ) {
+  .HomeContainer img {
+    width: 100%;
+    padding: 5%;
+    margin: auto;
+  }
+}

src/screens/Home/Home.js

@@ -0,0 +1,34 @@
+import React, { PureComponent } from 'react'
+
+import './Home.css'
+import profile from '../../images/profile.jpg'
+
+class Home extends PureComponent {
+  render () {
+    return (
+      <div className='HomeContainer'>
+        <img src={profile} alt='Profile' />
+        <p>Hello and welcome,</p>
+        <p>
+          My name is Mitchell Simon. I am a Computer Science major at Loyola
+          Marymount University, Backend Software Developer at Hypremium, and I
+          offer my skills as a freelance web developer, and freelance
+          software/application developer.
+        </p>
+        <p>
+          My academic interests include full stack 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.
+        </p>
+        <p className='signature'>-- Mitchell J. F. Simon, III</p>
+      </div>
+    )
+  }
+}
+
+export default Home

src/screens/Projects/Projects.css

@@ -0,0 +1,17 @@
+.ProjectsContainer {
+  display: flex;
+  flex-flow: row wrap;
+}
+.ProjectsContainer div {
+  text-align: center;
+  padding: 5px;
+  margin: auto;
+  flex: 1 0 100%;
+  max-width: 50%;
+}
+
+@media screen and ( max-width: 500px ) {
+  .ProjectsContainer div {
+    max-width: 100%;
+  }
+}

src/screens/Projects/Projects.js

@@ -0,0 +1,53 @@
+import React, { PureComponent } from 'react'
+
+import ClearButton from '../../components/ClearButton/ClearButton.js'
+
+import './Projects.css'
+
+class Projects extends PureComponent {
+  render () {
+    return (
+      <div className='ProjectsContainer'>
+        <div>
+          <h4>www.mitchelljfsimon.com</h4>
+          <p>
+            This website has taken many forms over the years, as my frontend
+            and design skills increase. It started as a simple static site
+            using HTML, CSS, and a little bit of Javascript. Then it became
+            simple web app using Ruby and the Sinatra framework. Currently it
+            takes the form of a React.js app. This may be considered over-kill,
+            but I believe React.js (and other similar frontend frameworks) 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>memebank API</h4>
+          <p>
+            This is a RESTful API using the Rails framework to support the
+            front end application of memebank. It uses JWT authentication for
+            stateless account authentication, and bcrypt for password
+            encryption. It communicates with the front-end using basic HTTP
+            requests and JSON objects.
+          </p>
+          <ClearButton href='https://github.com/aherco/memebank-api'>Repository</ClearButton>
+        </div>
+        <div>
+          <h4>reddit Neo4J Database</h4>
+          <p>
+            A learning Neo4j database project of a sample of comments on the
+            popular social media platform Reddit. A possible prototype database
+            for Reddit to run on Neo4j. It can show the relationships between
+            users, their comments, and subreddits. With this information we can
+            infer demographic information about reddits users. For example we
+            could see which subreddits have the same users who post comments,
+            and where else they post.
+          </p>
+          <ClearButton href='https://github.com/mitchelljfs/comment_context_analysis'>Repository</ClearButton>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Projects