project init

frontend/components/header.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import { Menu, X } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+
+const navItems = [
+  { label: "About", href: "#about" },
+  { label: "Stack", href: "#stack" },
+  { label: "Philosophy", href: "#philosophy" },
+  { label: "Projects", href: "#projects" },
+  { label: "Contact", href: "#contact" },
+]
+
+export function Header() {
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+    return (
+        <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
+            <div className="max-w-4xl mx-auto px-6 py-4">
+                <nav className="flex items-center justify-between">
+                    <Link
+                        href="/"
+                        className="font-mono text-lg font-semibold text-foreground hover:text-primary transition-colors"
+                    >
+                        atticl
+                    </Link>
+
+                    {/* Desktop Nav */}
+                    <ul className="hidden md:flex items-center gap-8">
+                        {navItems.map((item) => (
+                            <li key={item.href}>
+                                <Link
+                                    href={item.href}
+                                    className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                                >
+                                    {item.label}
+                                </Link>
+                            </li>
+                        ))}
+                    </ul>
+
+                    {/* Mobile Nav */}
+                    <button
+                        className="md:hidden text-muted-foreground hover:text-foreground"
+                        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+                        aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
+                    >
+                        {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
+                    </button>
+                </nav>
+
+                {/* Mobile Nav */}
+                {mobileMenuOpen && (
+                    <ul className="md:hidden mt-4 pb-4 flex flex-col gap4">
+                        {navItems.map((item) => (
+                            <li key={item.href}>
+                                <Link
+                                    href={item.href}
+                                    className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                                >
+                                    {item.label}
+                                </Link>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+        </header>
+    )
+}