Reimplemented navbar design using flex; removed experience route;

refactored some list renderers

src/components/Navbar/index.css

@@ -12,9 +12,11 @@
   border-radius: 2px;
   color: white;
   float: right;
-  margin: 5px;
+  height: auto;
-  padding: 5px 10px;
+  margin: 7px 5px 2px 100%;
+  padding: 5px 10px 5px 10px;
   transition: box-shadow 0.1s;
+  width: auto;
 }
 
 .navbar-button-closed {
@@ -26,22 +28,24 @@
 }
 
 .navbar-menu {
+  display: flex;
+  height: auto;
+  justify-content: space-around;
   margin: auto;
-  min-width: 840px;
+  min-width: 800px;
-  width: 52.5%;
+  width: 51%;
 }
 
 .navbar-menu-button {
   border-radius: 3px;
   color: white;
-  float: left;
+  flex: 1 1 auto;
-  margin: 1% 2.5%;
+  margin: 7px 10px;
   overflow: hidden;
-  padding: 7px 0;
+  padding: 8px;
   text-decoration: none;
   text-overflow: ellipsis;
   transition: background-color 0.2s, box-shadow 0.1s;
-  width: 20%;
 }
 
 .navbar-menu-button:hover {
@@ -65,14 +69,14 @@
   }
 
   .navbar-menu {
-    margin: auto;
+    flex-direction: column;
+    height: auto;
     min-width: 0;
-    width: 75%;
+    width: 80%;
   }
   .navbar-menu-button {
+    height: auto;
     margin: 5px 0;
-    padding: 5px 0;
-    width: 100%;
   }
 
   .navbar-menu-button:hover {

src/components/Project/index.js

@@ -5,20 +5,22 @@ import ClearButton from "../../components/ClearButton"
 
 import "./index.css"
 
+type Badge = {
+  imgUrl: string,
+  linkUrl: string,
+  alt: string
+}
+
 type Props = {
   title: string,
   children: string,
   repoUrl: string,
-  badges: Array<{ imgUrl: string, linkUrl: string, alt: string }>
+  badges: Array<Badge>
 }
 
 class Project extends React.PureComponent<Props> {
-  badges: Array<React.Element<string>>
+  renderBadges = (badges: Array<Badge>) => {
-
+    return this.props.badges.map((badge, index) => (
-  constructor(props: Props) {
-    super(props)
-
-    this.badges = this.props.badges.map((badge, index) => (
       <a className="project-badge" href={badge.linkUrl} key={index}>
         <img src={badge.imgUrl} alt={badge.alt} />
       </a>
@@ -29,7 +31,7 @@ class Project extends React.PureComponent<Props> {
     return (
       <div className="project-container">
         <h4>{this.props.title}</h4>
-        {this.badges}
+        {this.renderBadges(this.props.badges)}
         <p>{this.props.children}</p>
         <ClearButton href={this.props.repoUrl}>Repository</ClearButton>
       </div>

src/containers/Contact/index.css

@@ -10,7 +10,7 @@
   background-color: rgb(216, 221, 233);
   border-radius: 5px;
   color: rgb(46, 51, 64);
-  font-family: "IBM Plex Mono", mono;
+  font-family: "IBM Plex Mono", monospace;
   margin: 10% auto;
   padding: 5px;
   user-select: all;

src/containers/Experience/index.js

@@ -2,25 +2,36 @@
 import * as React from "react"
 
 import "./index.css"
-import Job from "../../components/Job"
+import JobComponent from "../../components/Job"
 
-import jobs from "../../data/jobs.json"
+import jobsData from "../../data/jobs.json"
 
 type Props = {}
 
+type Job = {
+  timeSpan: string,
+  title: string,
+  company: string,
+  bullets: Array<string>
+}
+
 class Experience extends React.PureComponent<Props> {
-  render() {
+  renderJobs = (jobs: Array<Job>) => {
-    let jobComponents = jobs.map(job => (
+    return jobs.map(job => (
-      <Job
+      <JobComponent
-        key={job.timeSpan}
+        key={job.title}
         title={job.title}
         company={job.company}
         timeSpan={job.timeSpan}
         bullets={job.bullets}
       />
     ))
+  }
 
-    return <div className="experience-container">{jobComponents}</div>
+  render() {
+    return (
+      <div className="experience-container">{this.renderJobs(jobsData)}</div>
+    )
   }
 }
 

src/containers/Home/index.js

@@ -14,15 +14,16 @@ class Home extends React.PureComponent<Props> {
         <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
+          Hypremium. Where I lead the architecture of and maintain our
-          serverless, Golang backend. I also offer my skills as a consulting web
+          platform&#39;s backend API. 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
+          backend), software architecture, system administration, cloud
-          engineering, cybersecurity, and business administration. My personal
+          architecture, software engineering, cybersecurity, and business
-          interests include music performance, skiing, and politics.
+          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

src/containers/Projects/index.js

@@ -1,28 +1,47 @@
 // @flow
-import React from "react"
+import * as React from "react"
 
-import Project from "../../components/Project"
+import ProjectComponent from "../../components/Project"
 
 import "./index.css"
 
-import projects from "../../data/projects.json"
+import projectsData from "../../data/projects.json"
 
 type Props = {}
 
+type Badge = {
+  imgUrl: string,
+  linkUrl: string,
+  alt: string
+}
+
+type Project = {
+  title: string,
+  repoUrl: string,
+  badges: Array<Badge>,
+  description: string
+}
+
 class Projects extends React.PureComponent<Props> {
-  render() {
+  renderProjects = (projects: Array<Project>) => {
-    let projectComponents = projects.map(project => (
+    return projects.map(project => (
-      <Project
+      <ProjectComponent
         key={project.title}
         title={project.title}
         repoUrl={project.repoUrl}
         badges={project.badges}
       >
         {project.description}
-      </Project>
+      </ProjectComponent>
     ))
+  }
 
-    return <div className="projects-container">{projectComponents}</div>
+  render() {
+    return (
+      <div className="projects-container">
+        {this.renderProjects(projectsData)}
+      </div>
+    )
   }
 }
 

src/data/projects.json

@@ -17,7 +17,7 @@
       }
     ],
     "description":
-      "My personal site has taken the form of a plain HTML site and a Ruby app, but it currently takes the form of a React.js app. It was developed using Eslint, Prettier and Flow. It is hosted in multiple locations around the world, using AWS S3 and Cloudfront. It is also continously deployed using Travis CI."
+      "This is the source code for this site, which currently utilizes the React.js library. In the past it was built using plain HTML, then Sinatra. It was developed using ESLint, Prettier, Flow, and continously deployed using Travis CI. The site itself is hosted on S3 and distributed to several cache locations around the world using Cloudfront."
   },
 
   {

src/routes/routes.js

@@ -1,7 +1,7 @@
 // @flow
 import Home from "../containers/Home"
 import Projects from "../containers/Projects"
-import Experience from "../containers/Experience"
+// import Experience from "../containers/Experience"
 import Contact from "../containers/Contact"
 
 const routes = [
@@ -17,12 +17,12 @@ const routes = [
     component: Projects,
     exact: false
   },
-  {
+  // {
-    path: "/experience",
+  //   path: "/experience",
-    name: "Experience",
+  //   name: "Experience",
-    component: Experience,
+  //   component: Experience,
-    exact: false
+  //   exact: false
-  },
+  // },
   {
     path: "/contact",
     name: "Contact",