css and routing update

I did a lot with the css

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>
   );