css and routing update

I did a lot with the css

site/src/App.css

@@ -1,80 +1,142 @@
 html, body{
-  overflow-y: scroll;
+  background-color: #1b1f27;
+  overflow-x: hidden;
 }
 body{
+  margin: 0;
   background-image: url('https://i.pinimg.com/originals/d6/c3/ac/d6c3ac09021dbc0cda8ee27837d2c795.png')
 }
-h1, h2 {
+h1, h2, p{
   font-family: "Roboto Condensed",sans-serif;
-  color: #1f1f1f;
 }
-.header h1{
-  display: inline-block;
-  margin-bottom: 0px;
-  margin-top: 2vmin;
-  font-size: 6vmin;
-}
-.header{
-  margin-bottom: 0px;
-  background-color: white;
-  width: 100%;
-  z-index: 10;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-.socials{
-  display: inline;
-  float: right;
-  margin: 0px;
-}
-.socials img{
-  margin: .5vmin;
-  margin-top: 2vmin;
-  height: 6vmin;
-}
-.navBar li{
-  display: inline;
-  background-color: rgb(156,49,45,.5);
-  border-top: .5vmin black solid;
-  border-bottom: .5vmin black solid;
-  border-right: .5vmin black solid;
-  font-size: 4vmin;
-}
-.navBar li:hover{
-  background-color: rgb(156,49,45,.8);
-}
-.navBar li:first-child{
-  border-left: .5vmin black solid;
-}
-.navBar li a{
-  color: white;
-  padding: 3vmax;
-  line-height: 1.2vmax;
-}
-.navBar{
-  margin-bottom: 0px;
-  padding-left: 0px;
-}
-.foreground{
-  position:absolute;
-  margin-top: 13vmin;
-  margin-left: -10px;
-  padding-left: 10px;
-  width:100%;
-  background-color: rgb(156,49,45,.5);
-}
-.foreground p{
-  max-width: 1000px;
+h1, h2{
+  color: #ecebeb;
 }
 h2{
-  font-size: calc(4vmin + 7px);
+  font-size: 2rem;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+h3{
+  color: #a8a8a8;
 }
 p{
   color: #ffffff;
-  font-size: calc(3vmin + 3px);
+  font-size: 1rem;
 }
 a { 
   color: #a0a0a0a0;
   text-decoration: none;
 }
+.header h1{
+  display: inline-block;
+  margin-bottom: 0px;
+  margin-top: .5rem;
+  font-size: 2.5rem;
+}
+.header{
+  margin-bottom: 0px;
+  margin-left: .3rem;
+  padding-bottom: .2rem;
+  background-color: #0f1216;
+  width: 100%;
+  z-index: 10;
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+.navBar li{
+  display: inline;
+  background-color: rgb(156,49,45,.5);
+  border-top: .2rem black solid;
+  border-bottom: .2rem black solid;
+  border-right: .2rem black solid;
+  font-size: 1.2rem;
+}
+.navBar li:hover{
+  background-color: rgb(156,49,45,.8);
+}
+.navBar li:first-child{
+  border-left: .2rem black solid;
+}
+.navBar li a{
+  color: white;
+  padding-left: 2rem;;
+  padding-right: 2rem;
+  line-height: 1.2vmax;
+}
+.navBar{
+  margin-top: 1rem;
+  margin-bottom: 0px;
+  padding-left: 0px;
+}
+.foreground{
+  padding-top:5.5rem;
+  padding-left: .5rem;
+  width:100%;
+  background-color: rgb(44,44,44,.5);
+  padding-bottom: 1rem;
+  overflow: hidden;
+}
+.foreground p{
+  max-width: 40rem;
+}
+.sideimg{
+  float: right;
+  display: block;
+  margin-right: 10rem;
+  max-width: 20rem;
+  max-height: 20rem;
+}
+.projectList{
+  float:left;
+  background-color: rgba(11, 17, 26, 0.5);
+  border: solid rgba(34, 52, 75, 0.5) .3rem;
+  width: calc(95% - .5rem);
+}
+.project{
+  background-color: #25282c;
+  display: inline;
+  float: left;
+  padding: .5rem;
+  margin: 2rem;
+  width: 20rem;
+  height: 15rem;
+  border: .3rem black solid;
+}
+.project h3{
+  border-bottom: black solid .2rem;
+}
+.topBox{
+  height: 70%;
+}
+.bottomBox{
+  height: auto;
+}
+.bottomBox a{
+  vertical-align: middle;
+}
+.project a{
+  padding: .5rem;
+  border: solid black .2rem;
+  background-color: rgb(80, 80, 80);
+}
+.footer{
+  display: block;
+  background-color: rgb(156,49,45);
+}
+.socials{
+  padding-left: 3rem;
+  padding-right: 3rem;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+  margin-right: auto;
+  table-layout: fixed;
+}
+.socials td{
+  width:15%;
+}
+.socials img{
+  height: 2rem;
+}

site/src/App.js

@@ -1,23 +1,36 @@
+import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
+
 import './App.css';
 import Nav from './componets/Nav.js'
-import Link from './componets/Link.js'
 import Socials from './componets/Socials.js'
 import About from './componets/About.js'
+import Projects from './Projects';
+
+const routs = (
+  <Router>
+    <div>
+      <Route exact path='/' component={About} />
+      <Route exact path='/projects' component={Projects} />
+    </div>
+  </Router>
+)
 
 function App() {
   return (
     <div className="App">
       <div className="header">
         <h1>Andrew Simonson</h1>
-        <Socials />
         <Nav>
-          <Link onClick='/home'>Home</Link>
-          <Link onClick='resume.pdf'>Resume</Link>
-          <Link onClick='/projects'>Projects</Link>
+          <a href='/'>Home</a>
+          <a href='resume.pdf'>Resume</a>
+          <a href='/projects'>Projects</a>
         </Nav>
       </div>
       <div className='foreground'>
-        <About />
+        {routs}
+      </div>
+      <div className='footer'>
+        <Socials />
       </div>
     </div>
   );

site/src/Projects.js

@@ -0,0 +1,33 @@
+import ProjectList from './componets/ProjectList'
+import Project from './componets/Project'
+
+export default function Projects(){
+    return(
+      <>
+        <h2>Projects</h2>
+        <ProjectList>
+          <Project status='WIP' title='Digital Portfolio' link='https://github.com/asimonson1125/asimonson1125.github.io' linkText='view code'>
+            A personal portfolio site made with React.js
+          </Project>
+          <Project status='WIP' title='Slate' link='https://github.com/asimonson1125/Slate' linkText='view code'>
+            Slate is a thing
+          </Project>
+          <Project status='WIP' title='Querist' link='https://github.com/asimonson1125/Querist' linkText='view code'>
+            A modular discord bot to manage class discord servers.
+          </Project>
+          <Project status='Complete' title='NationsGame Rolls Simulator' link='https://github.com/asimonson1125/NG-Rolls-Simulator' linkText='view code'>
+            A simulator for the browser game, NationsGame, to analyze unit composition and predict in-game victors and unit statistics.
+          </Project>
+          <Project status='Complete' title='Humans vs. Zombies Bot' link='https://github.com/asimonson1125/HvZ-bot' linkText='view code'>
+            A Discord bot to handle role management and statistics for RIT's Humans vs. Zombies games.
+          </Project>
+          <Project status='Incomplete' title='WallCycle' link='https://github.com/asimonson1125/WallCycle' linkText='view code'>
+            A GNOME extension that cycles through a folder of wallpapers
+          </Project>
+          <Project status='Complete' title='WinKeylogger' link='https://github.com/asimonson1125/WinKeylogger' linkText='view code'>
+            A C++ keylogger for windows based off a udemy course with my custom modifications and powershell script.
+          </Project>
+        </ProjectList>
+      </>
+    )
+}

site/src/componets/About.js

@@ -1,9 +1,11 @@
 import React from 'react';
+import picture from '../assets/itsa_me.JPG'
 
 export default function About(){
     return(
         <>
             <h2>A biography</h2>
+            <p>Ahoy, I'm Andrew Simonson</p>
             <p>I'm primarily an <strong>extremely</strong> forgetful person 
                 who, when productive, rewrites fate in favor of my own 
                 short-term interests, or rather, whatever half-assed mistake

site/src/componets/Link.js

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export default function Link(props){
-    return(
-        <a className={props.className} href={props.onClick}>{props.children}</a>
-    )
-}

site/src/componets/Project.js

@@ -0,0 +1,25 @@
+import React from 'react'
+
+export default function Project(props){
+    let statusColor = 'rgb(0,0,0)'
+    if(props.status == "WIP"){
+        statusColor = 'yellow';
+    }
+    else if(props.status == "Complete"){
+        statusColor = 'green';
+    }
+    else if(props.status == "Incomplete"){
+        statusColor = 'red';
+    }
+    return (
+        <li className='project'>
+            <div className='topBox'>
+                <h3>{props.title}</h3>
+                <p>{props.children}</p>
+            </div>
+            <div className='bottomBox'>
+                <a href={props.link}>{props.linkText}</a>
+            </div>
+        </li>
+    )
+}

site/src/componets/ProjectList.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default function ProjectList(props){
+    let projects;
+    props.children.forEach(function(x){
+        projects = (
+            <>
+            {projects}
+            {x}
+            </>
+        );
+    });
+    return(
+        <>
+        <ul className='projectList'>
+            {projects}
+        </ul>
+        </>
+    );
+} 

site/src/componets/Socials.js

@@ -7,11 +7,13 @@ import email from '../assets/email.svg'
 
 export default function Socials(){
     return(
-        <ul class='socials' data-aos='fade-up'>
-            <a href='https://github.com/asimonson1125'><img alt='Github' src={github} /></a>
-            <a href='https://www.instagram.com/an_a.simonson/'><img alt='Instagram' src={instagram} /></a>
-            <a href='https://www.linkedin.com/in/simonsonandrew/'><img alt='LinkedIn' src={linkedin} /></a>
-            <a href='mailto:asimonson1125@gmail.com'><img alt='E-mail' src={email} /></a>
-        </ul>
+        <table class='socials'>
+            <tr>
+                <td><a href='https://github.com/asimonson1125'><img alt='Github' src={github} /></a></td>
+                <td><a href='https://www.instagram.com/an_a.simonson/'><img alt='Instagram' src={instagram} /></a></td>
+                <td><a href='https://www.linkedin.com/in/simonsonandrew/'><img alt='LinkedIn' src={linkedin} /></a></td>
+                <td><a href='mailto:asimonson1125@gmail.com'><img alt='E-mail' src={email} /></a></td>
+            </tr>
+        </table>
     )
 }