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

6
src/Website.css
View File

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

12
src/Website.js
View File

@ -1,18 +1,18 @@
import React, { Component } from 'react'
import { Route, Switch } from 'react-router-dom'
import Header from './components/Header/Header.js'
import Navbar from './components/Navbar/Navbar.js'
import Home from './screens/Home/Home.js'
import Projects from './screens/Projects/Projects.js'
import Header from './components/Header'
import Navbar from './components/Navbar'
import Home from './screens/Home'
import Projects from './screens/Projects'
import './Website.css'
class Website extends Component {
render () {
return (
<div className='Website'>
<div className='MainContainer'>
<div className='website'>
<div className='main-container'>
<Header />
<Switch>
<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 './ClearButton.css'
import './index.css'
class ClearButton extends PureComponent {
render () {
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);
width: 65%;
margin: auto;
margin-bottom: -5px;
width: 65%;
}
.HeaderContainer h2 {
.header-container h2 {
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 './Header.css'
import SmallText from '../SmallText'
import './index.css'
class Header extends PureComponent {
render () {
return (
<div className='HeaderContainer'>
<div className='header-container'>
<h2>Mitchell J. F. Simon</h2>
<p>Cloud Architect, Hypremium.</p>
<SmallText>DevOps & Software Engineer, Hypremium.</SmallText>
</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);
bottom: 0;
box-shadow: -1px -1px 1px rgb(42, 46, 60);
@ -7,58 +7,59 @@
right: 0;
}
.Navbar-Button {
.navbar-button {
background-color: rgb(126, 161, 187);
border-radius: 2px;
color: white;
float: right;
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);
}
.Navbar-Button:active {
box-shadow: 0 0 2px black inset;
.navbar-button:active {
box-shadow: 0 0 5px black inset;
}
.Navbar-Menu {
.navbar-menu {
margin: 0 20%;
width: 60%;
}
.Navbar-Menu div {
background-color: grey;
border-radius: 2px;
.navbar-menu div {
border-radius: 3px;
color: white;
float: left;
margin: 1% 1%;
overflow: hidden;
padding: 5px 0;
text-overflow: ellipsis;
transition: background-color 0.2s, box-shadow 0.1s;
width: 23%;
}
@media screen and ( max-width: 500px ) {
.Navbar {
.navbar {
padding-bottom: 5px;
}
.Navbar-Menu {
.navbar-menu {
margin: 5%;
width: 90%;
}
.Navbar-Menu div {
.navbar-menu div {
margin: 5px 0;
width: 100%;
}
}
.Navbar-Menu div:hover {
background-color: rgb(191, 191, 191);
.navbar-menu div:hover {
background-color: rgb(86, 95, 118);
}
.Active-Button div {
box-shadow: 0 0 2px black inset;
.active-button div {
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 {
@import url('https://fonts.googleapis.com/css?family=Roboto');
background-color: rgb(46, 51, 64);
font-family: 'Roboto', sans-serif;
font-family: 'Gothic A1', sans-serif;
font-size: 100%;
}

2
src/index.js
View File

@ -10,6 +10,6 @@ ReactDOM.render((
<BrowserRouter>
<Website />
</BrowserRouter>
), document.getElementById('root')
), document.getElementById('root')
)
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;
}
.HomeContainer img {
.home-container img {
border-radius: 3px;
display: block;
float: left;
@ -17,7 +17,7 @@
}
@media screen and ( max-width: 500px ) {
.HomeContainer img {
.home-container img {
margin: 5%;
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 './Home.css'
import './index.css'
import profile from '../../images/profile.jpg'
class Home extends PureComponent {
render () {
return (
<div className='HomeContainer'>
<div className='home-container'>
<img src={profile} alt='Profile' />
<p>Hello and welcome,</p>
<p>
My name is Mitchell Simon. I am a Computer Science major at Loyola
Marymount University, Backend Software Developer at Hypremium, and I
offer my skills as a freelance web developer, and freelance
software/application developer.
My name is Mitchell Simon. I am a DevOps & Software Engineer at
Hypremium, Computer Science major at Loyola Marymount University, and
I offer my skills as a consulting web & software developer.
</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,
software engineering, cybersecurity, and business administration. My
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 ClearButton from '../../components/ClearButton/ClearButton.js'
import ClearButton from '../../components/ClearButton'
import './Projects.css'
import './index.css'
class Projects extends PureComponent {
render () {
return (
<div className='ProjectsContainer'>
<div className='projects-container'>
<div>
<h4>www.mitchelljfsimon.com</h4>
<p>
This website has taken many forms over the years, as my frontend
and design skills increase. It started as a simple static site
using HTML, CSS, and a little bit of Javascript. Then it became
simple web app using Ruby and the Sinatra framework. Currently it
takes the form of a React.js app. This may be considered over-kill,
but I believe React.js (and other similar frontend frameworks) can
be used to make even the simplest projects modular and extensible.
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 other similar frontend frameworks)
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 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>
<h4>memebank API</h4>
<p>
@ -36,12 +45,9 @@ class Projects extends PureComponent {
<h4>reddit Neo4J Database</h4>
<p>
A learning Neo4j database project of a sample of comments on the
popular social media platform Reddit. A possible prototype database
for Reddit to run on Neo4j. It can show the relationships between
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 reddits users. For example we
could see which subreddits have the same users who post comments,
and where else they post.
infer demographic information about reddit's users.
</p>
<ClearButton href='https://github.com/mitchelljfs/comment_context_analysis'>Repository</ClearButton>
</div>