complete basic and barebones

site/src/App.css

@@ -1,12 +1,22 @@
+html, body{
+  overflow-y: scroll;
+}
 body{
   background-image: url('https://i.pinimg.com/originals/d6/c3/ac/d6c3ac09021dbc0cda8ee27837d2c795.png')
 }
+h1, h2 {
+  font-family: "Roboto Condensed",sans-serif;
+  color: #1f1f1f;
+}
 h1{
+  font-size: 3rem;
+}
+.header h1{
   display: inline-block;
   margin-bottom: 0px;
 }
 .header{
-  margin-bottom: 0;
+  margin-bottom: 0px;
   background-color: white;
   width: 100%;
   z-index: 10;
@@ -22,34 +32,37 @@ h1{
   display:inline;
   height: 40px;
 }
-.navBar ul li{
-  float: left;
-  display: inline;
+.navBar li{
+  display: inline-block;
+  margin-bottom: 40px;
   padding: 0px;
   background-color: rgb(156,49,45,.5);
   border-top: 3px black solid;
   border-bottom: 3px black solid;
   border-right: 3px black solid;
 }
-.navBar ul li:first-child{
-  border-left: 3px black solid;
-}
-.navBar ul li:hover{
+.navBar li:hover{
   background-color: rgb(156,49,45,.8);
 }
-.navBar ul li a{
+.navBar li:first-child{
+  border-left: 3px black solid;
+}
+.navBar li a{
   color: white;
   padding: 40px;
   line-height: 30px;
 }
 .navBar{
-  margin-bottom: 40px;
+  margin-bottom: 0px;
+}
+.spacer{
+  margin-bottom:10em;
 }
 .foreground{
-  position: absolute;
+  position:absolute;
   margin-left: -10px;
   padding-left: 10px;
-  width:110%;
+  width:100%;
   background-color: rgb(156,49,45,.5);
 }
 img{

site/src/App.js

@@ -2,6 +2,7 @@ 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'
 
 function App() {
   return (
@@ -10,11 +11,15 @@ function App() {
         <h1>Andrew Simonson</h1>
         <Socials />
         <Nav>
-          <Link className='navBar' onClick='/home'>Home</Link>
-          <Link className='navBar' onClick='resume.pdf'>Resume</Link>
-          <Link className='navBar' onClick='/projects'>Projects</Link>
+          <Link onClick='/home'>Home</Link>
+          <Link onClick='resume.pdf'>Resume</Link>
+          <Link onClick='/projects'>Projects</Link>
         </Nav>
       </div>
+      <div className='spacer'></div>
+      <div className='foreground'>
+        <About />
+      </div>
     </div>
   );
 }

site/src/componets/About.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function About(){
+    return(
+        <>
+            <h2>A biography</h2>
+            <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
+                results from the attempt.</p>
+            <p>When I'm not <del>losing my mind</del>wasting time, 
+                you can find me building discord bots, playing chess, 
+                or actually exercising, doing things like, idk, playing
+                racquetball or soccer.</p>
+            <p>I'm a first year student at <strong>Rochester Institute of Technology </strong>
+                in the <b>Computing Exploration</b> program.  I'm from Hagerstown, 
+                Maryland.</p>
+        </>
+    )
+}