From 9825666730b0322940e42ee2d582a3dceb924b6f Mon Sep 17 00:00:00 2001 From: nicky Date: Mon, 15 Jun 2026 02:36:35 -0400 Subject: [PATCH 1/9] feat: built navbar component with active section tracking --- app/globals.css | 1 + app/layout.tsx | 3 +- components/Navbar.tsx | 65 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 components/Navbar.tsx diff --git a/app/globals.css b/app/globals.css index c8e5470..1376634 100644 --- a/app/globals.css +++ b/app/globals.css @@ -32,4 +32,5 @@ body { background: var(--color-page-background); color: var(--color-text-primary); font-family: var(--font-sans); + scroll-behavior: smooth; } diff --git a/app/layout.tsx b/app/layout.tsx index 9015e10..ff23cf3 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", @@ -26,7 +27,7 @@ export default function RootLayout({ + > {children} diff --git a/components/Navbar.tsx b/components/Navbar.tsx new file mode 100644 index 0000000..dd33141 --- /dev/null +++ b/components/Navbar.tsx @@ -0,0 +1,65 @@ +"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 50% visible in viewport yuhh */ + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setActiveSection(entry.target.id); + } + }); + }, + { threshold: 0.5 }, + ); + + /* loops thru each array and if it exist, it will observe section for updates */ + 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 ( + + ); +} \ No newline at end of file From 0bfa63cafc2d3fbb34a3f320e914dce5eb9c736e Mon Sep 17 00:00:00 2001 From: Nicole Bustos Date: Mon, 15 Jun 2026 02:59:56 -0400 Subject: [PATCH 2/9] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- components/Navbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Navbar.tsx b/components/Navbar.tsx index dd33141..3b23735 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -12,7 +12,7 @@ export default function Navbar() { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { - if (entry.isIntersecting) { + if (entry.isIntersecting && entry.intersectionRatio >= 0.5) { setActiveSection(entry.target.id); } }); From 1bda2f0cb83022968e799191af2709900de82d1c Mon Sep 17 00:00:00 2001 From: Nicole Bustos Date: Mon, 15 Jun 2026 03:00:13 -0400 Subject: [PATCH 3/9] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- components/Navbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 3b23735..0a523a5 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -35,7 +35,7 @@ export default function Navbar() { /* contains navbar w gpk tiny logo on left and blurs anything near navbar*/ return ( -