From e2da62b475e3a2e191ebb37125af3b2ca28c8c0a Mon Sep 17 00:00:00 2001
From: Saurabh Kumar Bajpai <saurabhkumarbajpaiai@Saurabhs-MacBook-Air.local>
Date: Sun, 21 Jun 2026 22:40:23 +0530
Subject: [PATCH 1/2] feat: add active section highlighting for navbar
 navigation (#207)

Adds scroll-spy functionality using IntersectionObserver to detect which
section is currently in view and highlights the corresponding nav link.

- script.js: add initScrollSpy with IntersectionObserver (rootMargin -80px)
- styles.css: add .active styles for nav links (purple color + underline)
---
 public/script.js  | 41 +++++++++++++++++++++++++++++++++++++++++
 public/styles.css |  7 +++++++
 2 files changed, 48 insertions(+)

diff --git a/public/script.js b/public/script.js
index b3cd51a..d4e95a5 100644
--- a/public/script.js
+++ b/public/script.js
@@ -885,3 +885,44 @@
     initThemeFilter();
   }
 })();
+
+// Active Section Highlighting for Navbar
+(function () {
+  'use strict';
+
+  function initScrollSpy() {
+    const sections = document.querySelectorAll('section[id]');
+    const navLinks = document.querySelectorAll('.navbtn a.nav-link');
+
+    if (!sections.length || !navLinks.length) return;
+
+    const observer = new IntersectionObserver(
+      function (entries) {
+        entries.forEach(function (entry) {
+          if (entry.isIntersecting) {
+            navLinks.forEach(function (link) {
+              link.classList.remove('active');
+              if (link.getAttribute('href') === '#' + entry.target.id) {
+                link.classList.add('active');
+              }
+            });
+          }
+        });
+      },
+      {
+        rootMargin: '-80px 0px -50% 0px',
+        threshold: 0,
+      }
+    );
+
+    sections.forEach(function (section) {
+      observer.observe(section);
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initScrollSpy);
+  } else {
+    initScrollSpy();
+  }
+})();
diff --git a/public/styles.css b/public/styles.css
index 22459bf..6827bc3 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -2057,6 +2057,13 @@ html {
   width: 100%;
 }
 
+.navbtn ul li a.active {
+  color: var(--accent-purple);
+}
+
+.navbtn ul li a.active::after {
+  width: 100%;
+}
 
 
 @media (max-width: 768px) {

From aa24ec669d96f5a81a2d643b020738a29bbbb53a Mon Sep 17 00:00:00 2001
From: Saurabh Kumar Bajpai <saurabhkumarbajpaiai@Saurabhs-MacBook-Air.local>
Date: Wed, 24 Jun 2026 02:55:12 +0530
Subject: [PATCH 2/2] fix: add smooth scroll, focus-visible styles, and
 skeleton animation

---
 public/styles.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/public/styles.css b/public/styles.css
index 6827bc3..1bda673 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -2206,3 +2206,5 @@ html {
     padding-top: var(--spacing-lg);
   }
 }
+.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
+@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }