Initial portfolio commit (Next.js + Docker + Gitea integration)

components/navbar.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+
+export default function Navbar() {
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handler = () => setScrolled(window.scrollY > 8);
+    window.addEventListener("scroll", handler);
+    return () => window.removeEventListener("scroll", handler);
+  }, []);
+
+  return (
+    <motion.header
+      initial={{ opacity: 0, y: -12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.45 }}
+      className={`sticky top-0 z-50 transition-all duration-300 ${
+        scrolled ? "glass border-b border-black/10" : "bg-transparent"
+      }`}
+    >
+      <div className="mx-auto max-w-6xl px-6 h-16 flex items-center justify-between">
+        <a
+          href="/"
+          className="text-sm font-semibold tracking-tight text-black/85 transition hover:text-black"
+        >
+          dewinnebrian
+        </a>
+
+        <nav className="flex items-center gap-8 text-sm text-black/65">
+          <a href="/#projects" className="transition hover:text-black">
+            Projects
+          </a>
+          <a href="/lab" className="transition hover:text-black">
+            Lab
+          </a>
+          <a
+            href="mailto:website+dewinnebrian@gmail.com"
+            className="transition hover:text-black"
+          >
+            Contact
+          </a>
+        </nav>
+      </div>
+
+      {scrolled && (
+        <div className="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-black/10 to-transparent" />
+      )}
+    </motion.header>
+  );
+}