mirror of https://github.com/mitchell/mjfs.us.git
Componentized experience and projects containers into job and project;
used them in the aforementioned containers; version bump
This commit is contained in:
mitchelljfs
parent
ab5f6fb062
commit
f38e67281b
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "react-website",
|
||||
"version": "0.2.19",
|
||||
"version": "0.2.20",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome": "^1.1.8",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
.job-container {
|
||||
border-bottom: 2px solid rgb(139, 191, 209);
|
||||
flex: 1 0 90%;
|
||||
font-size: 0.9rem;
|
||||
margin: auto 5%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.job-company {
|
||||
color: rgb(216, 221, 234);
|
||||
}
|
||||
|
||||
.job-title {
|
||||
font-size: 1.2rem;
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
|
||||
.job-container ul {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.job-container {
|
||||
flex: 1 0 100%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
// @flow
|
||||
import * as React from "react"
|
||||
|
||||
import SmallText from "../../components/SmallText"
|
||||
import "./index.css"
|
||||
|
||||
type Props = {
|
||||
title: string,
|
||||
company: string,
|
||||
timeSpan: string,
|
||||
bullets: Array<string>
|
||||
}
|
||||
|
||||
class Experience extends React.PureComponent<Props> {
|
||||
listedBullets: Array<React.Element<string>>
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props)
|
||||
this.listedBullets = this.props.bullets.map((bullet, index) => (
|
||||
<li key={index}>{bullet}</li>
|
||||
))
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="job-container">
|
||||
<div className="job-title">{this.props.title}</div>
|
||||
<div className="job-company">{this.props.company}</div>
|
||||
<SmallText>{this.props.timeSpan}</SmallText>
|
||||
<ul>{this.listedBullets}</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Experience
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
.project-container {
|
||||
border-bottom: 2px solid rgb(139, 191, 209);
|
||||
flex: 1 0 45%;
|
||||
margin: 2.5%;
|
||||
padding-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.project-container h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.project-container p {
|
||||
margin-top: 3%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.project-container {
|
||||
flex: 1 0 95%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
// @flow
|
||||
import React from "react"
|
||||
|
||||
import ClearButton from "../../components/ClearButton"
|
||||
|
||||
import "./index.css"
|
||||
|
||||
type Props = {
|
||||
title: string,
|
||||
children: string,
|
||||
repoUrl: string
|
||||
}
|
||||
|
||||
class Project extends React.PureComponent<Props> {
|
||||
render() {
|
||||
return (
|
||||
<div className="project-container">
|
||||
<h4>{this.props.title}</h4>
|
||||
<p>{this.props.children}</p>
|
||||
<ClearButton href={this.props.repoUrl}>Repository</ClearButton>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Project
|
||||
|
|
@ -3,35 +3,3 @@
|
|||
flex-flow: column nowrap;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
// @flow
|
||||
import React from "react"
|
||||
|
||||
import SmallText from "../../components/SmallText"
|
||||
import "./index.css"
|
||||
import Job from "../../components/Job"
|
||||
|
||||
type Props = {}
|
||||
|
||||
|
|
@ -10,95 +10,56 @@ class Experience extends React.PureComponent<Props> {
|
|||
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>
|
||||
<Job
|
||||
title="Lead Backend Engineer"
|
||||
company="Hypremium."
|
||||
timeSpan="May 2018 - Present"
|
||||
bullets={[
|
||||
"Architect all new backend microservices using Serverless, AWS API Gateway/Lambda/more, and Golang.",
|
||||
"Lead backend development team in an Agile (scrumban) environment.",
|
||||
"Monitor and maintain all stages of hosted microservices."
|
||||
]}
|
||||
/>
|
||||
<Job
|
||||
title="DevOps Engineer"
|
||||
company="Hypremium."
|
||||
timeSpan="January 2018 - May 2018, 5 Months"
|
||||
bullets={[
|
||||
"Maintain & migrate Ruby on Rails API and backend application.",
|
||||
"Oversee and assist with continuous integration for backend development."
|
||||
]}
|
||||
/>
|
||||
<Job
|
||||
title="Sales Associate"
|
||||
company="J. Crew"
|
||||
timeSpan="October 2015 - January 2017, 1 Year 5 Months"
|
||||
bullets={[
|
||||
"Knowing the products and what products best suit the customers' needs.",
|
||||
"Helping the customer with any manner of purchase, exchange, or return."
|
||||
]}
|
||||
/>
|
||||
<Job
|
||||
title="Intern"
|
||||
company="Zumasys"
|
||||
timeSpan="June 2015 - August 2015, 3 Months"
|
||||
bullets={[
|
||||
"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."
|
||||
]}
|
||||
/>
|
||||
<Job
|
||||
title="User Support Technician"
|
||||
company="Point Loma Nazarene University, ITS Department"
|
||||
timeSpan="January 2015 - May 2015, 5 Months"
|
||||
bullets={[
|
||||
"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."
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,25 +2,3 @@
|
|||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// @flow
|
||||
import React from "react"
|
||||
|
||||
import ClearButton from "../../components/ClearButton"
|
||||
import Project from "../../components/Project"
|
||||
|
||||
import "./index.css"
|
||||
|
||||
|
|
@ -11,58 +11,49 @@ class Projects extends React.PureComponent<Props> {
|
|||
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>lambdarouter</h4>
|
||||
<p>
|
||||
This package will become a fully featured AWS Lambda function
|
||||
router, able to respond to HTTP, Schedule, Cognito, and SNS events.
|
||||
It will also support middleware interfacing. So far it includes
|
||||
functionality for API Gateway. Check out the GoDoc Reference to see
|
||||
how to instantiate a router and create endpoints.
|
||||
</p>
|
||||
<ClearButton href="https://github.com/mitchelljfs/lambdarouter">
|
||||
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>sys-mgmt</h4>
|
||||
<p>
|
||||
A minimal, cross-platform, unix-like-system management program. This
|
||||
program is designed to detect which programs are affiliated with the
|
||||
unix-like system, whether it be Debian or macOS. There are various
|
||||
shortcuts to common unix-like commands, such as update and upgrade
|
||||
(for package managers), another is poweroff or reboot.
|
||||
</p>
|
||||
<ClearButton href="https://github.com/mitchelljfs/sys-mgmt">
|
||||
Repository
|
||||
</ClearButton>
|
||||
</div>
|
||||
<Project
|
||||
title="mjfs.us"
|
||||
repoUrl="https://github.com/mitchelljfs/react-website"
|
||||
>
|
||||
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.
|
||||
</Project>
|
||||
|
||||
<Project
|
||||
title="lambdarouter"
|
||||
repoUrl="https://github.com/mitchelljfs/lambdarouter"
|
||||
>
|
||||
This package will become a fully featured AWS Lambda function router,
|
||||
able to respond to HTTP, Schedule, Cognito, and SNS events. It will
|
||||
also support middleware interfacing. So far it includes functionality
|
||||
for API Gateway. Check out the GoDoc Reference to see how to
|
||||
instantiate a router and create endpoints.
|
||||
</Project>
|
||||
|
||||
<Project
|
||||
title="destinate"
|
||||
repoUrl="https://github.com/mitchelljfs/destinate"
|
||||
>
|
||||
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.
|
||||
</Project>
|
||||
|
||||
<Project
|
||||
title="sys-mgmt"
|
||||
repoUrl="https://github.com/mitchelljfs/sys-mgmt"
|
||||
>
|
||||
A minimal, cross-platform, unix-like-system management program. This
|
||||
program is designed to detect which programs are affiliated with the
|
||||
unix-like system, whether it be Debian or macOS. There are various
|
||||
shortcuts to common unix-like commands, such as update and upgrade
|
||||
(for package managers), another is poweroff or reboot.
|
||||
</Project>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue