mirror of https://github.com/mitchell/mjfs.us.git
More UI tweaks across the board. Added all-page header. Added clear-button component. Added Home and Projects pages.
This commit is contained in:
mitchelljfs
parent
d03e91d917
commit
121e8225b3
|
|
@ -0,0 +1,2 @@
|
|||
# Personal Website
|
||||
This is my personal website built using React.js. Visit it and read a bit more about it [here](https://www.mitchelljfsimon.com).
|
||||
|
|
@ -5165,6 +5165,18 @@
|
|||
"resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
|
||||
"integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0="
|
||||
},
|
||||
"history": {
|
||||
"version": "4.7.2",
|
||||
"resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
|
||||
"integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
|
||||
"requires": {
|
||||
"invariant": "2.2.4",
|
||||
"loose-envify": "1.3.1",
|
||||
"resolve-pathname": "2.2.0",
|
||||
"value-equal": "0.4.0",
|
||||
"warning": "3.0.0"
|
||||
}
|
||||
},
|
||||
"hmac-drbg": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
||||
|
|
@ -9473,6 +9485,40 @@
|
|||
"styled-components": "2.4.0"
|
||||
}
|
||||
},
|
||||
"react-router": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.2.0.tgz",
|
||||
"integrity": "sha512-DY6pjwRhdARE4TDw7XjxjZsbx9lKmIcyZoZ+SDO7SBJ1KUeWNxT22Kara2AC7u6/c2SYEHlEDLnzBCcNhLE8Vg==",
|
||||
"requires": {
|
||||
"history": "4.7.2",
|
||||
"hoist-non-react-statics": "2.5.0",
|
||||
"invariant": "2.2.4",
|
||||
"loose-envify": "1.3.1",
|
||||
"path-to-regexp": "1.7.0",
|
||||
"prop-types": "15.6.1",
|
||||
"warning": "3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"hoist-non-react-statics": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz",
|
||||
"integrity": "sha512-6Bl6XsDT1ntE0lHbIhr4Kp2PGcleGZ66qu5Jqk8lc0Xc/IeG6gVLmwUGs/K0Us+L8VWoKgj0uWdPMataOsm31w=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.2.2.tgz",
|
||||
"integrity": "sha512-cHMFC1ZoLDfEaMFoKTjN7fry/oczMgRt5BKfMAkTu5zEuJvUiPp1J8d0eXSVTnBh6pxlbdqDhozunOOLtmKfPA==",
|
||||
"requires": {
|
||||
"history": "4.7.2",
|
||||
"invariant": "2.2.4",
|
||||
"loose-envify": "1.3.1",
|
||||
"prop-types": "15.6.1",
|
||||
"react-router": "4.2.0",
|
||||
"warning": "3.0.0"
|
||||
}
|
||||
},
|
||||
"react-scripts": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz",
|
||||
|
|
@ -10098,6 +10144,11 @@
|
|||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz",
|
||||
"integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY="
|
||||
},
|
||||
"resolve-pathname": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
|
||||
"integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
|
||||
},
|
||||
"resolve-url": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
|
||||
|
|
@ -11528,6 +11579,11 @@
|
|||
"spdx-expression-parse": "3.0.0"
|
||||
}
|
||||
},
|
||||
"value-equal": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
|
||||
"integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
|
||||
},
|
||||
"vary": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||
|
|
@ -11564,6 +11620,14 @@
|
|||
"makeerror": "1.0.11"
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
|
||||
"integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
|
||||
"requires": {
|
||||
"loose-envify": "1.3.1"
|
||||
}
|
||||
},
|
||||
"watch": {
|
||||
"version": "0.10.0",
|
||||
"resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
"react": "^16.3.2",
|
||||
"react-dom": "^16.3.2",
|
||||
"react-responsive-navbar": "^1.0.11",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-scripts": "1.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,21 @@
|
|||
.Website {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-flow: column nowrap;
|
||||
color: white;
|
||||
margin-bottom: 15%;
|
||||
}
|
||||
|
||||
.MainContainer {
|
||||
max-width: 700px;
|
||||
min-width: 60%;
|
||||
margin: auto;
|
||||
padding-bottom: 10%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and ( max-width: 500px ) {
|
||||
.MainContainer {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
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 './Website.css'
|
||||
|
||||
|
|
@ -8,9 +12,17 @@ class Website extends Component {
|
|||
render () {
|
||||
return (
|
||||
<div className='Website'>
|
||||
<p>Hello, my dudes.</p>
|
||||
<div className='MainContainer'>
|
||||
<Header />
|
||||
<Switch>
|
||||
<Route exact path='/' component={Home} />
|
||||
<Route path='/projects' component={Projects} />
|
||||
<Route path='/experience' component={null} />
|
||||
<Route path='/contact' component={null} />
|
||||
</Switch>
|
||||
<Navbar />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
.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;
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import React, { PureComponent } from 'react'
|
||||
|
||||
import './ClearButton.css'
|
||||
|
||||
class ClearButton extends PureComponent {
|
||||
render () {
|
||||
return (
|
||||
<a className='clearButton' href={this.props.href}>{this.props.children}</a>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default ClearButton
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
.HeaderContainer {
|
||||
border-bottom: 2px solid rgb(22, 26, 40);
|
||||
width: 65%;
|
||||
margin: auto;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
.HeaderContainer h2 {
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.HeaderContainer p {
|
||||
font-style: italic;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import React, { PureComponent } from 'react'
|
||||
|
||||
import './Header.css'
|
||||
|
||||
class Header extends PureComponent {
|
||||
render () {
|
||||
return (
|
||||
<div className='HeaderContainer'>
|
||||
<h2>Mitchell J. F. Simon</h2>
|
||||
<p>Cloud Architect, Hypremium.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Header
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
right: 0px;
|
||||
left: 0px;
|
||||
background-color: rgb(59, 65, 82);
|
||||
box-shadow: -1px 0 3px black;
|
||||
box-shadow: -1px -1px 1px rgb(42, 46, 60);
|
||||
}
|
||||
|
||||
.Navbar-Button {
|
||||
|
|
@ -17,7 +17,11 @@
|
|||
}
|
||||
|
||||
.Navbar-Button:hover {
|
||||
box-shadow: 2px 2px 2px black;
|
||||
background-color: rgb(176, 211, 237);
|
||||
}
|
||||
|
||||
.Navbar-Button:active {
|
||||
box-shadow: 0 0 2px black inset;
|
||||
}
|
||||
|
||||
.Navbar-Menu {
|
||||
|
|
@ -26,27 +30,32 @@
|
|||
padding: 0 20%;
|
||||
}
|
||||
|
||||
.Navbar-Menu p {
|
||||
.Navbar-Menu div {
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
color: white;
|
||||
float: left;
|
||||
width: 23%;
|
||||
background-color: grey;
|
||||
padding: 5px;
|
||||
margin: 1% 1%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media screen and ( max-width: 500px ) {
|
||||
.Navbar-Menu {
|
||||
padding: 0 5% 3px 5%;
|
||||
}
|
||||
.Navbar-Menu p {
|
||||
.Navbar-Menu div {
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.Navbar-Menu p:hover {
|
||||
box-shadow: 2px 2px 2px black;
|
||||
.Navbar-Menu div:hover {
|
||||
background-color: rgb(191, 191, 191);
|
||||
}
|
||||
|
||||
.Active-Button div {
|
||||
box-shadow: 0 0 2px black inset;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component } from 'react'
|
||||
|
||||
import ResponsiveMenu from 'react-responsive-navbar'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
|
||||
import './Navbar.css'
|
||||
|
||||
|
|
@ -15,10 +15,10 @@ class Navbar extends Component {
|
|||
smallMenuClassName='Navbar'
|
||||
menu={
|
||||
<div className='Navbar-Menu'>
|
||||
<p>Home</p>
|
||||
<p>Projects</p>
|
||||
<p>Experience</p>
|
||||
<p>Contact</p>
|
||||
<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>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
10
src/index.js
10
src/index.js
|
|
@ -1,11 +1,15 @@
|
|||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
|
||||
import './index.css'
|
||||
import Website from './Website'
|
||||
import registerServiceWorker from './registerServiceWorker'
|
||||
|
||||
ReactDOM.render(
|
||||
<Website />,
|
||||
document.getElementById('root')
|
||||
ReactDOM.render((
|
||||
<BrowserRouter>
|
||||
<Website />
|
||||
</BrowserRouter>
|
||||
), document.getElementById('root')
|
||||
)
|
||||
registerServiceWorker()
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
.HomeContainer p {
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.HomeContainer img {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 40%;
|
||||
margin-right: 5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.signature {
|
||||
float: right;
|
||||
font-style: italic;
|
||||
margin-right: 10%;
|
||||
}
|
||||
|
||||
@media screen and ( max-width: 500px ) {
|
||||
.HomeContainer img {
|
||||
width: 100%;
|
||||
padding: 5%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import React, { PureComponent } from 'react'
|
||||
|
||||
import './Home.css'
|
||||
import profile from '../../images/profile.jpg'
|
||||
|
||||
class Home extends PureComponent {
|
||||
render () {
|
||||
return (
|
||||
<div className='HomeContainer'>
|
||||
<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.
|
||||
</p>
|
||||
<p>
|
||||
My academic 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.
|
||||
</p>
|
||||
<p>
|
||||
Thank you for reading my quick bio. If you would like to contact me
|
||||
visit the contact page for all of the options.
|
||||
</p>
|
||||
<p className='signature'>-- Mitchell J. F. Simon, III</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Home
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
.ProjectsContainer {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.ProjectsContainer div {
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
margin: auto;
|
||||
flex: 1 0 100%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
@media screen and ( max-width: 500px ) {
|
||||
.ProjectsContainer div {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import React, { PureComponent } from 'react'
|
||||
|
||||
import ClearButton from '../../components/ClearButton/ClearButton.js'
|
||||
|
||||
import './Projects.css'
|
||||
|
||||
class Projects extends PureComponent {
|
||||
render () {
|
||||
return (
|
||||
<div className='ProjectsContainer'>
|
||||
<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.
|
||||
</p>
|
||||
<ClearButton href='https://github.com/mitchelljfs/react-website'>Repository</ClearButton>
|
||||
</div>
|
||||
<div>
|
||||
<h4>memebank API</h4>
|
||||
<p>
|
||||
This is a RESTful API using the Rails framework to support the
|
||||
front end application of memebank. It uses JWT authentication for
|
||||
stateless account authentication, and bcrypt for password
|
||||
encryption. It communicates with the front-end using basic HTTP
|
||||
requests and JSON objects.
|
||||
</p>
|
||||
<ClearButton href='https://github.com/aherco/memebank-api'>Repository</ClearButton>
|
||||
</div>
|
||||
<div>
|
||||
<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
|
||||
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.
|
||||
</p>
|
||||
<ClearButton href='https://github.com/mitchelljfs/comment_context_analysis'>Repository</ClearButton>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Projects
|
||||
Loading…
Reference in New Issue