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

README.md

@@ -0,0 +1,2 @@
+# Personal Website
+This is my personal website built using React.js. Visit it and read a bit more about it [here](https://www.mitchelljfsimon.com).

package-lock.json

@@ -5165,6 +5165,18 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
       "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0="
     },
+    "history": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
+      "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
+      "requires": {
+        "invariant": "2.2.4",
+        "loose-envify": "1.3.1",
+        "resolve-pathname": "2.2.0",
+        "value-equal": "0.4.0",
+        "warning": "3.0.0"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -9473,6 +9485,40 @@
         "styled-components": "2.4.0"
       }
     },
+    "react-router": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.2.0.tgz",
+      "integrity": "sha512-DY6pjwRhdARE4TDw7XjxjZsbx9lKmIcyZoZ+SDO7SBJ1KUeWNxT22Kara2AC7u6/c2SYEHlEDLnzBCcNhLE8Vg==",
+      "requires": {
+        "history": "4.7.2",
+        "hoist-non-react-statics": "2.5.0",
+        "invariant": "2.2.4",
+        "loose-envify": "1.3.1",
+        "path-to-regexp": "1.7.0",
+        "prop-types": "15.6.1",
+        "warning": "3.0.0"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz",
+          "integrity": "sha512-6Bl6XsDT1ntE0lHbIhr4Kp2PGcleGZ66qu5Jqk8lc0Xc/IeG6gVLmwUGs/K0Us+L8VWoKgj0uWdPMataOsm31w=="
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.2.2.tgz",
+      "integrity": "sha512-cHMFC1ZoLDfEaMFoKTjN7fry/oczMgRt5BKfMAkTu5zEuJvUiPp1J8d0eXSVTnBh6pxlbdqDhozunOOLtmKfPA==",
+      "requires": {
+        "history": "4.7.2",
+        "invariant": "2.2.4",
+        "loose-envify": "1.3.1",
+        "prop-types": "15.6.1",
+        "react-router": "4.2.0",
+        "warning": "3.0.0"
+      }
+    },
     "react-scripts": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz",
@@ -10098,6 +10144,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz",
       "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY="
     },
+    "resolve-pathname": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -11528,6 +11579,11 @@
         "spdx-expression-parse": "3.0.0"
       }
     },
+    "value-equal": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -11564,6 +11620,14 @@
         "makeerror": "1.0.11"
       }
     },
+    "warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+      "requires": {
+        "loose-envify": "1.3.1"
+      }
+    },
     "watch": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz",

package.json

@@ -6,6 +6,7 @@
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-responsive-navbar": "^1.0.11",
+    "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.4"
   },
   "scripts": {

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,9 +12,17 @@ class Website extends Component {
   render () {
     return (
       <div className='Website'>
-        <p>Hello, my dudes.</p>
+        <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 {
+.Navbar-Menu div:hover {
-  box-shadow: 2px 2px 2px black;
+  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>
+            <NavLink activeClassName='Active-Button' exact to='/'><div>Home</div></NavLink>
-            <p>Projects</p>
+            <NavLink activeClassName='Active-Button' to='/projects'><div>Projects</div></NavLink>
-            <p>Experience</p>
+            <NavLink activeClassName='Active-Button' to='/experience'><div>Experience</div></NavLink>
-            <p>Contact</p>
+            <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(
+ReactDOM.render((
-  <Website />,
+  <BrowserRouter>
-  document.getElementById('root')
+    <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