Reached an MVP to deploy on S3 and CloudFront; to be further improved upon.

This commit is contained in:
mitchelljfs 2018-05-18 01:54:42 -07:00
parent 7bc8e8b7ca
commit ee77a085f3
12 changed files with 57 additions and 14 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "react-website", "name": "react-website",
"version": "0.1.0", "version": "0.1.9",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@fortawesome/fontawesome": "^1.1.8", "@fortawesome/fontawesome": "^1.1.8",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -6,6 +6,7 @@ import Navbar from './components/Navbar'
import Home from './screens/Home' import Home from './screens/Home'
import Projects from './screens/Projects' import Projects from './screens/Projects'
import Experience from './screens/Experience' import Experience from './screens/Experience'
import Contact from './screens/Contact'
import './Website.css' import './Website.css'
@ -19,7 +20,7 @@ class Website extends React.Component {
<Route exact path='/' component={Home} /> <Route exact path='/' component={Home} />
<Route path='/projects' component={Projects} /> <Route path='/projects' component={Projects} />
<Route path='/experience' component={Experience} /> <Route path='/experience' component={Experience} />
<Route path='/contact' component={null} /> <Route path='/contact' component={Contact} />
</Switch> </Switch>
<Navbar /> <Navbar />
</div> </div>

View File

@ -14,7 +14,11 @@
float: right; float: right;
margin: 5px; margin: 5px;
padding: 5px 10px; padding: 5px 10px;
transition: background-color 0.2s, box-shadow 0.1s; transition: box-shadow 0.1s;
}
.navbar-button-close {
background-color: rgb(206, 135, 111);
} }
.navbar-button:active { .navbar-button:active {
@ -22,8 +26,8 @@
} }
.navbar-menu { .navbar-menu {
margin: 0 20%; margin: 0 18.75%;
width: 60%; width: 62.5%;
} }
.navbar-menu div { .navbar-menu div {
@ -32,7 +36,7 @@
float: left; float: left;
margin: 1% 2.5%; margin: 1% 2.5%;
overflow: hidden; overflow: hidden;
padding: 5px 0; padding: 7px 0;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: background-color 0.2s, box-shadow 0.1s; transition: background-color 0.2s, box-shadow 0.1s;
width: 20%; width: 20%;
@ -59,11 +63,12 @@
} }
.navbar-menu { .navbar-menu {
margin: 10%; margin: auto;
width: 80%; width: 75%;
} }
.navbar-menu div { .navbar-menu div {
margin: 5px 0; margin: 5px 0;
padding: 5px 0;
width: 100%; width: 100%;
} }

View File

@ -11,7 +11,7 @@ class Navbar extends React.Component {
return ( return (
<ResponsiveMenu <ResponsiveMenu
menuOpenButton={<div className='navbar-button'><FontAwesomeIcon icon={faBars} /></div>} menuOpenButton={<div className='navbar-button'><FontAwesomeIcon icon={faBars} /></div>}
menuCloseButton={<div className='navbar-button'><FontAwesomeIcon icon={faBars} /></div>} menuCloseButton={<div className='navbar-button navbar-button-close'><FontAwesomeIcon icon={faBars} /></div>}
changeMenuOn='500px' changeMenuOn='500px'
largeMenuClassName='navbar' largeMenuClassName='navbar'
smallMenuClassName='navbar' smallMenuClassName='navbar'

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 KiB

After

Width:  |  Height:  |  Size: 1.2 MiB

View File

@ -0,0 +1,18 @@
.contact-container {
text-align: center;
}
.contact-container img {
margin-left: 12px;
}
.contact-container p {
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono');
background-color: rgb(216, 221, 233);
border-radius: 5px;
color: rgb(46, 51, 64);
font-family: 'IBM Plex Mono', mono;
margin: 10% auto;
padding: 5px;
width: 150px;
}

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

View File

@ -12,8 +12,8 @@ class Experience extends React.PureComponent {
<div className='experience-company'>Hypremium.</div> <div className='experience-company'>Hypremium.</div>
<SmallText className='experience-smalltext'>May 2018 - Present</SmallText> <SmallText className='experience-smalltext'>May 2018 - Present</SmallText>
<ul> <ul>
<li>Architect all new backend microservices, using Serverless, AWS API Gateway/Lambda, and Golang.</li> <li>Architect all new backend microservices using Serverless, AWS API Gateway/Lambda/more, and Golang.</li>
<li>Lead backend development team.</li> <li>Lead backend development team in an Agile (scrumban) environment.</li>
<li>Monitor and maintain all stages of hosted microservices.</li> <li>Monitor and maintain all stages of hosted microservices.</li>
</ul> </ul>
</div> </div>

View File

@ -11,9 +11,9 @@ class Home extends React.PureComponent {
<p>Hello and welcome,</p> <p>Hello and welcome,</p>
<p> <p>
My name is Mitchell Simon. I am the Lead Backend Engineer at My name is Mitchell Simon. I am the Lead Backend Engineer at
Hypremium, where I architect and maintain our servlerless arcitecture, Hypremium, where I lead the architecture of and maintain our serverless,
Golang backend. I also offer my skills as a consulting/independent Golang backend. I also offer my skills as a consulting/independent
web & software developer. web & cloud developer.
</p> </p>
<p> <p>
My professional interests include web development (with an My professional interests include web development (with an

View File

@ -23,7 +23,7 @@ class Projects extends React.PureComponent {
<div> <div>
<h4>destinate</h4> <h4>destinate</h4>
<p> <p>
Destinate is a react-native, iOS (and Android) app. Its main objective 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 is to suggest places or activities to the user based on their past
choices. It utilizes a serverless backend, written in Go and hosted choices. It utilizes a serverless backend, written in Go and hosted
on AWS API Gateway/Lambda. It is still under development, as a side on AWS API Gateway/Lambda. It is still under development, as a side