feat: add login page

frontend/package-lock.json

@@ -11,6 +11,7 @@
         "@tailwindcss/vite": "^4.1.18",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "react-router-dom": "^7.13.0",
         "tailwindcss": "^4.1.18"
       },
       "devDependencies": {
@@ -2155,6 +2156,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3351,6 +3365,44 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.0.tgz",
+      "integrity": "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.0.tgz",
+      "integrity": "sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.13.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3421,6 +3473,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

frontend/package.json

@@ -13,6 +13,7 @@
     "@tailwindcss/vite": "^4.1.18",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-router-dom": "^7.13.0",
     "tailwindcss": "^4.1.18"
   },
   "devDependencies": {

frontend/src/App.tsx

@@ -1,18 +1,33 @@
 import "./App.css";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Navigation from "./components/Navigation.tsx";
 import Footer from "./components/Footer.tsx";
 import Home from "./pages/Home.tsx";
 import About from "./components/Skills.tsx";
+import Login from "./pages/Login.tsx";
+
 function App() {
   return (
+    <BrowserRouter>
       <div className="min-h-screen flex flex-col">
         <Navigation />
         <main className="flex-grow">
+          <Routes>
+            <Route
+              path="/"
+              element={
+                <>
                   <Home />
                   <About />
+                </>
+              }
+            />
+            <Route path="/login" element={<Login />} />
+          </Routes>
         </main>
         <Footer />
       </div>
+    </BrowserRouter>
   );
 }
 

frontend/src/components/Navigation.tsx

@@ -1,12 +1,100 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
+
+interface User {
+  name?: string;
+  email?: string;
+  avatar?: string;
+}
 
 export default function Navigation() {
   const [isOpen, setIsOpen] = useState(false);
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    checkAuth();
+  }, []);
+
+  const checkAuth = async () => {
+    try {
+      const response = await fetch("/api/auth/session");
+      if (response.ok) {
+        const data = await response.json();
+        setUser(data.user);
+      }
+    } catch (error) {
+      console.error("Auth check failed:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const getInitials = (user: User): string => {
+    if (user.name) {
+      return user.name.substring(0, 2).toUpperCase();
+    }
+    if (user.email) {
+      return user.email.substring(0, 2).toUpperCase();
+    }
+    return "?";
+  };
+
+  const AccountAvatar = () => {
+    if (isLoading) {
+      return (
+        <div className="w-10 h-10 rounded-full bg-gray-200 animate-pulse" />
+      );
+    }
 
     return (
       <>
+        {user ? (
+          <div className="relative cursor-pointer">
+            {user.avatar ? (
+              <img
+                src={user.avatar}
+                alt={user.name || user.email || "User"}
+                className="w-10 h-10 rounded-full object-cover border-2 border-[hsl(270,73%,63%)]"
+              />
+            ) : (
+              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-semibold text-sm">
+                {getInitials(user)}
+              </div>
+            )}
+          </div>
+        ) : (
+          <a
+            href="/login"
+            className="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center hover:bg-gray-400 transition-colors"
+          >
+            <svg
+              className="w-6 h-6 text-gray-600"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+              />
+            </svg>
+          </a>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <>
+      {/* Account Avatar - Fixed position, synced with nav */}
+      <div className="hidden md:block fixed right-4 lg:right-8 top-3 z-50">
+        <AccountAvatar />
+      </div>
+
       <nav className="sticky top-0 z-50 py-3">
-        {/* Desktop */}
+        {/* Desktop Navigation */}
         <div className="hidden md:flex gap-8 lg:gap-12 justify-center">
           <a
             href="/"
@@ -28,10 +116,11 @@ export default function Navigation() {
           </a>
         </div>
 
-        {/* Mobile Burger Button */}
+        {/* Mobile */}
+        <div className="md:hidden flex justify-between items-center px-4">
           <button
             onClick={() => setIsOpen(!isOpen)}
-          className="md:hidden fixed left-4 top-4 z-50 btn btn-ghost btn-sm"
+            className="z-50 btn btn-ghost btn-sm"
           >
             <svg
               className="w-6 h-6"
@@ -56,6 +145,8 @@ export default function Navigation() {
               )}
             </svg>
           </button>
+          <AccountAvatar />
+        </div>
       </nav>
 
       {/* Mobile Menu */}
@@ -88,6 +179,22 @@ export default function Navigation() {
               >
                 Guestbook
               </a>
+
+              {user && (
+                <>
+                  <hr className="my-2" />
+                  <div className="py-3 px-4 text-sm text-gray-600">
+                    {user.name || user.email}
+                  </div>
+                  <a
+                    href="/logout"
+                    className="py-3 px-4 hover:bg-gray-100 rounded-lg transition-all text-red-600"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    Logout
+                  </a>
+                </>
+              )}
             </div>
           </div>
         </>

frontend/src/pages/Login.tsx

@@ -0,0 +1,79 @@
+export default function Login() {
+  const handleGitHubLogin = () => {
+    window.location.href = "/api/v1/auth/github";
+  };
+
+  return (
+    <div className="flex items-center justify-center px-4 py-12 md:py-0 md:min-h-[calc(100vh-200px)]">
+      <div className="max-w-md w-full">
+        {/* ASCII Art Header */}
+        <pre className="text-center mb-8 text-[10px] sm:text-xs lg:text-sm opacity-80 font-mono leading-tight select-none">
+          {`
+    ██╗      ██████╗  ██████╗ ██╗███╗   ██╗
+    ██║     ██╔═══██╗██╔════╝ ██║████╗  ██║
+    ██║     ██║   ██║██║  ███╗██║██╔██╗ ██║
+    ██║     ██║   ██║██║   ██║██║██║╚██╗██║
+    ███████╗╚██████╔╝╚██████╔╝██║██║ ╚████║
+    ╚══════╝ ╚═════╝  ╚═════╝ ╚═╝╚═╝  ╚═══╝
+
+    ╔════════════════════════════════════╗
+    ║     Secure GitHub Authentication   ║
+    ╚════════════════════════════════════╝
+`}
+        </pre>
+
+        {/* Login Card */}
+        <div className="border border-gray-700 rounded-lg p-6 sm:p-8 bg-black/30 backdrop-blur-sm shadow-xl">
+          <h1 className="text-xl sm:text-2xl font-bold mb-2 text-center">
+            Welcome Back
+          </h1>
+          <p className="text-gray-400 text-center mb-6 sm:mb-8 text-sm">
+            Sign in to continue to your account
+          </p>
+
+          {/* GitHub Login Button */}
+          <button
+            onClick={handleGitHubLogin}
+            className="w-full bg-white text-black hover:bg-gray-200 active:scale-95 transition-all duration-300 py-3 sm:py-4 px-6 rounded-lg font-semibold flex items-center justify-center gap-3 group shadow-lg hover:shadow-xl"
+          >
+            <svg
+              className="w-5 h-5 sm:w-6 sm:h-6 group-hover:scale-110 transition-transform"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fillRule="evenodd"
+                d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                clipRule="evenodd"
+              />
+            </svg>
+            <span className="text-sm sm:text-base">Login via GitHub</span>
+          </button>
+
+          {/* Divider */}
+          <div className="relative my-6">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-gray-700"></div>
+            </div>
+            <div className="relative flex justify-center text-xs">
+              <span className="bg-black/30 px-2 text-gray-500">
+                secure authentication
+              </span>
+            </div>
+          </div>
+
+          {/* Footer note */}
+          <p className="text-gray-500 text-xs text-center">
+            By signing in, you agree to our{" "}
+            <a
+              href="/terms"
+              className="text-[hsl(270,73%,63%)] hover:underline"
+            >
+              terms of service
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}