From 1ad6fdd7a8e803ce15109a62fef1347ee8652640 Mon Sep 17 00:00:00 2001 From: mitchelljfs Date: Sun, 6 May 2018 21:57:08 -0700 Subject: [PATCH] Content tweaks. Componentized SmallText. Standardized naming conventions. --- package-lock.json | 16 ++++----- public/index.html | 1 + src/Website.css | 6 ++-- src/Website.js | 12 +++---- src/components/ClearButton/ClearButton.css | 17 --------- src/components/ClearButton/index.css | 17 +++++++++ .../ClearButton/{ClearButton.js => index.js} | 4 +-- .../Header/{Header.css => index.css} | 11 ++---- src/components/Header/{Header.js => index.js} | 8 +++-- src/components/Navbar/Navbar.js | 29 --------------- .../Navbar/{Navbar.css => index.css} | 35 ++++++++++--------- src/components/Navbar/index.js | 29 +++++++++++++++ src/components/SmallText/index.css | 5 +++ src/components/SmallText/index.js | 13 +++++++ src/index.css | 3 +- src/index.js | 2 +- src/screens/Home/{Home.css => index.css} | 6 ++-- src/screens/Home/{Home.js => index.js} | 13 ++++--- src/screens/Projects/Projects.css | 17 --------- src/screens/Projects/index.css | 16 +++++++++ .../Projects/{Projects.js => index.js} | 34 ++++++++++-------- 21 files changed, 157 insertions(+), 137 deletions(-) delete mode 100644 src/components/ClearButton/ClearButton.css create mode 100644 src/components/ClearButton/index.css rename src/components/ClearButton/{ClearButton.js => index.js} (58%) rename src/components/Header/{Header.css => index.css} (53%) rename src/components/Header/{Header.js => index.js} (53%) delete mode 100644 src/components/Navbar/Navbar.js rename src/components/Navbar/{Navbar.css => index.css} (56%) create mode 100644 src/components/Navbar/index.js create mode 100644 src/components/SmallText/index.css create mode 100644 src/components/SmallText/index.js rename src/screens/Home/{Home.css => index.css} (80%) rename src/screens/Home/{Home.js => index.js} (66%) delete mode 100644 src/screens/Projects/Projects.css create mode 100644 src/screens/Projects/index.css rename src/screens/Projects/{Projects.js => index.js} (54%) diff --git a/package-lock.json b/package-lock.json index 7c2297f..0a286c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": { diff --git a/public/index.html b/public/index.html index 3d3f7ca..b96214f 100644 --- a/public/index.html +++ b/public/index.html @@ -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`. --> + Mitchell J. F. Simon diff --git a/src/Website.css b/src/Website.css index 335cc8a..4733e19 100644 --- a/src/Website.css +++ b/src/Website.css @@ -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%; } } diff --git a/src/Website.js b/src/Website.js index 017e24a..b3f1293 100644 --- a/src/Website.js +++ b/src/Website.js @@ -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 ( -
-
+
+
diff --git a/src/components/ClearButton/ClearButton.css b/src/components/ClearButton/ClearButton.css deleted file mode 100644 index 14eb109..0000000 --- a/src/components/ClearButton/ClearButton.css +++ /dev/null @@ -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; -} diff --git a/src/components/ClearButton/index.css b/src/components/ClearButton/index.css new file mode 100644 index 0000000..a8931f2 --- /dev/null +++ b/src/components/ClearButton/index.css @@ -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; +} diff --git a/src/components/ClearButton/ClearButton.js b/src/components/ClearButton/index.js similarity index 58% rename from src/components/ClearButton/ClearButton.js rename to src/components/ClearButton/index.js index 9276a54..5438be8 100644 --- a/src/components/ClearButton/ClearButton.js +++ b/src/components/ClearButton/index.js @@ -1,11 +1,11 @@ import React, { PureComponent } from 'react' -import './ClearButton.css' +import './index.css' class ClearButton extends PureComponent { render () { return ( - {this.props.children} + {this.props.children} ) } } diff --git a/src/components/Header/Header.css b/src/components/Header/index.css similarity index 53% rename from src/components/Header/Header.css rename to src/components/Header/index.css index ca1fd7b..5d3ccd4 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/index.css @@ -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; -} diff --git a/src/components/Header/Header.js b/src/components/Header/index.js similarity index 53% rename from src/components/Header/Header.js rename to src/components/Header/index.js index d8c1007..942a60c 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/index.js @@ -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 ( -
+

Mitchell J. F. Simon

-

Cloud Architect, Hypremium.

+ DevOps & Software Engineer, Hypremium.
) } diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js deleted file mode 100644 index b15bfe3..0000000 --- a/src/components/Navbar/Navbar.js +++ /dev/null @@ -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 ( - Menu
} - menuCloseButton={
Close
} - changeMenuOn='500px' - largeMenuClassName='Navbar' - smallMenuClassName='Navbar' - menu={ -
-
Home
 -
Projects
 -
Experience
 -
Contact
 -
- } - /> - ) - } -} - -export default Navbar diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/index.css similarity index 56% rename from src/components/Navbar/Navbar.css rename to src/components/Navbar/index.css index 8c6838d..f056f7e 100644 --- a/src/components/Navbar/Navbar.css +++ b/src/components/Navbar/index.css @@ -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; } diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js new file mode 100644 index 0000000..7b75d4c --- /dev/null +++ b/src/components/Navbar/index.js @@ -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 ( + Menu
} + menuCloseButton={
Close
} + changeMenuOn='500px' + largeMenuClassName='navbar' + smallMenuClassName='navbar' + menu={ +
+
Home
 +
Projects
 +
Experience
 +
Contact
 +
+ } + /> + ) + } +} + +export default Navbar diff --git a/src/components/SmallText/index.css b/src/components/SmallText/index.css new file mode 100644 index 0000000..0154bb3 --- /dev/null +++ b/src/components/SmallText/index.css @@ -0,0 +1,5 @@ +.small-text { + color: lightgrey; + font-size: 0.8rem; + font-style: italic; +} diff --git a/src/components/SmallText/index.js b/src/components/SmallText/index.js new file mode 100644 index 0000000..6c5026d --- /dev/null +++ b/src/components/SmallText/index.js @@ -0,0 +1,13 @@ +import React, { PureComponent } from 'react' + +import './index.css' + +class SmallText extends PureComponent { + render () { + return ( +

DevOps & Software Engineer, Hypremium.

+ ) + } +} + +export default SmallText diff --git a/src/index.css b/src/index.css index 4472949..dacd199 100644 --- a/src/index.css +++ b/src/index.css @@ -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%; } diff --git a/src/index.js b/src/index.js index c096042..8388f4e 100644 --- a/src/index.js +++ b/src/index.js @@ -10,6 +10,6 @@ ReactDOM.render(( - ), document.getElementById('root') +), document.getElementById('root') ) registerServiceWorker() diff --git a/src/screens/Home/Home.css b/src/screens/Home/index.css similarity index 80% rename from src/screens/Home/Home.css rename to src/screens/Home/index.css index 356a528..17c40a7 100644 --- a/src/screens/Home/Home.css +++ b/src/screens/Home/index.css @@ -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%; } diff --git a/src/screens/Home/Home.js b/src/screens/Home/index.js similarity index 66% rename from src/screens/Home/Home.js rename to src/screens/Home/index.js index 424ac29..6da71e4 100644 --- a/src/screens/Home/Home.js +++ b/src/screens/Home/index.js @@ -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 ( -
+
Profile

Hello and welcome,

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

- 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. diff --git a/src/screens/Projects/Projects.css b/src/screens/Projects/Projects.css deleted file mode 100644 index 7eec9ff..0000000 --- a/src/screens/Projects/Projects.css +++ /dev/null @@ -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%; - } -} diff --git a/src/screens/Projects/index.css b/src/screens/Projects/index.css new file mode 100644 index 0000000..99232a5 --- /dev/null +++ b/src/screens/Projects/index.css @@ -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%; + } +} diff --git a/src/screens/Projects/Projects.js b/src/screens/Projects/index.js similarity index 54% rename from src/screens/Projects/Projects.js rename to src/screens/Projects/index.js index caafc18..7bc38d3 100644 --- a/src/screens/Projects/Projects.js +++ b/src/screens/Projects/index.js @@ -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 ( -

+

www.mitchelljfsimon.com

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.

Repository
+
+

destinate

+

+ 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. +

+ Repository +

memebank API

@@ -36,12 +45,9 @@ class Projects extends PureComponent {

reddit Neo4J Database

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.

Repository