feat(core): first header prototype and background styling

2026-04-13 23:48:22 +02:00
parent a90cf0561f
commit 526603dc63
3 changed files with 65 additions and 7 deletions
@@ -19,7 +19,7 @@

  background-image: radial-gradient(
    circle at 1px 1px,
-    color-mix(in oklch, var(--foreground) 25%, transparent) 1px,
+    color-mix(in oklch, var(--foreground) 15%, transparent) 1px,
    transparent 0
  );

@@ -4,6 +4,7 @@ import "./globals.css";
 import { cn } from "@/lib/utils";
 import { ThemeProvider } from "../components/theme-provider";
 import BackgroundEffects from "../components/custom/background-effects";
+import Navbar from "../components/custom/navbar";

 const inter = Inter({subsets:['latin'],variable:'--font-sans'});

@@ -32,17 +33,16 @@ export default function RootLayout({
      lang="en" suppressHydrationWarning
      className={cn("h-full", "antialiased", geistSans.variable, geistMono.variable, "font-sans", inter.variable)}
    >
-      <body className="min-h-screen">
+      <body className="min-h-screen relative isolate">
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
        >
-          <div className="relative isolate min-h-screen">
-            <BackgroundEffects />
-            <div className="relative z-10">
-              {children}
-            </div>
+          <BackgroundEffects />
+          <Navbar/>
+          <div className="relative z-10">
+            {children}
          </div>
        </ThemeProvider>
      </body>
@@ -0,0 +1,58 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import Link from "next/link"
+import { cn } from "@/lib/utils"
+
+export default function Navbar() {
+  const [scrolled, setScrolled] = useState(false)
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 10)
+    window.addEventListener("scroll", onScroll)
+    return () => window.removeEventListener("scroll", onScroll)
+  }, [])
+
+  return (
+    <header className="fixed top-0 left-0 w-full z-50 flex justify-center pt-4">
+      
+      <nav
+        className={cn(
+          "flex items-center transition-all duration-500",
+          
+          scrolled
+            ? `
+              px-6 py-3
+              bg-[rgba(37,37,37,0.6)]
+              backdrop-blur-[10px]
+              rounded-full
+              shadow-[0_20px_60px_rgba(0,0,0,0.65)]
+              ring-1 ring-white/10
+            `
+            : `
+              px-6 py-3
+              bg-transparent
+            `
+        )}
+      >
+        <ul className="flex items-center gap-8 text-sm text-white/80">
+          <li>
+            <Link href="/" className="hover:text-white transition">
+              Home
+            </Link>
+          </li>
+          <li>
+            <Link href="/about" className="hover:text-white transition">
+              About Me
+            </Link>
+          </li>
+          <li>
+            <Link href="/projects" className="hover:text-white transition">
+              Projects
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  )
+}