From 64acd0b61cae8dccce81a9d7cf7b4503466fc3e2 Mon Sep 17 00:00:00 2001
From: Jake Runyan <runyanjake@gmail.com>
Date: Sun, 29 Dec 2024 20:17:26 -1000
Subject: [PATCH] Style Footer

---
 src/components/Footer.css | 38 +++++++++++++++++++++++++++++---------
 src/components/Footer.js  | 13 ++++++++++++-
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/components/Footer.css b/src/components/Footer.css
index 77022ed..9837582 100644
--- a/src/components/Footer.css
+++ b/src/components/Footer.css
@@ -1,12 +1,32 @@
 .footer {
-    background-color: #333;
-    text-align: center;
-    padding: 10px 0;
-    position: relative;
-    bottom: 0; /* Stick to the bottom */
-    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    background-color: #0b0b0b;
+    color: white;
+    padding: 10px 20px;
 }
 
-.footer p {
-    color: #d4d1c6;
-}
\ No newline at end of file
+.footer-links {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.footer-links a {
+    color: gray;
+    text-decoration: none;
+    margin: 5px 0;
+    user-select: none;
+    outline: none;
+}
+
+.footer-links a:hover {
+    text-decoration: none;
+    opacity: 0.8;
+}
+
+.footer-title {
+    text-align: center;
+    flex: 0 0 auto;
+}
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 72ac68f..e5e534f 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -4,7 +4,18 @@ import './Footer.css';
 const Footer = () => {
     return (
         <footer className="footer">
-            <p>&copy; {new Date().getFullYear()} Jake Runyan</p>
+            <div className="footer-links left">
+                <a href="https://github.com/runyanjake/jakesphotos" rel="noopener noreferrer">GitHub</a>
+                <a href="https://www.instagram.com/jakerunyanphotography" rel="noopener noreferrer">Instagram</a>
+            </div>
+            <div className="footer-title">
+                <p>&copy; {new Date().getFullYear()} Jake Runyan</p>
+            </div>
+            <div className="footer-links right">
+                <a href="/">Home</a>
+                <a href="/contact">Contact</a>
+                <a href="/about">About</a>
+            </div>
         </footer>
     );
 };