From 7bc8e8b7ca0e7436811a247217719dd22b3785d1 Mon Sep 17 00:00:00 2001 From: mitchelljfs Date: Tue, 15 May 2018 17:12:23 -0700 Subject: [PATCH] Redesign and content changes. Added Experience screen. --- package.json | 3 ++ public/manifest.json | 2 +- src/Website.css | 6 ++- src/Website.js | 3 +- src/components/ClearButton/index.css | 2 +- src/components/Header/index.css | 6 ++- src/components/Header/index.js | 2 +- src/components/Navbar/index.css | 62 +++++++++++++++----------- src/components/Navbar/index.js | 6 ++- src/components/SmallText/index.css | 2 +- src/components/SmallText/index.js | 2 +- src/index.css | 3 +- src/screens/Experience/index.css | 37 ++++++++++++++++ src/screens/Experience/index.js | 65 ++++++++++++++++++++++++++++ src/screens/Home/index.css | 4 +- src/screens/Home/index.js | 13 +++--- src/screens/Projects/index.css | 11 +++++ src/screens/Projects/index.js | 15 ++++--- yarn.lock | 29 ++++++++++++- 19 files changed, 220 insertions(+), 53 deletions(-) create mode 100644 src/screens/Experience/index.css create mode 100644 src/screens/Experience/index.js diff --git a/package.json b/package.json index 1b48f00..d2ab307 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome": "^1.1.8", + "@fortawesome/fontawesome-free-solid": "^5.0.13", + "@fortawesome/react-fontawesome": "^0.0.19", "prop-types": "^15.6.1", "react": "^16.3.2", "react-dom": "^16.3.2", diff --git a/public/manifest.json b/public/manifest.json index 1e7bdd0..b692fb9 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,5 +1,5 @@ { - "short_name": "mitchell-website", + "short_name": "Mitchell's Website", "name": "Mitchell J. F. Simon's Website", "icons": [ { diff --git a/src/Website.css b/src/Website.css index 4733e19..8718818 100644 --- a/src/Website.css +++ b/src/Website.css @@ -7,14 +7,16 @@ .main-container { margin: auto; - margin-bottom: 50px; - max-width: 700px; + margin-top: 50px; + max-width: 500px; min-width: 60%; text-align: center; } @media screen and ( max-width: 500px ) { .main-container { + margin-bottom: 50px; + margin-top: auto; width: 100%; } } diff --git a/src/Website.js b/src/Website.js index 8e81371..8496ead 100644 --- a/src/Website.js +++ b/src/Website.js @@ -5,6 +5,7 @@ import Header from './components/Header' import Navbar from './components/Navbar' import Home from './screens/Home' import Projects from './screens/Projects' +import Experience from './screens/Experience' import './Website.css' @@ -17,7 +18,7 @@ class Website extends React.Component { - + diff --git a/src/components/ClearButton/index.css b/src/components/ClearButton/index.css index a8931f2..7cc2cb0 100644 --- a/src/components/ClearButton/index.css +++ b/src/components/ClearButton/index.css @@ -3,7 +3,7 @@ border-radius: 2px; color: white; margin: 5px; - padding: 5px; + padding: 8px 10px; text-decoration: none; transition: background-color 0.2s, box-shadow 0.1s; } diff --git a/src/components/Header/index.css b/src/components/Header/index.css index 5d3ccd4..cd3296e 100644 --- a/src/components/Header/index.css +++ b/src/components/Header/index.css @@ -1,5 +1,5 @@ .header-container { - border-bottom: 2px solid rgb(22, 26, 40); + border-bottom: 2px solid rgb(130, 160, 196); margin: auto; margin-bottom: -5px; width: 65%; @@ -7,3 +7,7 @@ .header-container h2 { margin-bottom: -5px; } + +.header-container div { + margin: 2%; +} diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 0d7eae4..cbc28c6 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -9,7 +9,7 @@ class Header extends React.PureComponent { return (

Mitchell J. F. Simon

