Add Smooth Scrolling and Active Navigation Highlight

[Gowthamimudam]

🚀 Feature Request
The navigation bar currently redirects to sections instantly without smooth transitions, and active sections are not visually highlighted.

This enhancement will improve navigation experience and provide better user interaction on the landing page.

📌 Expected Behavior

• Smooth scrolling when clicking navbar items
• Highlight active section in navbar while scrolling
• Improve navigation responsiveness

✅ Requirements

• Implement smooth scrolling using CSS/JavaScript
• Add active state styling for navbar links
• Ensure compatibility across screen sizes
• Keep animations smooth and lightweight

[github-actions]

Thank you for creating this issue! We'll look into it as soon as possible. Your contributions are highly appreciated! 😊

[Gowthamimudam]

Hello @SB2318 👋

I would like to contribute to this issue under GSSoC'26.

I have experience with frontend enhancements and will implement smooth scrolling and active navbar highlighting while keeping the design responsive and user-friendly.

Please assign this issue to me 🚀
Thank you!

[KaparthyReddy]

Hi @SB2318, I would love to implement this smooth scrolling and active navigation tracking. Tracking active viewport elements incorrectly can severely tank rendering frames per second (FPS), so I'll design this with a performance-first approach.

My Technical Implementation Plan:

Hardware-Accelerated Smooth Scroll: I will implement the transition mapping using native CSS smooth scrolling rules (scroll-behavior: smooth) or clean DOM element.scrollIntoView({ behavior: 'smooth' }) pathways, ensuring native hardware-accelerated rendering without needing bulky layout libraries.

High-Performance Section Tracking via IntersectionObserver: Instead of hooking up a continuous, resource-heavy window scroll event listener, I will use a native browser IntersectionObserver API layout. This lets us efficiently track exactly when sections enter or exit the viewport thresholds and toggles the active styling classes instantly with near-zero CPU overhead.

Debounced & Accessible Layout States: I will back the observer with a lightweight tracking state, ensuring navbar link state changes map clean high-visibility aria attributes (like aria-current="page") for assistive screen readers while maintaining visual style synchronization.

I have my local frontend environment spin up and can deploy a clean, light, zero-dependency solution quickly. Please assign this to me!
/assign gssoc26

[SB2318]

Okay, will update you soon.

🚀 Feature Request The navigation bar currently redirects to sections instantly without smooth transitions, and active sections are not visually highlighted.

This enhancement will improve navigation experience and provide better user interaction on the landing page.

📌 Expected Behavior

• Smooth scrolling when clicking navbar items
• Highlight active section in navbar while scrolling
• Improve navigation responsiveness

✅ Requirements

• Implement smooth scrolling using CSS/JavaScript
• Add active state styling for navbar links
• Ensure compatibility across screen sizes
• Keep animations smooth and lightweight

[opinder8699]

Hi @SB2318 i would love to work on this issue under gssoc'26.Please assign this issue to me./assign

[SruthikaShri5]

Hi @SB2318,

I would like to work on this issue under GSSoC'26.

I’ve reviewed the expected behavior and plan to implement smooth section scrolling along with active navigation highlighting to improve the overall landing page experience. I’ll ensure the transitions feel clean and responsive across different screen sizes while keeping the implementation lightweight and user-friendly.

I also plan to refine the active link styling so users can clearly identify their current section while navigating through the page.

Please assign this issue to me. I’d love to contribute to this enhancement.