diff --git a/src/components/Navbar/index.css b/src/components/Navbar/index.css index fe877b9..9846f78 100644 --- a/src/components/Navbar/index.css +++ b/src/components/Navbar/index.css @@ -12,9 +12,11 @@ border-radius: 2px; color: white; float: right; - margin: 5px; - padding: 5px 10px; + height: auto; + 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; - width: 52.5%; + min-width: 800px; + width: 51%; } .navbar-menu-button { border-radius: 3px; color: white; - float: left; - margin: 1% 2.5%; + flex: 1 1 auto; + 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 { diff --git a/src/components/Project/index.js b/src/components/Project/index.js index 33c5249..3422d4b 100644 --- a/src/components/Project/index.js +++ b/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 } class Project extends React.PureComponent { - badges: Array> - - constructor(props: Props) { - super(props) - - this.badges = this.props.badges.map((badge, index) => ( + renderBadges = (badges: Array) => { + return this.props.badges.map((badge, index) => ( {badge.alt} @@ -29,7 +31,7 @@ class Project extends React.PureComponent { return (

{this.props.title}

- {this.badges} + {this.renderBadges(this.props.badges)}

{this.props.children}

Repository
diff --git a/src/containers/Contact/index.css b/src/containers/Contact/index.css index 02d1531..053e323 100644 --- a/src/containers/Contact/index.css +++ b/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; diff --git a/src/containers/Experience/index.js b/src/containers/Experience/index.js index 9248c08..badb454 100644 --- a/src/containers/Experience/index.js +++ b/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 +} + class Experience extends React.PureComponent { - render() { - let jobComponents = jobs.map(job => ( - ) => { + return jobs.map(job => ( + )) + } - return
{jobComponents}
+ render() { + return ( +
{this.renderJobs(jobsData)}
+ ) } } diff --git a/src/containers/Home/index.js b/src/containers/Home/index.js index dd997e5..b8fe5a9 100644 --- a/src/containers/Home/index.js +++ b/src/containers/Home/index.js @@ -14,15 +14,16 @@ class Home extends React.PureComponent {

Hello and welcome,

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 + Hypremium. Where I lead the architecture of and maintain our + platform's backend API. I also offer my skills as a consulting web & cloud developer.

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. + backend), software architecture, system administration, cloud + architecture, software engineering, cybersecurity, and business + administration. My personal interests include music performance, + skiing, and politics.

Thank you for reading my quick bio. If you would like to contact me diff --git a/src/containers/Projects/index.js b/src/containers/Projects/index.js index d4f1b28..37982bb 100644 --- a/src/containers/Projects/index.js +++ b/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, + description: string +} + class Projects extends React.PureComponent { - render() { - let projectComponents = projects.map(project => ( - ) => { + return projects.map(project => ( + {project.description} - + )) + } - return

{projectComponents}
+ render() { + return ( +
+ {this.renderProjects(projectsData)} +
+ ) } } diff --git a/src/data/projects.json b/src/data/projects.json index f14fe3d..90e0071 100644 --- a/src/data/projects.json +++ b/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." }, { diff --git a/src/routes/routes.js b/src/routes/routes.js index 559b5dd..cb5010d 100644 --- a/src/routes/routes.js +++ b/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", - name: "Experience", - component: Experience, - exact: false - }, + // { + // path: "/experience", + // name: "Experience", + // component: Experience, + // exact: false + // }, { path: "/contact", name: "Contact",