diff --git a/app/globals.css b/app/globals.css index c8e5470..2ecba92 100644 --- a/app/globals.css +++ b/app/globals.css @@ -10,7 +10,17 @@ --card-border: #3A2152; --accent: #842BC4; --accent-light: #C47BFF; +} + +html { + scroll-behavior: smooth; + scroll-padding-top: 4rem; +} +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } } /* Will generate utility classes w Tailwind*/ diff --git a/app/layout.tsx b/app/layout.tsx index 9015e10..8b71a5c 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; +import Navbar from "@/components/Navbar"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -27,6 +28,7 @@ export default function RootLayout({ + {children} diff --git a/app/page.tsx b/app/page.tsx index c1e934a..92624f4 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,7 +2,7 @@ import AboutSection from "@/components/AboutSection"; export default function Home() { return ( -
+
{/* START OF THE HOME SECTION */}
{/* Home code goes here */} diff --git a/components/.gitkeep b/components/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/components/Navbar.tsx b/components/Navbar.tsx new file mode 100644 index 0000000..080a895 --- /dev/null +++ b/components/Navbar.tsx @@ -0,0 +1,66 @@ +"use client"; + +import { useEffect, useState } from "react"; + +const sections = ["home", "about", "challenges", "team"]; + +export default function Navbar() { + const [activeSection, setActiveSection] = useState("home"); + + /* views each section and updates when it crosses the middle band of the viewport yuhh */ + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setActiveSection(entry.target.id); + } + }); + }, + { threshold: 0, rootMargin: "-40% 0px -40% 0px" }, + ); + + // Observe each section element (if present). + sections.forEach((id) => { + const element = document.getElementById(id); + + if (element) { + observer.observe(element); + } + }); + + /* if navbar component ever gets removed, this stops wasting resources in the background (in case)*/ + return () => observer.disconnect(); + }, []); + + /* contains navbar w gpk tiny logo on left and blurs anything near navbar*/ + return ( + + ); +}