From 71687100d7174690ddebcb4a5b07b49b2a480722 Mon Sep 17 00:00:00 2001
From: Jake Runyan <runyanjake@gmail.com>
Date: Wed, 25 Dec 2024 13:25:26 -1000
Subject: [PATCH] Add Footer

---
 src/App.js                |  2 ++
 src/components/Contact.js |  4 +---
 src/components/Footer.css |  8 ++++++++
 src/components/Footer.js  | 12 ++++++++++++
 src/components/Home.css   | 20 ++++++++++----------
 5 files changed, 33 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Footer.css
 create mode 100644 src/components/Footer.js

diff --git a/src/App.js b/src/App.js
index f9ee400..b662d6d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Navbar from './components/Navbar';
 import Home from './components/Home';
 import Contact from './components/Contact';
+import Footer from './components/Footer';
 
 const App = () => {
     return (
@@ -14,6 +15,7 @@ const App = () => {
                     <Route path="/contact" element={<Contact />} />
                 </Routes>
             </div>
+            <Footer />
         </Router>
     );
 };
diff --git a/src/components/Contact.js b/src/components/Contact.js
index 3219199..eab98b1 100644
--- a/src/components/Contact.js
+++ b/src/components/Contact.js
@@ -4,9 +4,7 @@ const Contact = () => {
     return (
         <div className="contact">
             <h1>Contact Me</h1>
-            <p>Email: jake@example.com</p>
-            <p>Phone: (123) 456-7890</p>
-            {/* Add more contact information as needed */}
+            <p>Email: jake@runyan.dev</p>
         </div>
     );
 };
diff --git a/src/components/Footer.css b/src/components/Footer.css
new file mode 100644
index 0000000..8d44d25
--- /dev/null
+++ b/src/components/Footer.css
@@ -0,0 +1,8 @@
+.footer {
+    background-color: #333;
+    text-align: center;
+    padding: 10px 0;
+    position: relative;
+    bottom: 0; /* Stick to the bottom */
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..6010941
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import './Footer.css';
+
+const Footer = () => {
+    return (
+        <footer className="footer">
+            <p>&copy; {new Date().getFullYear()} Jake Runyan. All rights reserved.</p>
+        </footer>
+    );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/Home.css b/src/components/Home.css
index 7f60855..c243d6f 100644
--- a/src/components/Home.css
+++ b/src/components/Home.css
@@ -1,18 +1,18 @@
 .gallery {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive columns */
-    margin: 0 auto; /* Adjust for spacing */
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    margin: 0 auto;
 }
 
 .gallery-photo {
-    margin: 4px; /* Vertical padding between items */
-    margin-left: 4px; /* Horizontal padding between items */
-    margin-right: 4px; /* Horizontal padding between items */
-    border-radius: 8px; /* Optional: Add rounded corners */
-    display: block; /* Ensure images are block elements */
-    height: auto; /* Maintain aspect ratio */
-    max-width: 30vw;
-    object-fit: cover; /* Ensure images cover the area without distortion */
+    margin: 4px;
+    margin-left: 4px;
+    margin-right: 4px;
+    border-radius: 8px;
+    display: block;
+    height: auto;
+    max-width: 30vw; /* Do not mix with max-height! */
+    object-fit: cover;
 }
 
 /* Responsive adjustments */