feat: built navbar component with active section tracking

[nickycodezz]

Pull Request

Description

Creates the Navbar component with GPK logo on the left and anchor links (Home, About, Challenges, Team) on the right. Active section is tracked via IntersectionObserver and highlighted with a filled white box. Navbar is sticky, sits above all content, and includes a backdrop blur for readability over hero content. Imported into layout.tsx so it renders on every page. Also adds scroll-behavior: smooth to globals.css.

Closes Notion task 'Build Navbar Component'. (https://app.notion.com/p/graphicsprogrammingknights/T4-Navbar-Build-Navbar-component-37b4589a9ffa80a48c89ee3e72d14244?source=copy_link)

Type of Change

• feat: New feature
• fix: Bug fix
• chore: Maintenance (dependencies, config, etc.)
• docs: Documentation only
• style: Code style (formatting, no logic change)
• refactor: Code refactor (no new feature or fix)

Changes Made

• components/Navbar.tsx (created)
• app/layout.tsx (modified)
• app/globals.css (modified)

Screenshots (if applicable)

Checklist

• [ x ] My code follows the project's style guidelines
• [ x ] I have performed a self-review of my code
• [ x ] I have tested my changes locally
• [ x ] npm run lint passes without errors
• [ x ] npm run build completes successfully

Related Issues

[Copilot]

Pull request overview

Adds a site-wide sticky Navbar with section anchor links and active-section highlighting, plus global smooth-scrolling, to support single-page navigation on the landing page.

Changes:

• Introduces a new client-side Navbar component that tracks the active section via IntersectionObserver.
• Renders the Navbar in app/layout.tsx so it appears on every page.
• Enables smooth scrolling for anchor navigation in global styles.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 7 comments.

File	Description
components/Navbar.tsx	New sticky navbar with anchor links and IntersectionObserver-based active section tracking
app/layout.tsx	Imports and renders Navbar globally via the root layout
app/globals.css	Adds smooth scrolling behavior to global styles

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Implemented in 34953b7: moved scroll-behavior: smooth; from body to :root in app/globals.css.

[sebastian-noel]

Made a few fixes:

• IntersectionObserver threshold changed from 0.5 to 0 with rootMargin: "-40% 0px -40% 0px" -- the 0.5 threshold breaks on full-height sections since they can never be 50% visible in the viewport at once
• Added scroll-padding-top: 4rem to html so anchor links account for the sticky navbar height; also removed the erroneous pt-24 from <main> that was pushing all sections down
• Moved scroll-behavior: smooth out of the :root CSS variables block into its own html {} rule, and added a prefers-reduced-motion override for accessibility
• backdrop-blur-sm has no effect on an opaque background; changed bg-page-background to bg-page-background/10 so the blur is actually visible as content scrolls behind the navbar

[StevScripts]

Lgtm