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

Content tweaks. Componentized SmallText. Standardized naming conventions.

This commit is contained in:
mitchelljfs 2018-05-06 21:57:08 -07:00
parent cbed194146
commit 1ad6fdd7a8
21 changed files with 157 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
package-lock.json generated
View File

@ -3066,7 +3066,7 @@
"requires": { "requires": {
"ajv": "5.5.2", "ajv": "5.5.2",
"babel-code-frame": "6.26.0", "babel-code-frame": "6.26.0",
"chalk": "2.4.0", "chalk": "2.4.1",
"concat-stream": "1.6.2", "concat-stream": "1.6.2",
"cross-spawn": "5.1.0", "cross-spawn": "5.1.0",
"debug": "3.1.0", "debug": "3.1.0",
@ -3079,7 +3079,7 @@
"file-entry-cache": "2.0.0", "file-entry-cache": "2.0.0",
"functional-red-black-tree": "1.0.1", "functional-red-black-tree": "1.0.1",
"glob": "7.1.2", "glob": "7.1.2",
"globals": "11.4.0", "globals": "11.5.0",
"ignore": "3.3.7", "ignore": "3.3.7",
"imurmurhash": "0.1.4", "imurmurhash": "0.1.4",
"inquirer": "3.3.0", "inquirer": "3.3.0",
@ -3110,9 +3110,9 @@
"dev": true "dev": true
}, },
"chalk": { "chalk": {
"version": "2.4.0", "version": "2.4.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.0.tgz", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
"integrity": "sha512-Wr/w0f4o9LuE7K53cD0qmbAMM+2XNLzR29vFn5hqko4sxGlUsyy363NvmyGIyk5tpe9cjTr9SJYbysEyPkRnFw==", "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"ansi-styles": "3.2.1", "ansi-styles": "3.2.1",
@ -3136,9 +3136,9 @@
"dev": true "dev": true
}, },
"globals": { "globals": {
"version": "11.4.0", "version": "11.5.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-11.4.0.tgz", "resolved": "https://registry.npmjs.org/globals/-/globals-11.5.0.tgz",
"integrity": "sha512-Dyzmifil8n/TmSqYDEXbm+C8yitzJQqQIlJQLNRMwa+BOUJpRC19pyVeN12JAjt61xonvXjtff+hJruTRXn5HA==", "integrity": "sha512-hYyf+kI8dm3nORsiiXUQigOU62hDLfJ9G01uyGMxhc6BKsircrUhC4uJPQPUSuq2GrTmiiEt7ewxlMdBewfmKQ==",
"dev": true "dev": true
}, },
"js-yaml": { "js-yaml": {

1
public/index.html
View File

@ -19,6 +19,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<link href="https://fonts.googleapis.com/css?family=Gothic+A1" rel="stylesheet">
<title>Mitchell J. F. Simon</title> <title>Mitchell J. F. Simon</title>
</head> </head>
<body> <body>

6
src/Website.css
View File

@ -1,11 +1,11 @@
.Website { .website {
color: white; color: white;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: center; justify-content: center;
} }
.MainContainer { .main-container {
margin: auto; margin: auto;
margin-bottom: 50px; margin-bottom: 50px;
max-width: 700px; max-width: 700px;
@ -14,7 +14,7 @@
} }
@media screen and ( max-width: 500px ) { @media screen and ( max-width: 500px ) {
.MainContainer { .main-container {
width: 100%; width: 100%;
} }
} }

12
src/Website.js
View File

@ -1,18 +1,18 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { Route, Switch } from 'react-router-dom' import { Route, Switch } from 'react-router-dom'
import Header from './components/Header/Header.js' import Header from './components/Header'
import Navbar from './components/Navbar/Navbar.js' import Navbar from './components/Navbar'
import Home from './screens/Home/Home.js' import Home from './screens/Home'
import Projects from './screens/Projects/Projects.js' import Projects from './screens/Projects'
import './Website.css' import './Website.css'
class Website extends Component { class Website extends Component {
render () { render () {
return ( return (
<div className='Website'> <div className='website'>
<div className='MainContainer'> <div className='main-container'>
<Header /> <Header />
<Switch> <Switch>
<Route exact path='/' component={Home} /> <Route exact path='/' component={Home} />

17
src/components/ClearButton/ClearButton.css
View File

@ -1,17 +0,0 @@
.clearButton, .clearButton:link, .clearButton:visited {
border: 2px solid rgb(59, 65, 82);
border-radius: 2px;
padding: 5px;
margin: 5px;
color: white;
margin: auto;
text-decoration: none;
}
.clearButton:hover {
background-color: rgb(59, 65, 82);
}
.clearButton:active {
box-shadow: 0 0 2px black inset;
}

17
src/components/ClearButton/index.css Normal file
View File

@ -0,0 +1,17 @@
.clear-button, .clear-button:link, .clear-button:visited {
border: 2px solid rgb(59, 65, 82);
border-radius: 2px;
color: white;
margin: 5px;
padding: 5px;
text-decoration: none;
transition: background-color 0.2s, box-shadow 0.1s;
}
.clear-button:hover {
background-color: rgb(59, 65, 82);
}
.clear-button:active {
box-shadow: 0 0 5px rgb(46, 51, 64) inset;
}

4
src/components/ClearButton/ClearButton.js → src/components/ClearButton/index.js
View File

@ -1,11 +1,11 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import './ClearButton.css' import './index.css'
class ClearButton extends PureComponent { class ClearButton extends PureComponent {
render () { render () {
return ( return (
<a className='clearButton' href={this.props.href}>{this.props.children}</a> <a className='clear-button' href={this.props.href}>{this.props.children}</a>
) )
} }
} }

11
src/components/Header/Header.css → src/components/Header/index.css
View File

@ -1,14 +1,9 @@
.HeaderContainer { .header-container {
border-bottom: 2px solid rgb(22, 26, 40); border-bottom: 2px solid rgb(22, 26, 40);
width: 65%;
margin: auto; margin: auto;
margin-bottom: -5px; margin-bottom: -5px;
width: 65%;
} }
.HeaderContainer h2 { .header-container h2 {
margin-bottom: -5px; margin-bottom: -5px;
} }
.HeaderContainer p {
font-style: italic;
font-size: 0.8em;
}

8
src/components/Header/Header.js → src/components/Header/index.js
View File

@ -1,13 +1,15 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import './Header.css' import SmallText from '../SmallText'
import './index.css'
class Header extends PureComponent { class Header extends PureComponent {
render () { render () {
return ( return (
<div className='HeaderContainer'> <div className='header-container'>
<h2>Mitchell J. F. Simon</h2> <h2>Mitchell J. F. Simon</h2>
<p>Cloud Architect, Hypremium.</p> <SmallText>DevOps & Software Engineer, Hypremium.</SmallText>
</div> </div>
) )
} }

29
src/components/Navbar/Navbar.js
View File

@ -1,29 +0,0 @@
import React, { Component } from 'react'
import ResponsiveMenu from 'react-responsive-navbar'
import { NavLink } from 'react-router-dom'
import './Navbar.css'
class Navbar extends Component {
render () {
return (
<ResponsiveMenu
menuOpenButton={<div className='Navbar-Button'>Menu</div>}
menuCloseButton={<div className='Navbar-Button'>Close</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>
}
/>
)
}
}
export default Navbar

35
src/components/Navbar/Navbar.css → src/components/Navbar/index.css
View File

@ -1,4 +1,4 @@
.Navbar { .navbar {
background-color: rgb(59, 65, 82); background-color: rgb(59, 65, 82);
bottom: 0; bottom: 0;
box-shadow: -1px -1px 1px rgb(42, 46, 60); box-shadow: -1px -1px 1px rgb(42, 46, 60);
@ -7,58 +7,59 @@
right: 0; right: 0;
} }
.Navbar-Button { .navbar-button {
background-color: rgb(126, 161, 187); background-color: rgb(126, 161, 187);
border-radius: 2px; border-radius: 2px;
color: white; color: white;
float: right; float: right;
margin: 5px; margin: 5px;
padding: 5px; padding: 2px 5px;
transition: background-color 0.2s, box-shadow 0.1s;
} }
.Navbar-Button:hover { .navbar-button:hover {
background-color: rgb(176, 211, 237); background-color: rgb(176, 211, 237);
} }
.Navbar-Button:active { .navbar-button:active {
box-shadow: 0 0 2px black inset; box-shadow: 0 0 5px black inset;
} }
.Navbar-Menu { .navbar-menu {
margin: 0 20%; margin: 0 20%;
width: 60%; width: 60%;
} }
.Navbar-Menu div { .navbar-menu div {
background-color: grey; border-radius: 3px;
border-radius: 2px;
color: white; color: white;
float: left; float: left;
margin: 1% 1%; margin: 1% 1%;
overflow: hidden; overflow: hidden;
padding: 5px 0; padding: 5px 0;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: background-color 0.2s, box-shadow 0.1s;
width: 23%; width: 23%;
} }
@media screen and ( max-width: 500px ) { @media screen and ( max-width: 500px ) {
.Navbar { .navbar {
padding-bottom: 5px; padding-bottom: 5px;
} }
.Navbar-Menu { .navbar-menu {
margin: 5%; margin: 5%;
width: 90%; width: 90%;
} }
.Navbar-Menu div { .navbar-menu div {
margin: 5px 0; margin: 5px 0;
width: 100%; width: 100%;
} }
} }
.Navbar-Menu div:hover { .navbar-menu div:hover {
background-color: rgb(191, 191, 191); background-color: rgb(86, 95, 118);
} }
.Active-Button div { .active-button div {
box-shadow: 0 0 2px black inset; box-shadow: 0 0 5px rgb(22, 26, 40) inset;
} }

29
src/components/Navbar/index.js Normal file
View File

@ -0,0 +1,29 @@
import React, { Component } from 'react'
import ResponsiveMenu from 'react-responsive-navbar'
import { NavLink } from 'react-router-dom'
import './index.css'
class Navbar extends Component {
render () {
return (
<ResponsiveMenu
menuOpenButton={<div className='navbar-button'>Menu</div>}
menuCloseButton={<div className='navbar-button'>Close</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>
}
/>
)
}
}
export default Navbar

5
src/components/SmallText/index.css Normal file
View File

@ -0,0 +1,5 @@
.small-text {
color: lightgrey;
font-size: 0.8rem;
font-style: italic;
}

13
src/components/SmallText/index.js Normal file
View File

@ -0,0 +1,13 @@
import React, { PureComponent } from 'react'
import './index.css'
class SmallText extends PureComponent {
render () {
return (
<p className='small-text'>DevOps & Software Engineer, Hypremium.</p>
)
}
}
export default SmallText

3
src/index.css
View File

@ -1,6 +1,5 @@
body { body {
@import url('https://fonts.googleapis.com/css?family=Roboto');
background-color: rgb(46, 51, 64); background-color: rgb(46, 51, 64);
font-family: 'Roboto', sans-serif; font-family: 'Gothic A1', sans-serif;
font-size: 100%; font-size: 100%;
} }

2
src/index.js
View File

@ -10,6 +10,6 @@ ReactDOM.render((
<BrowserRouter> <BrowserRouter>
<Website /> <Website />
</BrowserRouter> </BrowserRouter>
), document.getElementById('root') ), document.getElementById('root')
) )
registerServiceWorker() registerServiceWorker()

6
src/screens/Home/Home.css → src/screens/Home/index.css
View File

@ -1,8 +1,8 @@
.HomeContainer p { .home-container p {
text-align: left; text-align: left;
} }
.HomeContainer img { .home-container img {
border-radius: 3px; border-radius: 3px;
display: block; display: block;
float: left; float: left;
@ -17,7 +17,7 @@
} }
@media screen and ( max-width: 500px ) { @media screen and ( max-width: 500px ) {
.HomeContainer img { .home-container img {
margin: 5%; margin: 5%;
width: 90%; width: 90%;
} }

13
src/screens/Home/Home.js → src/screens/Home/index.js
View File

@ -1,22 +1,21 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import './Home.css' import './index.css'
import profile from '../../images/profile.jpg' import profile from '../../images/profile.jpg'
class Home extends PureComponent { class Home extends PureComponent {
render () { render () {
return ( return (
<div className='HomeContainer'> <div className='home-container'>
<img src={profile} alt='Profile' /> <img src={profile} alt='Profile' />
<p>Hello and welcome,</p> <p>Hello and welcome,</p>
<p> <p>
My name is Mitchell Simon. I am a Computer Science major at Loyola My name is Mitchell Simon. I am a DevOps & Software Engineer at
Marymount University, Backend Software Developer at Hypremium, and I Hypremium, Computer Science major at Loyola Marymount University, and
offer my skills as a freelance web developer, and freelance I offer my skills as a consulting web & software developer.
software/application developer.
</p> </p>
<p> <p>
My academic interests include full stack web development (with an My professional interests include full-stack web development (with an
emphasis on backend), system administration, network architecture, emphasis on backend), system administration, network architecture,
software engineering, cybersecurity, and business administration. My software engineering, cybersecurity, and business administration. My
personal interests include music performance, skiing, and politics. personal interests include music performance, skiing, and politics.

17
src/screens/Projects/Projects.css
View File

@ -1,17 +0,0 @@
.ProjectsContainer {
display: flex;
flex-flow: row wrap;
}
.ProjectsContainer div {
flex: 1 0 100%;
margin: auto;
max-width: 45%;
text-align: center;
}
@media screen and ( max-width: 500px ) {
.ProjectsContainer div {
max-width: 95%;
}
}

16
src/screens/Projects/index.css Normal file
View File

@ -0,0 +1,16 @@
.projects-container {
display: flex;
flex-flow: row wrap;
}
.projects-container div {
flex: 1 0 45%;
margin: 2.5%;
text-align: center;
}
@media screen and ( max-width: 500px ) {
.projects-container div {
flex: 1 0 95%;
}
}

34
src/screens/Projects/Projects.js → src/screens/Projects/index.js
View File

@ -1,26 +1,35 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import ClearButton from '../../components/ClearButton/ClearButton.js' import ClearButton from '../../components/ClearButton'
import './Projects.css' import './index.css'
class Projects extends PureComponent { class Projects extends PureComponent {
render () { render () {
return ( return (
<div className='ProjectsContainer'> <div className='projects-container'>
<div> <div>
<h4>www.mitchelljfsimon.com</h4> <h4>www.mitchelljfsimon.com</h4>
<p> <p>
This website has taken many forms over the years, as my frontend This website has taken many forms over the years, as my frontend
and design skills increase. It started as a simple static site and design skills increase. It has been simple HTML, CSS, and JS,
using HTML, CSS, and a little bit of Javascript. Then it became and a Ruby Sinatra web app. Currently it takes the form of a
simple web app using Ruby and the Sinatra framework. Currently it React.js app. I enjoy React.js (and other similar frontend frameworks)
takes the form of a React.js app. This may be considered over-kill, can be used to make even the simplest projects modular and extensible.
but I believe React.js (and other similar frontend frameworks) can
be used to make even the simplest projects modular and extensible.
</p> </p>
<ClearButton href='https://github.com/mitchelljfs/react-website'>Repository</ClearButton> <ClearButton href='https://github.com/mitchelljfs/react-website'>Repository</ClearButton>
</div> </div>
<div>
<h4>destinate</h4>
<p>
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.
</p>
<ClearButton href='https://github.com/mitchelljfs/destinate'>Repository</ClearButton>
</div>
<div> <div>
<h4>memebank API</h4> <h4>memebank API</h4>
<p> <p>
@ -36,12 +45,9 @@ class Projects extends PureComponent {
<h4>reddit Neo4J Database</h4> <h4>reddit Neo4J Database</h4>
<p> <p>
A learning Neo4j database project of a sample of comments on the A learning Neo4j database project of a sample of comments on the
popular social media platform Reddit. A possible prototype database popular social media platform Reddit. It can show the relationships between
for Reddit to run on Neo4j. It can show the relationships between
users, their comments, and subreddits. With this information we can users, their comments, and subreddits. With this information we can
infer demographic information about reddits users. For example we infer demographic information about reddit's users.
could see which subreddits have the same users who post comments,
and where else they post.
</p> </p>
<ClearButton href='https://github.com/mitchelljfs/comment_context_analysis'>Repository</ClearButton> <ClearButton href='https://github.com/mitchelljfs/comment_context_analysis'>Repository</ClearButton>
</div> </div>