diff --git a/app/background.css b/app/background.css index b332ce6..a1f2b07 100644 --- a/app/background.css +++ b/app/background.css @@ -19,7 +19,7 @@ background-image: radial-gradient( circle at 1px 1px, - color-mix(in oklch, var(--foreground) 25%, transparent) 1px, + color-mix(in oklch, var(--foreground) 15%, transparent) 1px, transparent 0 ); diff --git a/app/layout.tsx b/app/layout.tsx index af64a71..c9ce37d 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -4,6 +4,7 @@ import "./globals.css"; import { cn } from "@/lib/utils"; import { ThemeProvider } from "../components/theme-provider"; import BackgroundEffects from "../components/custom/background-effects"; +import Navbar from "../components/custom/navbar"; const inter = Inter({subsets:['latin'],variable:'--font-sans'}); @@ -32,17 +33,16 @@ export default function RootLayout({ lang="en" suppressHydrationWarning className={cn("h-full", "antialiased", geistSans.variable, geistMono.variable, "font-sans", inter.variable)} > - + -
- -
- {children} -
+ + +
+ {children}
diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx new file mode 100644 index 0000000..a538a56 --- /dev/null +++ b/components/custom/navbar.tsx @@ -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 ( +
+ + +
+ ) +} \ No newline at end of file