Seed: portfolio template (18 files)

2026-07-23 22:09:41 +00:00
parent e827cd994d
commit 3d15469ec0
1 changed files with 52 additions and 0 deletions
@@ -0,0 +1,52 @@
 import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { Menu } from "lucide-react";
 import { ThemeToggle } from "@/components/ThemeToggle";
 export default function Header() {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", fn);
    return () => window.removeEventListener("scroll", fn);
  }, []);
  const links = [
    { label: "Work", to: "/work" },
    { label: "About", to: "/about" },
    { label: "Contact", to: "/contact" },
  ];
  return (
    <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 \${scrolled ? "bg-background/80 backdrop-blur-lg border-b shadow-sm" : "bg-transparent"}`}>
      <div className="mx-auto max-w-6xl flex items-center justify-between px-6 py-5">
        <Link to="/" className="text-lg font-bold tracking-tight">Alex Rivera</Link>
        <nav className="hidden md:flex items-center gap-8">
          {links.map((l) => (
            <Link key={l.to} to={l.to} className="text-sm text-muted-foreground hover:text-foreground transition-colors">{l.label}</Link>
          ))}
          <ThemeToggle />
          <Button asChild size="sm" className="active:scale-[0.98]"><Link to="/contact">Let's Talk</Link></Button>
        </nav>
        <Sheet open={open} onOpenChange={setOpen}>
          <SheetTrigger asChild className="md:hidden">
            <Button variant="ghost" size="icon"><Menu className="h-5 w-5" /></Button>
          </SheetTrigger>
          <SheetContent side="right" className="w-72">
            <nav className="mt-8 flex flex-col gap-4">
              {links.map((l) => (
                <Link key={l.to} to={l.to} className="text-lg font-medium" onClick={() => setOpen(false)}>{l.label}</Link>
              ))}
              <Button asChild className="mt-4 w-full"><Link to="/contact" onClick={() => setOpen(false)}>Let's Talk</Link></Button>
              <ThemeToggle />
            </nav>
          </SheetContent>
        </Sheet>
      </div>
    </header>
  );
 }