Minor content change to header; refactor project structure; prettier-standard everything

src/Website.js

@@ -1,19 +1,19 @@
 // @flow
-import React from "react"
+import React from 'react'
 
-import Header from "./components/Header"
-import Navbar from "./components/Navbar"
-import Routes from "./routes"
+import Header from './components/Header'
+import Navbar from './components/Navbar'
+import Routes from './routes'
 
-import "./Website.css"
+import './Website.css'
 
 type Props = {}
 
 class Website extends React.Component<Props> {
-  render() {
+  render () {
     return (
-      <div className="website">
-        <div className="main-container">
+      <div className='website'>
+        <div className='main-container'>
           <Navbar />
           <Header />
           <Routes />

src/Website.test.js

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

src/components/ClearButton/index.js

@@ -1,7 +1,7 @@
 // @flow
-import React from "react"
+import React from 'react'
 
-import "./index.css"
+import './index.css'
 
 type Props = {
   href: string,
@@ -9,9 +9,9 @@ type Props = {
 }
 
 class ClearButton extends React.PureComponent<Props> {
-  render() {
+  render () {
     return (
-      <a className="clear-button" href={this.props.href}>
+      <a className='clear-button' href={this.props.href}>
         {this.props.children}
       </a>
     )

src/components/Contact/index.js

@@ -1,22 +0,0 @@
-// @flow
-import React from "react"
-
-import "./index.css"
-import linkedIn from "../../images/In-2C-128px-TM.png"
-
-type Props = {}
-
-class Contact extends React.PureComponent<Props> {
-  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/components/Header/index.js

@@ -1,18 +1,23 @@
 // @flow
-import React from "react"
+import React from 'react'
 
-import SmallText from "../SmallText"
+import SmallText from '../SmallText'
 
-import "./index.css"
+import './index.css'
 
 type Props = {}
 
 class Header extends React.PureComponent<Props> {
-  render() {
+  render () {
     return (
-      <div className="header-container">
+      <div className='header-container'>
         <h2>Mitchell J. F. Simon</h2>
-        <SmallText>Backend Engineer, TV Time</SmallText>
+        <SmallText>
+          Software engineer;&nbsp;
+          <span style={{ display: 'inline-block' }}>
+            cloud-native web services and clients
+          </span>
+        </SmallText>
       </div>
     )
   }

src/components/Job/index.js

@@ -1,8 +1,8 @@
 // @flow
-import * as React from "react"
+import * as React from 'react'
 
-import SmallText from "../../components/SmallText"
-import "./index.css"
+import SmallText from '../../components/SmallText'
+import './index.css'
 
 type Props = {
   title: string,
@@ -14,7 +14,7 @@ type Props = {
 class Experience extends React.PureComponent<Props> {
   listedBullets: Array<React.Element<string>>
 
-  constructor(props: Props) {
+  constructor (props: Props) {
     super(props)
 
     this.listedBullets = this.props.bullets.map((bullet, index) => (
@@ -22,11 +22,11 @@ class Experience extends React.PureComponent<Props> {
     ))
   }
 
-  render() {
+  render () {
     return (
-      <div className="job-container">
-        <div className="job-title">{this.props.title}</div>
-        <div className="job-company">{this.props.company}</div>
+      <div className='job-container'>
+        <div className='job-title'>{this.props.title}</div>
+        <div className='job-company'>{this.props.company}</div>
         <SmallText>{this.props.timeSpan}</SmallText>
         <ul>{this.listedBullets}</ul>
       </div>

src/components/Navbar/index.js

@@ -1,11 +1,11 @@
 // @flow
-import * as React from "react"
-import { NavLink } from "react-router-dom"
-import FontAwesomeIcon from "@fortawesome/react-fontawesome"
-import faBars from "@fortawesome/fontawesome-free-solid/faBars"
+import * as React from 'react'
+import { NavLink } from 'react-router-dom'
+import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+import faBars from '@fortawesome/fontawesome-free-solid/faBars'
 
-import "./index.css"
-import { routes } from "../../routes/routes.js"
+import './index.css'
+import { routes } from '../../routes/routes.js'
 
 const changeMenu = 800
 
@@ -18,7 +18,7 @@ type State = {
 class Navbar extends React.Component<Props, State> {
   buttons: Array<NavLink<string>>
 
-  constructor(props: Props) {
+  constructor (props: Props) {
     super(props)
 
     if (window.innerWidth <= changeMenu) {
@@ -30,8 +30,8 @@ class Navbar extends React.Component<Props, State> {
     this.buttons = routes.map(route => (
       <NavLink
         key={route.name}
-        className="navbar-menu-button"
-        activeClassName="active-button"
+        className='navbar-menu-button'
+        activeClassName='active-button'
         exact={route.exact}
         to={route.path}
         onClick={this.closeMenu}
@@ -56,7 +56,7 @@ class Navbar extends React.Component<Props, State> {
     }
   }
 
-  render() {
+  render () {
     let menuButton: ?React.Element<string>
 
     if (this.isMobile()) {
@@ -64,8 +64,8 @@ class Navbar extends React.Component<Props, State> {
         <div
           className={
             this.state.showMenu
-              ? "navbar-button navbar-button-closed"
-              : "navbar-button"
+              ? 'navbar-button navbar-button-closed'
+              : 'navbar-button'
           }
           onClick={this.toggleMenu}
         >
@@ -75,10 +75,10 @@ class Navbar extends React.Component<Props, State> {
     }
 
     return (
-      <div className="navbar">
+      <div className='navbar'>
         {menuButton}
         {this.state.showMenu ? (
-          <div className="navbar-menu">{this.buttons}</div>
+          <div className='navbar-menu'>{this.buttons}</div>
         ) : null}
       </div>
     )

src/components/Project/index.js

@@ -1,9 +1,9 @@
 // @flow
-import * as React from "react"
+import * as React from 'react'
 
-import ClearButton from "../../components/ClearButton"
+import ClearButton from '../../components/ClearButton'
 
-import "./index.css"
+import './index.css'
 
 type Badge = {
   imgUrl: string,
@@ -21,15 +21,15 @@ type Props = {
 class Project extends React.PureComponent<Props> {
   renderBadges = (badges: Array<Badge>) => {
     return this.props.badges.map((badge, index) => (
-      <a className="project-badge" href={badge.linkUrl} key={index}>
+      <a className='project-badge' href={badge.linkUrl} key={index}>
         <img src={badge.imgUrl} alt={badge.alt} />
       </a>
     ))
   }
 
-  render() {
+  render () {
     return (
-      <div className="project-container">
+      <div className='project-container'>
         <h4>{this.props.title}</h4>
         {this.renderBadges(this.props.badges)}
         <p>{this.props.children}</p>

src/components/SmallText/index.js

@@ -1,15 +1,15 @@
 // @flow
-import React from "react"
+import React from 'react'
 
-import "./index.css"
+import './index.css'
 
 type Props = {
   children: string
 }
 
 class SmallText extends React.PureComponent<Props> {
-  render() {
-    return <div className="small-text">{this.props.children}</div>
+  render () {
+    return <div className='small-text'>{this.props.children}</div>
   }
 }
 

src/index.js

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

src/registerServiceWorker.js

@@ -9,17 +9,17 @@
 // 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}$/
     )
 )
 
-export default function register() {
-  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
+export default function register () {
+  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 " +
-              "worker. To learn more, visit https://goo.gl/SC7cgQ"
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://goo.gl/SC7cgQ'
           )
         })
       } else {
@@ -52,43 +52,43 @@ export default function register() {
   }
 }
 
-function registerValidSW(swUrl) {
+function registerValidSW (swUrl) {
   navigator.serviceWorker
     .register(swUrl)
     .then(registration => {
       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)
     })
 }
 
-function checkValidServiceWorker(swUrl) {
+function checkValidServiceWorker (swUrl) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl) // eslint-disable-line no-undef
     .then(response => {
       // 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) {
+export function unregister () {
+  if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready.then(registration => {
       registration.unregister()
     })

src/routes/index.js

@@ -1,8 +1,8 @@
 // @flow
-import React from "react"
-import { Route, Switch } from "react-router-dom"
+import React from 'react'
+import { Route, Switch } from 'react-router-dom'
 
-import { routes, redirects } from "./routes.js"
+import { routes, redirects } from './routes.js'
 
 type Props = {}
 
@@ -10,7 +10,7 @@ class Routes extends React.Component<Props> {
   routes: Array<Route>
   redirects: Array<Route>
 
-  constructor(props: Props) {
+  constructor (props: Props) {
     super(props)
 
     this.routes = routes.map(route => (
@@ -27,7 +27,7 @@ class Routes extends React.Component<Props> {
     ))
   }
 
-  render() {
+  render () {
     return (
       <Switch>
         {this.routes}

src/routes/routes.js

@@ -1,24 +1,24 @@
 // @flow
-import Home from "../components/Home"
-import Projects from "../containers/Projects"
-import Contact from "../components/Contact"
+import Home from '../screens/Home'
+import Projects from '../screens/Projects'
+import Contact from '../screens/Contact'
 
 const routes = [
   {
-    path: "/",
-    name: "Home",
+    path: '/',
+    name: 'Home',
     component: Home,
     exact: true
   },
   {
-    path: "/projects",
-    name: "Projects",
+    path: '/projects',
+    name: 'Projects',
     component: Projects,
     exact: false
   },
   {
-    path: "/contact",
-    name: "Contact",
+    path: '/contact',
+    name: 'Contact',
     component: Contact,
     exact: false
   }
@@ -26,8 +26,8 @@ const routes = [
 
 const redirects = [
   {
-    path: "/linkedin",
-    func: () => (window.location = "https://linkedin.com/in/mitchelljfsimon")
+    path: '/linkedin',
+    func: () => (window.location = 'https://linkedin.com/in/mitchelljfsimon')
   }
 ]
 

src/screens/Contact/index.js

@@ -0,0 +1,22 @@
+// @flow
+import React from 'react'
+
+import './index.css'
+import linkedIn from '../../images/In-2C-128px-TM.png'
+
+type Props = {}
+
+class Contact extends React.PureComponent<Props> {
+  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,10 +1,10 @@
 // @flow
-import * as React from "react"
+import * as React from 'react'
 
-import "./index.css"
-import JobComponent from "../../components/Job"
+import './index.css'
+import JobComponent from '../../components/Job'
 
-import jobsData from "../../data/jobs.json"
+import jobsData from '../../data/jobs.json'
 
 type Props = {}
 
@@ -28,9 +28,9 @@ class Experience extends React.PureComponent<Props> {
     ))
   }
 
-  render() {
+  render () {
     return (
-      <div className="experience-container">{this.renderJobs(jobsData)}</div>
+      <div className='experience-container'>{this.renderJobs(jobsData)}</div>
     )
   }
 }

src/screens/Home/index.js

@@ -15,11 +15,12 @@ class Home extends React.PureComponent<Props> {
         <p>
           I am a software developer, with most of my experience in web services.
           More specifically, for the past year, I have been focused on Go web
-	  services with cloud-native architectures. Tech that I love working
-	  with includes Go, TypeScript, gRPC, Serverless, Docker, Redis, and
-	  PostgreSQL. Concepts that I am currently focused on are Docker
-	  containerization and orchestration, microservices software architecture
-	  w/ dependency injection, and infrastructure as code using Terraform.
+          services with cloud-native architectures. Tech that I love working
+          with includes Go, TypeScript, gRPC, Serverless, Docker, Redis, and
+          PostgreSQL. Concepts that I am currently focused on are Docker
+          containerization and orchestration, microservices software
+          architecture w/ dependency injection, and infrastructure as code using
+          Terraform.
         </p>
         <p>
           My professional interests, aside from the above, include software

src/screens/Projects/index.js

@@ -1,11 +1,11 @@
 // @flow
-import * as React from "react"
+import * as React from 'react'
 
-import ProjectComponent from "../../components/Project"
+import ProjectComponent from '../../components/Project'
 
-import "./index.css"
+import './index.css'
 
-import projectsData from "../../data/projects.json"
+import projectsData from '../../data/projects.json'
 
 type Props = {}
 
@@ -36,9 +36,9 @@ class Projects extends React.PureComponent<Props> {
     ))
   }
 
-  render() {
+  render () {
     return (
-      <div className="projects-container">
+      <div className='projects-container'>
         {this.renderProjects(projectsData)}
       </div>
     )