54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
"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>
|
|
);
|
|
}
|