mitchell/mjfs.us
1
0
Fork 0
mirror of https://github.com/mitchell/mjfs.us.git synced 2025-10-31 05:05:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Componentized experience and projects containers into job and project;

Browse source 
used them in the aforementioned containers; version bump
This commit is contained in:
mitchelljfs 2018-07-16 00:08:34 -07:00
parent ab5f6fb062
commit f38e67281b
9 changed files with 210 additions and 198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

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

31
src/components/Job/index.css Normal file
View file

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

36
src/components/Job/index.js Normal file
View file

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

21
src/components/Project/index.css Normal file
View file

@ -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%;
}
}

26
src/components/Project/index.js Normal file
View file

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

32
src/containers/Experience/index.css
View file

@ -3,35 +3,3 @@
flex-flow: column nowrap; flex-flow: column nowrap;
margin: 2% 0; 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;
}
}

141
src/containers/Experience/index.js
View file

@ -1,8 +1,8 @@
// @flow // @flow
import React from "react" import React from "react"
import SmallText from "../../components/SmallText"
import "./index.css" import "./index.css"
import Job from "../../components/Job"
type Props = {} type Props = {}
@ -10,95 +10,56 @@ class Experience extends React.PureComponent<Props> {
render() { render() {
return ( return (
<div className="experience-container"> <div className="experience-container">
<div> <Job
<div className="experience-title">Lead Backend Engineer</div> title="Lead Backend Engineer"
<div className="experience-company">Hypremium.</div> company="Hypremium."
<SmallText className="experience-smalltext"> timeSpan="May 2018 - Present"
May 2018 - Present bullets={[
</SmallText> "Architect all new backend microservices using Serverless, AWS API Gateway/Lambda/more, and Golang.",
<ul> "Lead backend development team in an Agile (scrumban) environment.",
<li> "Monitor and maintain all stages of hosted microservices."
Architect all new backend microservices using Serverless, AWS API ]}
Gateway/Lambda/more, and Golang. />
</li> <Job
<li> title="DevOps Engineer"
Lead backend development team in an Agile (scrumban) environment. company="Hypremium."
</li> timeSpan="January 2018 - May 2018, 5 Months"
<li>Monitor and maintain all stages of hosted microservices.</li> bullets={[
</ul> "Maintain & migrate Ruby on Rails API and backend application.",
</div> "Oversee and assist with continuous integration for backend development."
<div> ]}
<div className="experience-title">DevOps Engineer</div> />
<div className="experience-company">Hypremium.</div> <Job
<SmallText className="experience-smalltext"> title="Sales Associate"
January 2018 - May 2018, 5 Months company="J. Crew"
</SmallText> timeSpan="October 2015 - January 2017, 1 Year 5 Months"
<ul> bullets={[
<li> "Knowing the products and what products best suit the customers' needs.",
Maintain & migrate Ruby on Rails API and backend application. "Helping the customer with any manner of purchase, exchange, or return."
</li> ]}
<li> />
Oversee and assist with continuous integration for backend <Job
development. title="Intern"
</li> company="Zumasys"
</ul> timeSpan="June 2015 - August 2015, 3 Months"
</div> bullets={[
<div> "Main goal was to learn as much about the business and their technology as possible.",
<div className="experience-title">Sales Associate</div> "Management and organization of customer correspondence.",
<div className="experience-company">J. Crew</div> "Auditing of server space.",
<SmallText className="experience-smalltext"> "Dispatching and filtering ticketing system and office computer assistance."
October 2015 - January 2017, 1 Year 5 Months ]}
</SmallText> />
<ul> <Job
<li> title="User Support Technician"
Knowing the products and what products best suit the customers’ company="Point Loma Nazarene University, ITS Department"
needs. timeSpan="January 2015 - May 2015, 5 Months"
</li> bullets={[
<li> "First in contact for email hotline, second in contact for phones.",
Helping the customer with any manner of purchase, exchange, or "Work with customers via email, phone, remote control, and in person.",
return. "Computer diagnosis, repair, and preparation for customer.",
</li> "Special projects."
</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> </div>
) )
} }

22
src/containers/Projects/index.css
View file

@ -2,25 +2,3 @@
display: flex; display: flex;
flex-flow: row wrap; 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%;
}
}

83
src/containers/Projects/index.js
View file

@ -1,7 +1,7 @@
// @flow // @flow
import React from "react" import React from "react"
import ClearButton from "../../components/ClearButton" import Project from "../../components/Project"
import "./index.css" import "./index.css"
@ -11,58 +11,49 @@ class Projects extends React.PureComponent<Props> {
render() { render() {
return ( return (
<div className="projects-container"> <div className="projects-container">
<div> <Project
<h4>mjfs.us</h4> title="mjfs.us"
<p> repoUrl="https://github.com/mitchelljfs/react-website"
>
This website has taken many forms over the years, as my frontend and 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 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. Ruby Sinatra web app. Currently it takes the form of a React.js app. I
I enjoy React.js (and similar frontend frameworks) as they can be enjoy React.js (and similar frontend frameworks) as they can be used
used to make even the simplest projects modular and extensible. to make even the simplest projects modular and extensible.
</p> </Project>
<ClearButton href="https://github.com/mitchelljfs/react-website">
Repository <Project
</ClearButton> title="lambdarouter"
</div> repoUrl="https://github.com/mitchelljfs/lambdarouter"
<div> >
<h4>lambdarouter</h4> This package will become a fully featured AWS Lambda function router,
<p> able to respond to HTTP, Schedule, Cognito, and SNS events. It will
This package will become a fully featured AWS Lambda function also support middleware interfacing. So far it includes functionality
router, able to respond to HTTP, Schedule, Cognito, and SNS events. for API Gateway. Check out the GoDoc Reference to see how to
It will also support middleware interfacing. So far it includes instantiate a router and create endpoints.
functionality for API Gateway. Check out the GoDoc Reference to see </Project>
how to instantiate a router and create endpoints.
</p> <Project
<ClearButton href="https://github.com/mitchelljfs/lambdarouter"> title="destinate"
Repository repoUrl="https://github.com/mitchelljfs/destinate"
</ClearButton> >
</div> destinate is a react-native, iOS (and Android) app. Its main objective
<div> is to suggest places or activities to the user based on their past
<h4>destinate</h4> choices. It utilizes a serverless backend, written in Go and hosted on
<p> AWS API Gateway/Lambda. It is still under development, as a side
destinate is a react-native, iOS (and Android) app. Its main project of Arash Lari and I.
objective is to suggest places or activities to the user based on </Project>
their past choices. It utilizes a serverless backend, written in Go
and hosted on AWS API Gateway/Lambda. It is still under development, <Project
as a side project of Arash Lari and I. title="sys-mgmt"
</p> repoUrl="https://github.com/mitchelljfs/sys-mgmt"
<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 A minimal, cross-platform, unix-like-system management program. This
program is designed to detect which programs are affiliated with the program is designed to detect which programs are affiliated with the
unix-like system, whether it be Debian or macOS. There are various unix-like system, whether it be Debian or macOS. There are various
shortcuts to common unix-like commands, such as update and upgrade shortcuts to common unix-like commands, such as update and upgrade
(for package managers), another is poweroff or reboot. (for package managers), another is poweroff or reboot.
</p> </Project>
<ClearButton href="https://github.com/mitchelljfs/sys-mgmt">
Repository
</ClearButton>
</div>
</div> </div>
) )
} }