Update contact, about, navbar, and 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 About from './components/About';
 import Footer from './components/Footer';
 
 const App = () => {
@@ -13,9 +14,10 @@ const App = () => {
                 <Routes>
                     <Route path="/" element={<Home />} />
                     <Route path="/contact" element={<Contact />} />
+                    <Route path="/about" element={<About />} />
                 </Routes>
+                <Footer />
             </div>
-            <Footer />
         </Router>
     );
 };

src/components/About.css

@@ -0,0 +1,46 @@
+.about-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%; /* Full width container */
+    height: 100vh; /* Full height of viewport */
+    background-color: #333;
+}
+
+.about-content {
+    width: 33%; /* 1/3 of the viewport width */
+    max-width: 800px; /* Limit maximum width */
+    padding: 20px;
+    background-color: #222;
+    border: 1px solid black; /* Light border for contrast */
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+    border-radius: 10px; /* Rounded corners */
+    text-align: center; /* Center align headers and image */
+}
+
+@media (max-width: 768px) {
+    .about-content {
+        width: 90%; /* Full width on smaller screens */
+    }
+}
+
+.about-image {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    margin-bottom: 20px;
+    object-fit: cover;
+}
+
+.about-title {
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+    color: whitesmoke;
+}
+
+.about-content p {
+    text-align: left;
+    color: #999;
+    line-height: 1.6;
+    margin-bottom: 15px;
+}

src/components/About.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import './About.css';
+
+const About = () => {
+    return (
+        <div className="about-container">
+            <div className="about-content">
+                <img 
+                    src="https://gallery.whitney.rip/api/v1/t/287329d8835b299400819437c9c2a2d192041159/2tdm690t/fit_4096" 
+                    alt="Jake" 
+                    className="about-image" 
+                />
+                <h1 className="about-title">About Me</h1>
+                <p>
+                    I'm Jake, a small time photographer out of the Bay Area. I started shooting as a kid on my dad's old 
+                    Canon EOS 60D, and now have graduated to owning my own gear. Having an artistic outlet has always been
+                    a force of balance for me, and with a background in video and photo editing, this has been a fun one.
+                </p>
+                <p>
+                    My current setup is a Sony Alpha 6300 with a 27mm pancake lens. This budget setup was perfect for bringing
+                    my camera along on bike rides, as cycing is another hobby. You can find me on Youtube as Jake's West Coast.
+                    My current photography interests include capturing the beauty of the Bay Area and California coast on 
+                    our bike rides, as well as moments in my everyday life.
+                </p>
+                <p>
+                    If you'd like to learn more about Jake, the person, you can find more at my instagram @runyanjake or on my 
+                    personal website jake.runyan.dev.
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default About;

src/components/Contact.css

@@ -0,0 +1,17 @@
+.contact {
+    background-color: #333;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+.contact h1 {
+    color:white;
+    font-weight: bold;
+}
+
+.contact p {
+    color:white;
+}

src/components/Contact.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import './Contact.css';
 
 const Contact = () => {
     return (
@@ -7,6 +8,7 @@ const Contact = () => {
             <Helmet><title>Contact</title></Helmet>
             <h1>Contact Me</h1>
             <p>Email: jake@runyan.dev</p>
+            <p>Instagram: @jakerunyanphotography</p>
         </div>
     );
 };

src/components/Navbar.css

@@ -1,34 +1,59 @@
 .navbar {
     display: flex;
-    justify-content: space-between; /* Space between logo, title, and icons */
+    justify-content: space-between;
-    align-items: center; /* Center items vertically */
+    align-items: center;
-    background-color: #0b0b0b; /* Background color of the navbar */
+    background-color: #0b0b0b;
-    padding: 10px 20px; /* Padding for the navbar */
+    padding: 10px 20px;
+    gap: 10px;
+}
+
+.navbar-logo {
+    display: flex;
+    align-items: center;
+    gap: 15px;
 }
 
 .navbar-logo .logo {
-    height: 50px; /* Set a height for the logo */
+    height: 50px;
-    border-radius: 10px; /* Rounded corners for the logo */
+    border-radius: 10px;
+}
+
+.navbar-links {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
+.navbar-links a {
+    color: white;
+    text-decoration: none;
+    font-family: 'Arial', sans-serif;
+    font-size: 16px;
+}
+
+.navbar-links a:hover {
+    text-decoration: underline;
 }
 
 .navbar-title h1 {
-    color: white; /* Text color */
+    color: white;
-    font-family: 'Arial', sans-serif; /* Specify your desired font */
+    font-family: 'Arial', sans-serif;
-    font-size: 24px; /* Font size for the title */
+    font-size: 24px;
-    margin: 0; /* Remove default margin */
+    margin: 0;
 }
 
 .navbar-icons {
-    display: flex; /* Use flexbox for icons */
+    display: flex;
-    gap: 15px; /* Space between icons */
+    align-items: center;
+    gap: 15px;
 }
 
 .navbar-icons .icon {
-    height: 30px; /* Set a height for the icons */
+    height: 30px;
-    width: 30px; /* Set a width for the icons */
+    width: 30px;
-    transition: transform 0.2s; /* Smooth transition for hover effect */
+    transition: transform 0.2s;
 }
 
 .navbar-icons .icon:hover {
-    transform: scale(1.1); /* Scale up the icon on hover */
+    transform: scale(1.1);
-}
+}

src/components/Navbar.js

@@ -4,10 +4,13 @@ import './Navbar.css';
 import logo from './static/navbar-logo.png';
 import github_dark from './static/github-dark.png';
 import github_light from './static/github-light.png';
+import instagram_dark from './static/instagram-dark.png';
+import instagram_light from './static/instagram-light.png';
 
 const Navbar = () => {
     const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const githubIcon = isDarkMode ? github_light : github_dark; //Icons are on dark background.
+    const githubIcon = isDarkMode ? github_light : github_dark;
+    const instagramIcon = isDarkMode ? instagram_light : instagram_dark;
 
     return (
         <nav className="navbar">
@@ -15,17 +18,24 @@ const Navbar = () => {
                 <Link to="/">
                     <img src={logo} alt="Logo" className="logo" />
                 </Link>
+                <div className="navbar-links">
+                    <Link to="/contact">Contact</Link>
+                    <Link to="/about">About</Link>
+                </div>
             </div>
             <div className="navbar-title">
                 <h1>Jake Runyan Photography</h1>
             </div>
             <div className="navbar-icons">
+                <a href="https://www.instagram.com/jakerunyanphotography" target="_blank" rel="noopener noreferrer">
+                    <img src={instagramIcon} alt="Instagram" className="icon" title="My Instagram" />
+                </a>
                 <a href="https://github.com/runyanjake/jakesphotos" target="_blank" rel="noopener noreferrer">
-                    <img src={githubIcon} alt="GitHub" className="icon" title="This Website's Source Code!"/>
+                    <img src={githubIcon} alt="GitHub" className="icon" title="This Website's Source Code!" />
                 </a>
             </div>
         </nav>
     );
 };
 
-export default Navbar;
+export default Navbar;