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

feat(core): first header prototype and background styling

Browse Source
This commit is contained in:
Nico Haider
2026-04-13 23:48:22 +02:00
parent a90cf0561f
commit 526603dc63
3 changed files with 65 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/background.css
+1 -1
View File
@@ -19,7 +19,7 @@
background-image: radial-gradient( background-image: radial-gradient(
circle at 1px 1px, circle at 1px 1px,
color-mix(in oklch, var(--foreground) 25%, transparent) 1px, color-mix(in oklch, var(--foreground) 15%, transparent) 1px,
transparent 0 transparent 0
); );
app/layout.tsx
+6 -6
View File
@@ -4,6 +4,7 @@ import "./globals.css";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { ThemeProvider } from "../components/theme-provider"; import { ThemeProvider } from "../components/theme-provider";
import BackgroundEffects from "../components/custom/background-effects"; import BackgroundEffects from "../components/custom/background-effects";
import Navbar from "../components/custom/navbar";
const inter = Inter({subsets:['latin'],variable:'--font-sans'}); const inter = Inter({subsets:['latin'],variable:'--font-sans'});
@@ -32,17 +33,16 @@ export default function RootLayout({
lang="en" suppressHydrationWarning lang="en" suppressHydrationWarning
className={cn("h-full", "antialiased", geistSans.variable, geistMono.variable, "font-sans", inter.variable)} 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 <ThemeProvider
attribute="class" attribute="class"
defaultTheme="system" defaultTheme="system"
enableSystem enableSystem
> >
<div className="relative isolate min-h-screen"> <BackgroundEffects />
<BackgroundEffects /> <Navbar/>
<div className="relative z-10"> <div className="relative z-10">
{children} {children}
</div>
</div> </div>
</ThemeProvider> </ThemeProvider>
</body> </body>
components/custom/navbar.tsx
+58
View File
@@ -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>
)
}