Added a header that links to all my projects + social media

src/App.js

@@ -8,6 +8,7 @@ import { NoMatch } from './404';
 import { Layout } from './components/Layout';
 import { NavigationBar } from './components/NavigationBar';
 import { Jumbotron } from './components/Jumbotron';
+import Footer from './components/Footer';
 
 class App extends Component {
   render() {
@@ -25,6 +26,7 @@ class App extends Component {
               <Route component={NoMatch} />
             </Switch>
           </Layout>
+          <Footer />
         </Router>
       </React.Fragment>
     );

src/Contact.js

@@ -33,6 +33,13 @@ export const Contact = () => (
 		<h2>LinkedIn:&nbsp;
 		<a href="https://www.linkedin.com/in/gregoryjcampbell/">Gregory J Campbell</a> 
 		</h2>
+
+		<br/>
+		<br/>
+		<br/>
+
+		<hr />
+
 		</body>
 	</div>
   )

src/Projects.js

@@ -225,6 +225,8 @@ export const Projects = () => (
 		<img src={GC} alt="GC"/>
 
 		<br/>
+
+		<hr />
 		
 		</body>
 	</div>

src/components/Footer.js

@@ -0,0 +1,64 @@
+import React from "react";
+import github from "./../assets/GitHub_Logo.png";
+import linkedin from "./../assets/LI-Logo.png";
+import twitter from "./../assets/Twitter-Logo.png";
+import itch from "./../assets/itchio-logo-black.png";
+
+const Footer = () => {
+  return (
+    <>
+      <nav className="footer">
+        <div className="footer-links">
+          <ul>
+            <li>
+              <a href="https://github.com/gjcampbell777">
+                <img
+                  src={github}
+                  alt="Github Logo"
+                  height="auto"
+                  width="100%"
+                  style={{ maxWidth: "80px" }}
+                />
+              </a>
+            </li>
+            <li>
+              <a href="https://www.linkedin.com/in/gregoryjcampbell/">
+                <img
+                  src={linkedin}
+                  alt="LinkedIn Logo"
+                  height="auto"
+                  width="100%"
+                  style={{ maxWidth: "115px" }}
+                />
+              </a>
+            </li>
+            <li>
+              <a href="https://twitter.com/Gregory_Soup">
+                <img
+                  src={twitter}
+                  alt="Twitter Logo"
+                  height="auto"
+                  width="100%"
+                  style={{ maxWidth: "45px" }}
+                />
+              </a>
+            </li>
+            <li>
+              <a href="https://gregorysoup.itch.io/">
+                <img
+                  src={itch}
+                  alt="Itch Logo"
+                  height="auto"
+                  width="100%"
+                  style={{ maxWidth: "100px" }}
+                />
+              </a>
+            </li>
+          </ul>
+        </div>
+      </nav>
+    </>
+  );
+};
+
+export default Footer;

src/index.css

@@ -53,4 +53,34 @@ img {
    position: absolute;
    top: 0;
    width: 100%;
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+  position: sticky;
+  top: 0;
+  color: white;
+  z-index: 1;
+}
+
+.footer-links ul {
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.footer-links li {
+  list-style: none;
+}
+
+.footer-links li a {
+  text-decoration: none;
+  color: white;
+  padding: 1rem;
+  display: block;
+}
+
+.footer-links li:hover {
+  background-color: #b2b2b2;
 }