nico/byhaider-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(nav): styling new header

Browse Source
This commit is contained in:
Nico Haider
2026-04-14 21:16:53 +02:00
parent 526603dc63
commit ac258ea95b
2 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/page.tsx
+17 -1
View File
@@ -1,6 +1,22 @@
export default function Home() { export default function Home() {
return ( return (
<div className="flex flex-col flex-1"> <div className="flex flex-col flex-1 h-[2000px]">
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
</div> </div>
); );
} }
components/custom/navbar.tsx
+19 -18
View File
@@ -9,49 +9,50 @@ export default function Navbar() {
useEffect(() => { useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 10) const onScroll = () => setScrolled(window.scrollY > 10)
onScroll()
window.addEventListener("scroll", onScroll) window.addEventListener("scroll", onScroll)
return () => window.removeEventListener("scroll", onScroll) return () => window.removeEventListener("scroll", onScroll)
}, []) }, [])
return ( return (
<header className="fixed top-0 left-0 w-full z-50 flex justify-center pt-4"> <header className="sticky top-0 left-0 w-full z-50 flex justify-center p-10">
<nav <nav
className={cn( className={cn(
"flex items-center transition-all duration-500", "flex-1 flex items-center justify-between px-7 py-4 rounded-full transition-all duration-700",
scrolled scrolled
? ` ? [
px-6 py-3 "border border-foreground/10",
bg-[rgba(37,37,37,0.6)] "backdrop-blur-xl backdrop-saturate-150",
backdrop-blur-[10px] "shadow-[0_4px_24px_-4px_hsl(0_0%_0%/0.12),inset_0_1px_0_0_hsl(0_0%_100%/0.12)]",
rounded-full ].join(" ")
shadow-[0_20px_60px_rgba(0,0,0,0.65)] : "border-transparent bg-transparent"
ring-1 ring-white/10
`
: `
px-6 py-3
bg-transparent
`
)} )}
> >
<ul className="flex items-center gap-8 text-sm text-white/80"> <h1 className={cn("text-4xl font-medium")}>bH</h1>
<ul className="flex items-center gap-8 text-sm text-foreground/60">
<li> <li>
<Link href="/" className="hover:text-white transition"> <Link href="/" className="hover:text-foreground transition">
Home Home
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/about" className="hover:text-white transition"> <Link href="/about" className="hover:text-foreground transition">
About Me About Me
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/projects" className="hover:text-white transition"> <Link href="/projects" className="hover:text-foreground transition">
Projects Projects
</Link> </Link>
</li> </li>
</ul> </ul>
<div></div>
</nav> </nav>
</header> </header>
) )