diff --git a/README.md b/README.md new file mode 100644 index 0000000..7cf45d9 --- /dev/null +++ b/README.md @@ -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). diff --git a/package-lock.json b/package-lock.json index d7cbc87..dfb9fac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index ec3a299..3913d6d 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/Website.css b/src/Website.css index 776f49a..c1f8a79 100644 --- a/src/Website.css +++ b/src/Website.css @@ -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%; + } } diff --git a/src/Website.js b/src/Website.js index 5ff8610..017e24a 100644 --- a/src/Website.js +++ b/src/Website.js @@ -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,8 +12,16 @@ class Website extends Component { render () { return (
Hello, my dudes.
-Cloud Architect, Hypremium.
+Home
-Projects
-Experience
-Contact
+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 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. +
++ Thank you for reading my quick bio. If you would like to contact me + visit the contact page for all of the options. +
+-- Mitchell J. F. Simon, III
++ 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. +
++ 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. +
++ 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. +
+