mitchell
/
mjfs.us
mirror of https://github.com/mitchell/mjfs.us.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
mitchelljfs 2018-07-01 23:06:34 -07:00
parent e800ba76b6
commit 63362a9c8d
25 changed files with 11524 additions and 7789 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierrc.yml Normal file
View File

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

2
README.md
View File

@ -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.

11198
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -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"
}
}

32
src/Website.js
View File

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

10
src/Website.test.js
View File

@ -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)
})

12
src/components/ClearButton/index.js
View File

@ -1,12 +1,14 @@
import React from 'react'
import PropTypes from 'prop-types'
import React from "react"
import PropTypes from "prop-types"
import './index.css'
import "./index.css"
class ClearButton extends React.PureComponent {
render () {
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>
)
}
}

10
src/components/Header/index.js
View File

@ -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 () {
render() {
return (
<div className='header-container'>
<div className="header-container">
<h2>Mitchell J. F. Simon</h2>
<SmallText>Lead Backend Engineer, Hypremium.</SmallText>
</div>

50
src/components/Navbar/index.js
View File

@ -1,26 +1,42 @@
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 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'
import "./index.css"
class Navbar extends React.Component {
render () {
render() {
return (
<ResponsiveMenu
menuOpenButton={<div className='navbar-button'><FontAwesomeIcon icon={faBars} /></div>}
menuCloseButton={<div className='navbar-button navbar-button-close'><FontAwesomeIcon icon={faBars} /></div>}
changeMenuOn='500px'
largeMenuClassName='navbar'
smallMenuClassName='navbar'
menuOpenButton={
<div className="navbar-button">
<FontAwesomeIcon icon={faBars} />
</div>
}
menuCloseButton={
<div className="navbar-button navbar-button-close">
<FontAwesomeIcon icon={faBars} />
</div>
}
changeMenuOn="500px"
largeMenuClassName="navbar"
smallMenuClassName="navbar"
menu={
<div className='navbar-menu'>
<NavLink activeClassName='active-button' exact to='/'><div>Home</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 className="navbar-menu">
<NavLink activeClassName="active-button" exact to="/">
<div>Home</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>
}
/>

12
src/components/SmallText/index.js
View File

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

0
src/screens/Contact/index.css → src/containers/Contact/index.css
View File

19
src/containers/Contact/index.js Normal file
View File

@ -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

0
src/screens/Experience/index.css → src/containers/Experience/index.css
View File

104
src/containers/Experience/index.js Normal file
View File

@ -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

2
src/screens/Home/index.css → src/containers/Home/index.css
View File

@ -16,7 +16,7 @@
margin-right: 3%;
}
@media screen and ( max-width: 500px ) {
@media screen and (max-width: 500px) {
.home-container img {
margin: 5%;
width: 90%;

34
src/containers/Home/index.js Normal file
View File

@ -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

0
src/screens/Projects/index.css → src/containers/Projects/index.css
View File

67
src/containers/Projects/index.js Normal file
View File

@ -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

18
src/index.js
View File

@ -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((
ReactDOM.render(
<BrowserRouter>
<Website />
</BrowserRouter>
), document.getElementById('root')
</BrowserRouter>,
document.getElementById("root")
)
registerServiceWorker()

34
src/registerServiceWorker.js
View File

@ -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()
})

19
src/screens/Contact/index.js
View File

@ -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

65
src/screens/Experience/index.js
View File

@ -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

34
src/screens/Home/index.js
View File

@ -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

60
src/screens/Projects/index.js
View File

@ -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

7526
yarn.lock
View File

File diff suppressed because it is too large Load Diff