- DevOps & Software Engineer, Hypremium. + Lead Backend Engineer, Hypremium.
) } diff --git a/src/components/Navbar/index.css b/src/components/Navbar/index.css index f056f7e..7b2246f 100644 --- a/src/components/Navbar/index.css +++ b/src/components/Navbar/index.css @@ -1,26 +1,22 @@ .navbar { - background-color: rgb(59, 65, 82); - bottom: 0; + background-color: rgb(59, 65, 83); box-shadow: -1px -1px 1px rgb(42, 46, 60); left: 0; position: fixed; right: 0; + top: 0; } .navbar-button { - background-color: rgb(126, 161, 187); + background-color: rgb(139, 191, 209); border-radius: 2px; color: white; float: right; margin: 5px; - padding: 2px 5px; + padding: 5px 10px; transition: background-color 0.2s, box-shadow 0.1s; } -.navbar-button:hover { - background-color: rgb(176, 211, 237); -} - .navbar-button:active { box-shadow: 0 0 5px black inset; } @@ -34,26 +30,12 @@ border-radius: 3px; color: white; float: left; - margin: 1% 1%; + margin: 1% 2.5%; overflow: hidden; padding: 5px 0; text-overflow: ellipsis; transition: background-color 0.2s, box-shadow 0.1s; - width: 23%; -} - -@media screen and ( max-width: 500px ) { - .navbar { - padding-bottom: 5px; - } - .navbar-menu { - margin: 5%; - width: 90%; - } - .navbar-menu div { - margin: 5px 0; - width: 100%; - } + width: 20%; } .navbar-menu div:hover { @@ -61,5 +43,35 @@ } .active-button div { - box-shadow: 0 0 5px rgb(22, 26, 40) inset; + background-color: rgb(130, 160, 196); + box-shadow: 0 0 5px rgb(59, 64, 83) inset; +} + +.active-button div:hover { + background-color: rgb(139, 191, 209); +} + +@media screen and ( max-width: 500px ) { + .navbar { + bottom: 0; + padding-bottom: 5px; + top: auto; + } + + .navbar-menu { + margin: 10%; + width: 80%; + } + .navbar-menu div { + margin: 5px 0; + width: 100%; + } + + .navbar-menu div:hover { + background-color: inherit; + } + + .active-button div:hover { + background-color: rgb(130, 160, 196); + } } diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index 1f8a2dc..82950c5 100644 --- a/src/components/Navbar/index.js +++ b/src/components/Navbar/index.js @@ -1,6 +1,8 @@ import React from 'react' import ResponsiveMenu from 'react-responsive-navbar' import { NavLink } from 'react-router-dom' +import FontAwesomeIcon from '@fortawesome/react-fontawesome' +import faBars from '@fortawesome/fontawesome-free-solid/faBars' import './index.css' @@ -8,8 +10,8 @@ class Navbar extends React.Component { render () { return ( Menu} - menuCloseButton={
Close
} + menuOpenButton={
} + menuCloseButton={
} changeMenuOn='500px' largeMenuClassName='navbar' smallMenuClassName='navbar' diff --git a/src/components/SmallText/index.css b/src/components/SmallText/index.css index 0154bb3..7b89647 100644 --- a/src/components/SmallText/index.css +++ b/src/components/SmallText/index.css @@ -1,5 +1,5 @@ .small-text { - color: lightgrey; + color: rgb(216, 221, 234); font-size: 0.8rem; font-style: italic; } diff --git a/src/components/SmallText/index.js b/src/components/SmallText/index.js index a84bf43..dcce96a 100644 --- a/src/components/SmallText/index.js +++ b/src/components/SmallText/index.js @@ -6,7 +6,7 @@ import './index.css' class SmallText extends React.PureComponent { render () { return ( -

{this.props.children}

+
{this.props.children}
) } } diff --git a/src/index.css b/src/index.css index dacd199..492b1f7 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,6 @@ body { - background-color: rgb(46, 51, 64); + background-color: rgb(46, 51, 65); + color: rgb(254, 255, 254); font-family: 'Gothic A1', sans-serif; font-size: 100%; } diff --git a/src/screens/Experience/index.css b/src/screens/Experience/index.css new file mode 100644 index 0000000..cce6efc --- /dev/null +++ b/src/screens/Experience/index.css @@ -0,0 +1,37 @@ +.experience-container { + display: flex; + flex-flow: row wrap; + margin: 2% 0; +} + +.experience-container > div { + border-bottom: 2px solid rgb(139, 191, 209); + flex: 1 0 90%; + font-size: 0.9rem; + margin: auto 5%; + text-align: left; +} + +.experience-company { + color: rgb(216, 221, 234); +} + +.experience-title { + font-size: 1.2rem; + margin-top: 2%; +} + +.small-text { + margin-bottom: 1%; +} + +.experience-container ul { + margin-top: 0; +} + +@media screen and ( max-width: 500px ) { + .experience-container>div { + flex: 1 0 100%; + margin: auto; + } +} diff --git a/src/screens/Experience/index.js b/src/screens/Experience/index.js new file mode 100644 index 0000000..cb832d4 --- /dev/null +++ b/src/screens/Experience/index.js @@ -0,0 +1,65 @@ +import React from 'react' + +import SmallText from '../../components/SmallText' +import './index.css' + +class Experience extends React.PureComponent { + render () { + return ( +
+
+
Lead Backend Engineer
+
Hypremium.
+ May 2018 - Present +
    +
  • Architect all new backend microservices, using Serverless, AWS API Gateway/Lambda, and Golang.
    • +
  • Lead backend development team.
    • +
  • Monitor and maintain all stages of hosted microservices.
    • +
+
+
+
DevOps Engineer
+
Hypremium.
+ January 2018 - May 2018, 5 Months +
    +
  • Maintain & migrate Ruby on Rails API and backend application.
    • +
  • Oversee and assist with continuous integration for backend development.
    • +
+
+
+
Sales Associate
+
J. Crew
+ October 2015 - January 2017, 1 Year 5 Months +
    +
  • Knowing the products and what products best suit the customers’ needs.
    • +
  • Helping the customer with any manner of purchase, exchange, or return.
    • +
+
+
+
Intern
+
Zumasys
+ June 2015 - August 2015, 3 Months +
    +
  • Main goal was to learn as much about the business and their technology as possible
    • +
  • Management and organization of customer correspondence.
    • +
  • Auditing of server space.
    • +
  • Dispatching and filtering ticketing system and office computer assistance.
    • +
+
+
+
User Support Technician
+
Point Loma Nazarene University, ITS Deptarment
+ Jan 2015 - May 2015, 5 Months +
    +
  • First in contact for email hotline, second in contact for phones.
    • +
  • Work with customers via email, phone, remote control, and in person.
    • +
  • Computer diagnosis, repair, and preparation for customer.
    • +
  • Special projects.
    • +
+
+
+ ) + } +} + +export default Experience diff --git a/src/screens/Home/index.css b/src/screens/Home/index.css index 17c40a7..76de8a1 100644 --- a/src/screens/Home/index.css +++ b/src/screens/Home/index.css @@ -7,13 +7,13 @@ display: block; float: left; margin-right: 1%; - width: 39%; + width: 37%; } .signature { float: right; font-style: italic; - margin-right: 10%; + margin-right: 3%; } @media screen and ( max-width: 500px ) { diff --git a/src/screens/Home/index.js b/src/screens/Home/index.js index f342346..5b9ae12 100644 --- a/src/screens/Home/index.js +++ b/src/screens/Home/index.js @@ -10,21 +10,22 @@ class Home extends React.PureComponent { Profile

Hello and welcome,

- My name is Mitchell Simon. I am a DevOps & Software Engineer at - Hypremium, Computer Science major at Loyola Marymount University, and - I offer my skills as a consulting web & software developer. + My name is Mitchell Simon. I am the Lead Backend Engineer at + Hypremium, where I architect and maintain our servlerless arcitecture, + Golang backend. I also offer my skills as a consulting/independent + web & software developer.

- My professional interests include full-stack web development (with an + 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.

Thank you for reading my quick bio. If you would like to contact me - visit the contact page for all of the options. + visit the contact page for all of your options.

-

-- Mitchell J. F. Simon, III

+

- Mitchell J. F. Simon, III

) } diff --git a/src/screens/Projects/index.css b/src/screens/Projects/index.css index 99232a5..5870c08 100644 --- a/src/screens/Projects/index.css +++ b/src/screens/Projects/index.css @@ -4,11 +4,22 @@ } .projects-container div { + border-bottom: 2px solid rgb(139, 191, 209); flex: 1 0 45%; margin: 2.5%; + padding-bottom: 20px; text-align: center; } +.projects-container h4 { + margin-bottom: 0; +} + +.projects-container p { + margin-top: 3%; +} + + @media screen and ( max-width: 500px ) { .projects-container div { flex: 1 0 95%; diff --git a/src/screens/Projects/index.js b/src/screens/Projects/index.js index 28a39f6..4895d50 100644 --- a/src/screens/Projects/index.js +++ b/src/screens/Projects/index.js @@ -14,19 +14,20 @@ class Projects extends React.PureComponent { 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 other similar frontend frameworks) - can be used to make even the simplest projects modular and extensible. + 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.

Repository

destinate

- Destinate is react-native, iOS and Android app. Its main objective - is to suggest places or activities to the user based on there past - choices. It utilizes a Serverless Framework backend, written in Go - and hosted on AWS. It is still under-development, as a side-project - of Arash Lari and I. + 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.

Repository
diff --git a/yarn.lock b/yarn.lock index 058931d..2dee56e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,29 @@ # yarn lockfile v1 +"@fortawesome/fontawesome-common-types@^0.1.7": + version "0.1.7" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz#4336c4b06d0b5608ff1215464b66fcf9f4795284" + +"@fortawesome/fontawesome-free-solid@^5.0.13": + version "5.0.13" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.13.tgz#24b61aaf471a9d34a5364b052d64a516285ba894" + dependencies: + "@fortawesome/fontawesome-common-types" "^0.1.7" + +"@fortawesome/fontawesome@^1.1.8": + version "1.1.8" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz#75fe66a60f95508160bb16bd781ad7d89b280f5b" + dependencies: + "@fortawesome/fontawesome-common-types" "^0.1.7" + +"@fortawesome/react-fontawesome@^0.0.19": + version "0.0.19" + resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.0.19.tgz#9c90c1aac0984687fffbea44aa4ad817c6f4356e" + dependencies: + humps "^2.0.1" + prop-types "^15.5.7" + abab@^1.0.3: version "1.0.4" resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e" @@ -3437,6 +3460,10 @@ https-browserify@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73" +humps@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa" + iconv-lite@0.4.19: version "0.4.19" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b" @@ -5615,7 +5642,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1: +prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.1: version "15.6.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca" dependencies: