Add Footer

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

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

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%;
+}

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;

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 */