Renamed screens/ to containers/; changed from standard to prettier; modified quick bio; version bump; changed from yarn back to npm

.prettierrc.yml

@@ -0,0 +1 @@
+semi: false

README.md

@@ -1,5 +1,5 @@
 # Personal Website
-[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 
 This is my personal website built using React.js. It is hosted in multiple
 locations around the US, Canada, and Europe thanks to AWS CloudFront and S3.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-website",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.8",
@@ -21,6 +21,6 @@
   },
   "devDependencies": {
     "csslint": "^1.0.5",
-    "standard": "^11.0.1"
+    "prettier": "^1.13.7"
   }
 }

src/Website.js

@@ -1,26 +1,26 @@
-import React from 'react'
+import React from "react"
-import { Route, Switch } from 'react-router-dom'
+import { Route, Switch } from "react-router-dom"
 
-import Header from './components/Header'
+import Header from "./components/Header"
-import Navbar from './components/Navbar'
+import Navbar from "./components/Navbar"
-import Home from './screens/Home'
+import Home from "./containers/Home"
-import Projects from './screens/Projects'
+import Projects from "./containers/Projects"
-import Experience from './screens/Experience'
+import Experience from "./containers/Experience"
-import Contact from './screens/Contact'
+import Contact from "./containers/Contact"
 
-import './Website.css'
+import "./Website.css"
 
 class Website extends React.Component {
   render() {
     return (
-      <div className='website'>
+      <div className="website">
-        <div className='main-container'>
+        <div className="main-container">
           <Header />
           <Switch>
-            <Route exact path='/' component={Home} />
+            <Route exact path="/" component={Home} />
-            <Route path='/projects' component={Projects} />
+            <Route path="/projects" component={Projects} />
-            <Route path='/experience' component={Experience} />
+            <Route path="/experience" component={Experience} />
-            <Route path='/contact' component={Contact} />
+            <Route path="/contact" component={Contact} />
           </Switch>
           <Navbar />
         </div>

src/Website.test.js

@@ -1,9 +1,9 @@
-import React from 'react'
+import React from "react"
-import ReactDOM from 'react-dom'
+import ReactDOM from "react-dom"
-import Website from './Website.js'
+import Website from "./Website.js"
 
-it('renders without crashing', () => {
+it("renders without crashing", () => {
-  const div = document.createElement('div')
+  const div = document.createElement("div")
   ReactDOM.render(<Website />, div)
   ReactDOM.unmountComponentAtNode(div)
 })

src/components/ClearButton/index.js

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

src/components/Header/index.js

@@ -1,13 +1,13 @@
-import React from 'react'
+import React from "react"
 
-import SmallText from '../SmallText'
+import SmallText from "../SmallText"
 
-import './index.css'
+import "./index.css"
 
 class Header extends React.PureComponent {
   render() {
     return (
-      <div className='header-container'>
+      <div className="header-container">
         <h2>Mitchell J. F. Simon</h2>
         <SmallText>Lead Backend Engineer, Hypremium.</SmallText>
       </div>

src/components/Navbar/index.js

@@ -1,26 +1,42 @@
-import React from 'react'
+import React from "react"
-import ResponsiveMenu from 'react-responsive-navbar'
+import ResponsiveMenu from "react-responsive-navbar"
-import { NavLink } from 'react-router-dom'
+import { NavLink } from "react-router-dom"
-import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+import FontAwesomeIcon from "@fortawesome/react-fontawesome"
-import faBars from '@fortawesome/fontawesome-free-solid/faBars'
+import faBars from "@fortawesome/fontawesome-free-solid/faBars"
 
-import './index.css'
+import "./index.css"
 
 class Navbar extends React.Component {
   render() {
     return (
       <ResponsiveMenu
-        menuOpenButton={<div className='navbar-button'><FontAwesomeIcon icon={faBars} /></div>}
+        menuOpenButton={
-        menuCloseButton={<div className='navbar-button navbar-button-close'><FontAwesomeIcon icon={faBars} /></div>}
+          <div className="navbar-button">
-        changeMenuOn='500px'
+            <FontAwesomeIcon icon={faBars} />
-        largeMenuClassName='navbar'
+          </div>
-        smallMenuClassName='navbar'
+        }
+        menuCloseButton={
+          <div className="navbar-button navbar-button-close">
+            <FontAwesomeIcon icon={faBars} />
+          </div>
+        }
+        changeMenuOn="500px"
+        largeMenuClassName="navbar"
+        smallMenuClassName="navbar"
         menu={
-          <div className='navbar-menu'>
+          <div className="navbar-menu">
-            <NavLink activeClassName='active-button' exact to='/'><div>Home</div></NavLink>
+            <NavLink activeClassName="active-button" exact to="/">
-            <NavLink activeClassName='active-button' to='/projects'><div>Projects</div></NavLink>
+              <div>Home</div>
-            <NavLink activeClassName='active-button' to='/experience'><div>Experience</div></NavLink>
+            </NavLink>
-            <NavLink activeClassName='active-button' to='/contact'><div>Contact</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/components/SmallText/index.js

@@ -1,13 +1,11 @@
-import React from 'react'
+import React from "react"
-import PropTypes from 'prop-types'
+import PropTypes from "prop-types"
 
-import './index.css'
+import "./index.css"
 
 class SmallText extends React.PureComponent {
   render() {
-    return (
+    return <div className="small-text">{this.props.children}</div>
-      <div className='small-text'>{this.props.children}</div>
-    )
   }
 }
 

src/containers/Contact/index.js

@@ -0,0 +1,19 @@
+import React from "react"
+
+import "./index.css"
+import linkedIn from "../../images/In-2C-128px-TM.png"
+
+class Contact extends React.PureComponent {
+  render() {
+    return (
+      <div className="contact-container">
+        <p>m@mjfs.us</p>
+        <a href="https://www.linkedin.com/in/mitchelljfsimon/">
+          <img src={linkedIn} alt="LinkedIn" />
+        </a>
+      </div>
+    )
+  }
+}
+
+export default Contact

src/containers/Experience/index.js

@@ -0,0 +1,104 @@
+import React from "react"
+
+import SmallText from "../../components/SmallText"
+import "./index.css"
+
+class Experience extends React.PureComponent {
+  render() {
+    return (
+      <div className="experience-container">
+        <div>
+          <div className="experience-title">Lead Backend Engineer</div>
+          <div className="experience-company">Hypremium.</div>
+          <SmallText className="experience-smalltext">
+            May 2018 - Present
+          </SmallText>
+          <ul>
+            <li>
+              Architect all new backend microservices using Serverless, AWS API
+              Gateway/Lambda/more, and Golang.
+            </li>
+            <li>
+              Lead backend development team in an Agile (scrumban) environment.
+            </li>
+            <li>Monitor and maintain all stages of hosted microservices.</li>
+          </ul>
+        </div>
+        <div>
+          <div className="experience-title">DevOps Engineer</div>
+          <div className="experience-company">Hypremium.</div>
+          <SmallText className="experience-smalltext">
+            January 2018 - May 2018, 5 Months
+          </SmallText>
+          <ul>
+            <li>
+              Maintain & migrate Ruby on Rails API and backend application.
+            </li>
+            <li>
+              Oversee and assist with continuous integration for backend
+              development.
+            </li>
+          </ul>
+        </div>
+        <div>
+          <div className="experience-title">Sales Associate</div>
+          <div className="experience-company">J. Crew</div>
+          <SmallText className="experience-smalltext">
+            October 2015 - January 2017, 1 Year 5 Months
+          </SmallText>
+          <ul>
+            <li>
+              Knowing the products and what products best suit the customers’
+              needs.
+            </li>
+            <li>
+              Helping the customer with any manner of purchase, exchange, or
+              return.
+            </li>
+          </ul>
+        </div>
+        <div>
+          <div className="experience-title">Intern</div>
+          <div className="experience-company">Zumasys</div>
+          <SmallText className="experience-smalltext">
+            June 2015 - August 2015, 3 Months
+          </SmallText>
+          <ul>
+            <li>
+              Main goal was to learn as much about the business and their
+              technology as possible
+            </li>
+            <li>Management and organization of customer correspondence.</li>
+            <li>Auditing of server space.</li>
+            <li>
+              Dispatching and filtering ticketing system and office computer
+              assistance.
+            </li>
+          </ul>
+        </div>
+        <div>
+          <div className="experience-title">User Support Technician</div>
+          <div className="experience-company">
+            Point Loma Nazarene University, ITS Deptarment
+          </div>
+          <SmallText className="experience-smalltext">
+            Jan 2015 - May 2015, 5 Months
+          </SmallText>
+          <ul>
+            <li>
+              First in contact for email hotline, second in contact for phones.
+            </li>
+            <li>
+              Work with customers via email, phone, remote control, and in
+              person.
+            </li>
+            <li>Computer diagnosis, repair, and preparation for customer.</li>
+            <li>Special projects.</li>
+          </ul>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Experience

src/containers/Home/index.js

@@ -0,0 +1,34 @@
+import React from "react"
+
+import "./index.css"
+import profile from "../../images/profile.jpg"
+
+class Home extends React.PureComponent {
+  render() {
+    return (
+      <div className="home-container">
+        <img src={profile} alt="Profile" />
+        <p>Hello and welcome,</p>
+        <p>
+          My name is Mitchell Simon. I am the Lead Backend Engineer at
+          Hypremium, where I lead the architecture of and maintain our
+          serverless, Golang backend. I also offer my skills as a consulting web
+          & cloud developer.
+        </p>
+        <p>
+          My professional interests include 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 your options.
+        </p>
+        <p className="signature">- Mitchell J. F. Simon, III</p>
+      </div>
+    )
+  }
+}
+
+export default Home

src/containers/Projects/index.js

@@ -0,0 +1,67 @@
+import React from "react"
+
+import ClearButton from "../../components/ClearButton"
+
+import "./index.css"
+
+class Projects extends React.PureComponent {
+  render() {
+    return (
+      <div className="projects-container">
+        <div>
+          <h4>mjfs.us</h4>
+          <p>
+            This website has taken many forms over the years, as my frontend and
+            design skills increase. It has been simple HTML, CSS, and JS, and a
+            Ruby Sinatra web app. Currently it takes the form of a React.js app.
+            I enjoy React.js (and similar frontend frameworks) as they 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>destinate</h4>
+          <p>
+            destinate is a react-native, iOS (and Android) app. Its main
+            objective is to suggest places or activities to the user based on
+            their past choices. It utilizes a serverless backend, written in Go
+            and hosted on AWS API Gateway/Lambda. It is still under development,
+            as a side project of Arash Lari and I.
+          </p>
+          <ClearButton href="https://github.com/mitchelljfs/destinate">
+            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. It can show the relationships
+            between users, their comments, and subreddits. With this information
+            we can infer demographic information about reddit's users.
+          </p>
+          <ClearButton href="https://github.com/mitchelljfs/comment_context_analysis">
+            Repository
+          </ClearButton>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Projects

src/index.js

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

src/registerServiceWorker.js

@@ -9,9 +9,9 @@
 // This link also includes instructions on opting out of this behavior.
 
 const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
+  window.location.hostname === "localhost" ||
     // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
+    window.location.hostname === "[::1]" ||
     // 127.0.0.1/8 is considered localhost for IPv4.
     window.location.hostname.match(
       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
@@ -19,7 +19,7 @@ const isLocalhost = Boolean(
 )
 
 export default function register() {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(process.env.PUBLIC_URL, window.location) // eslint-disable-line no-undef
     if (publicUrl.origin !== window.location.origin) {
@@ -29,7 +29,7 @@ export default function register () {
       return
     }
 
-    window.addEventListener('load', () => {
+    window.addEventListener("load", () => {
       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
 
       if (isLocalhost) {
@@ -40,8 +40,8 @@ export default function register () {
         // service worker/PWA documentation.
         navigator.serviceWorker.ready.then(() => {
           console.log(
-            'This web app is being served cache-first by a service ' +
+            "This web app is being served cache-first by a service " +
-              'worker. To learn more, visit https://goo.gl/SC7cgQ'
+              "worker. To learn more, visit https://goo.gl/SC7cgQ"
           )
         })
       } else {
@@ -59,25 +59,25 @@ function registerValidSW (swUrl) {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing
         installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
+          if (installingWorker.state === "installed") {
             if (navigator.serviceWorker.controller) {
               // At this point, the old content will have been purged and
               // the fresh content will have been added to the cache.
               // It's the perfect time to display a "New content is
               // available; please refresh." message in your web app.
-              console.log('New content is available; please refresh.')
+              console.log("New content is available; please refresh.")
             } else {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.')
+              console.log("Content is cached for offline use.")
             }
           }
         }
       }
     })
     .catch(error => {
-      console.error('Error during service worker registration:', error)
+      console.error("Error during service worker registration:", error)
     })
 }
 
@@ -88,7 +88,7 @@ function checkValidServiceWorker (swUrl) {
       // Ensure service worker exists, and that we really are getting a JS file.
       if (
         response.status === 404 ||
-        response.headers.get('content-type').indexOf('javascript') === -1
+        response.headers.get("content-type").indexOf("javascript") === -1
       ) {
         // No service worker found. Probably a different app. Reload the page.
         navigator.serviceWorker.ready.then(registration => {
@@ -103,13 +103,13 @@ function checkValidServiceWorker (swUrl) {
     })
     .catch(() => {
       console.log(
-        'No internet connection found. App is running in offline mode.'
+        "No internet connection found. App is running in offline mode."
       )
     })
 }
 
 export function unregister() {
-  if ('serviceWorker' in navigator) {
+  if ("serviceWorker" in navigator) {
     navigator.serviceWorker.ready.then(registration => {
       registration.unregister()
     })

src/screens/Contact/index.js

@@ -1,19 +0,0 @@
-import React from 'react'
-
-import './index.css'
-import linkedIn from '../../images/In-2C-128px-TM.png'
-
-class Contact extends React.PureComponent {
-  render () {
-    return (
-      <div className='contact-container'>
-        <p>m@mjfs.us</p>
-        <a href='https://www.linkedin.com/in/mitchelljfsimon/'>
-          <img src={linkedIn} alt='LinkedIn' />
-        </a>
-      </div>
-    )
-  }
-}
-
-export default Contact

src/screens/Experience/index.js

@@ -1,65 +0,0 @@
-import React from 'react'
-
-import SmallText from '../../components/SmallText'
-import './index.css'
-
-class Experience extends React.PureComponent {
-  render () {
-    return (
-      <div className='experience-container'>
-        <div>
-          <div className='experience-title'>Lead Backend Engineer</div>
-          <div className='experience-company'>Hypremium.</div>
-          <SmallText className='experience-smalltext'>May 2018 - Present</SmallText>
-          <ul>
-            <li>Architect all new backend microservices using Serverless, AWS API Gateway/Lambda/more, and Golang.</li>
-            <li>Lead backend development team in an Agile (scrumban) environment.</li>
-            <li>Monitor and maintain all stages of hosted microservices.</li>
-          </ul>
-        </div>
-        <div>
-          <div className='experience-title'>DevOps Engineer</div>
-          <div className='experience-company'>Hypremium.</div>
-          <SmallText className='experience-smalltext'>January 2018 - May 2018, 5 Months</SmallText>
-          <ul>
-            <li>Maintain & migrate Ruby on Rails API and backend application.</li>
-            <li>Oversee and assist with continuous integration for backend development.</li>
-          </ul>
-        </div>
-        <div>
-          <div className='experience-title'>Sales Associate</div>
-          <div className='experience-company'>J. Crew</div>
-          <SmallText className='experience-smalltext'>October 2015 - January 2017, 1 Year 5 Months</SmallText>
-          <ul>
-            <li>Knowing the products and what products best suit the customers’ needs.</li>
-            <li>Helping the customer with any manner of purchase, exchange, or return.</li>
-          </ul>
-        </div>
-        <div>
-          <div className='experience-title'>Intern</div>
-          <div className='experience-company'>Zumasys</div>
-          <SmallText className='experience-smalltext'>June 2015 - August 2015, 3 Months</SmallText>
-          <ul>
-            <li>Main goal was to learn as much about the business and their technology as possible</li>
-            <li>Management and organization of customer correspondence.</li>
-            <li>Auditing of server space.</li>
-            <li>Dispatching and filtering ticketing system and office computer assistance.</li>
-          </ul>
-        </div>
-        <div>
-          <div className='experience-title'>User Support Technician</div>
-          <div className='experience-company'>Point Loma Nazarene University, ITS Deptarment</div>
-          <SmallText className='experience-smalltext'>Jan 2015 - May 2015, 5 Months</SmallText>
-          <ul>
-            <li>First in contact for email hotline, second in contact for phones.</li>
-            <li>Work with customers via email, phone, remote control, and in person.</li>
-            <li>Computer diagnosis, repair, and preparation for customer.</li>
-            <li>Special projects.</li>
-          </ul>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default Experience

src/screens/Home/index.js

@@ -1,34 +0,0 @@
-import React from 'react'
-
-import './index.css'
-import profile from '../../images/profile.jpg'
-
-class Home extends React.PureComponent {
-  render () {
-    return (
-      <div className='home-container'>
-        <img src={profile} alt='Profile' />
-        <p>Hello and welcome,</p>
-        <p>
-          My name is Mitchell Simon. I am the Lead Backend Engineer at
-          Hypremium, where I lead the architecture of and maintain our serverless,
-          Golang backend. I also offer my skills as a consulting/independent
-          web & cloud developer.
-        </p>
-        <p>
-          My professional interests include 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 your options.
-        </p>
-        <p className='signature'>- Mitchell J. F. Simon, III</p>
-      </div>
-    )
-  }
-}
-
-export default Home

src/screens/Projects/index.js

@@ -1,60 +0,0 @@
-import React from 'react'
-
-import ClearButton from '../../components/ClearButton'
-
-import './index.css'
-
-class Projects extends React.PureComponent {
-  render () {
-    return (
-      <div className='projects-container'>
-        <div>
-          <h4>mjfs.us</h4>
-          <p>
-            This website has taken many forms over the years, as my frontend
-            and design skills increase. It has been simple HTML, CSS, and JS,
-            and a Ruby Sinatra web app. Currently it takes the form of a
-            React.js app. I enjoy React.js (and similar frontend frameworks)
-            as they 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>destinate</h4>
-          <p>
-            destinate is a react-native, iOS (and Android) app. Its main objective
-            is to suggest places or activities to the user based on their past
-            choices. It utilizes a serverless backend, written in Go and hosted
-            on AWS API Gateway/Lambda. It is still under development, as a side
-            project of Arash Lari and I.
-          </p>
-          <ClearButton href='https://github.com/mitchelljfs/destinate'>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. It can show the relationships between
-            users, their comments, and subreddits. With this information we can
-            infer demographic information about reddit's users.
-          </p>
-          <ClearButton href='https://github.com/mitchelljfs/comment_context_analysis'>Repository</ClearButton>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default Projects