feat: UI elevation -- accessibility, scroll/load performance, motion polish, token consistency (#185)

* fix: correctness bugs in counter, particles, constellation, dates, keys

- AnimatedCounter: cancel rAF on unmount, support decimals (CGPA), drop redundant one-shot ref
- ParticleField: regenerate positions on count change (useMemo) to avoid buffer desync
- InteractiveConstellation: cancel rAF before restart so visibilitychange can't stack loops
- parseDate: guard unknown month (?? not ||) and non-finite year
- experienceHelpers: stable list keys for repeated bullet/skill strings

* perf: cut scroll-time paint/GPU cost and oversized images

- AuroraBlobs: animate transform (x/y) instead of left/top so the blurred
  background layer composites on the GPU instead of forcing per-frame layout
- SceneBackground: pause the 3D frameloop during active scroll (resume at rest)
  via Lenis velocity; keeps motion visible where it reads
- ShootingStars: fewer streaks on mobile (viewport-gated count)
- CertBadge: request Credly /size/220x220 thumbnails (43KB->25KB each across
  20 badges, sharper on retina) via render-time helper that survives the sync

* refactor: route raw hex/rgba/easing literals through design tokens

Replace hardcoded color/easing literals with the existing exports in
src/constants/theme.ts (TEXT_*, CYAN/PURPLE/GREEN/AMBER, GLASS_*, EASING.cinematic)
and --ch-* CSS channels across leaf section/card components. Byte-identical at
runtime; removes the per-component drift the token system was meant to prevent.

* feat: elevate UI with accessibility, mobile, motion and premium refinements

Accessibility (WCAG 2.2):
- skip-to-content link + main landmark; nav aria-label/current/expanded/controls
- MobileMenu is now a real dialog: focus trap, Escape, body scroll-lock, focus return
- focus-trap edge fix; contact form aria-invalid + inline error; success announced
- modal titles h3->h2; bare-key shortcut guard; spinner label dedup

State/UX correctness:
- contact: preserve sender name for the success screen, surface non-200 send errors,
  keep error toast until dismissed; GitHub calendar timeout fallback + link

Mobile/responsive:
- 44px touch targets, single breakpoint source, responsive menu width
- viewport-gated 3D scene (desktop only) and background layer counts

Motion/perf:
- once:true entrance reveals, press feedback, tabular-nums counters
- replace .section-darker backdrop-blur with gradient (kills the dominant
  fast-scroll repaint); NavBar no longer transitions blur radius; glass blur 12->10px
- remove cursor-following conic-gradient card border (calmer + cheaper per-frame paint)
- Lenis tuned (lerp) for responsive fast scroll; all scroll buttons routed through Lenis

Design system:
- wire MAX_WIDTH/token scales into sections; SectionHeader/GlassCard/modals/Toast
  through tokens; TEXT_MUTED bumped for AA contrast; delete dead BLUE token

* docs: changelog + version bump to 3.15.0

Document the accessibility, scroll/load performance, motion, and design-token
refinements from this release.

* fix(security): validate Credly host via URL parsing, not substring

CodeQL js/incomplete-url-substring-sanitization (high): url.includes("images.credly.com")
would match hostile URLs (images.credly.com.evil.com, ...?images.credly.com). Parse with
new URL() and compare hostname exactly.

Author: Sagargupta16

CHANGELOG.md

@@ -2,6 +2,35 @@
 
 All notable changes to this project are documented here. Follows [Semantic Versioning](https://semver.org/).
 
+## [3.15.0] - 2026-06-28
+
+### Added
+
+- **Accessibility**: skip-to-content link, `main` landmark, nav `aria-label`/`aria-current`/`aria-expanded`/`aria-controls`, contact-form inline error with `aria-invalid` + `role="alert"`, screen-reader announcement on send success
+- **MobileMenu** is now a real dialog -- focus trap, Escape to close, body scroll-lock, focus return to the trigger (reuses `useFocusTrap`)
+- **GitHub calendar**: explicit timeout fallback with a link to the live profile when the contribution data is slow
+- `MAX_WIDTH_WIDE` / `MAX_WIDTH_FORM` layout tokens; `--ch-red` channel; `credlyThumb` render-time image-resize helper
+
+### Changed
+
+- **Performance (scroll)**: replaced the full-width `.section-darker` backdrop-blur bands with gradient overlays (the dominant fast-scroll repaint), animated AuroraBlobs via `transform` instead of `left/top`, paused the 3D frameloop during active scroll, gated the 3D scene to desktop, stopped transitioning the nav blur radius, reduced glass blur 12->10px
+- **Performance (load)**: Credly badges now request `/size/220x220` thumbnails (~43KB->25KB each across 20 badges, sharper on retina)
+- **Scroll feel**: Lenis tuned to lerp-based smoothing for responsive fast scrolling; all in-page scroll actions routed through Lenis; `overscroll-behavior` added
+- **Design system**: routed raw hex/rgba/easing literals through `theme.ts` tokens and `--ch-*` channels across the component tree; wired `MAX_WIDTH*`/type tokens into sections; bumped `TEXT_MUTED` for WCAG AA contrast; removed the cursor-following conic-gradient card border for a calmer, cheaper hover
+- **Motion**: `once: true` on entrance reveals (no replay on scroll-up), press feedback on key controls, `tabular-nums` on counters
+
+### Fixed
+
+- **AnimatedCounter**: cancel rAF on unmount, render decimal values correctly (e.g. CGPA), drop redundant one-shot ref
+- **ParticleField**: regenerate positions when `count` changes to avoid buffer-length desync
+- **InteractiveConstellation**: cancel rAF before restart so a `visibilitychange` cannot stack render loops
+- **Contact form**: preserve sender name for the success screen, surface non-200 send responses instead of failing silently
+- `parseDate` guards unknown months/years; stable React keys for repeated list strings
+
+### Removed
+
+- Dead `BLUE` color token
+
 ## [3.14.0] - 2026-05-03
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
    "name": "portfolio-react",
-   "version": "3.14.0",
+   "version": "3.15.0",
    "type": "module",
    "private": true,
    "homepage": "https://sagargupta.online/portfolio-react/",

src/App.tsx

@@ -17,6 +17,7 @@ import InteractiveConstellation from "@components/ui/InteractiveConstellation";
 import SystemStatus from "@components/ui/SystemStatus";
 import { hasWebGL } from "@components/layout/Header/heroConstants";
 import { BreakpointProvider } from "@hooks/BreakpointProvider";
+import useBreakpoint from "@hooks/useBreakpoint";
 
 // Global interactive 3D background, lazy-loaded so Three.js stays out of the
 // initial bundle. Falls back to the 2D constellation when WebGL is unavailable.
@@ -35,6 +36,7 @@ const GitHub = lazy(() => import("@pages/github/GitHub"));
 
 const App = () => {
    const [webGLSupported] = useState(() => hasWebGL());
+   const { isMobile } = useBreakpoint();
 
    useEffect(() => {
       globalThis.history.scrollRestoration = "manual";
@@ -45,8 +47,13 @@ const App = () => {
       <ReactLenis
          root
          options={{
-            duration: 1,
-            easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+            // lerp-based smoothing (not a fixed duration) so a fast flick
+            // resolves quickly instead of being forced through a full 1s curve --
+            // keeps scrolling smooth but responsive when the user scrolls hard.
+            lerp: 0.1,
+            wheelMultiplier: 1.1,
+            touchMultiplier: 1.5,
+            syncTouch: false,
          }}
       >
          <BreakpointProvider>
@@ -56,7 +63,7 @@ const App = () => {
             <KeyboardNav />
             <AuroraBlobs />
             <ShootingStars />
-            {webGLSupported ? (
+            {webGLSupported && !isMobile ? (
                <ErrorBoundary fallback={<InteractiveConstellation />}>
                   <Suspense fallback={null}>
                      <SceneBackground />
@@ -67,8 +74,11 @@ const App = () => {
             )}
             <ParallaxElements />
             <div className="relative min-h-screen">
+               <a href="#main-content" className="skip-link">
+                  Skip to content
+               </a>
                <Nav />
-               <main>
+               <main id="main-content" tabIndex={-1}>
                   <Hero />
                   <Suspense fallback={<SectionLoader />}>
                      <SectionTransition variant="gradient-sweep" />

src/components/3d/ParticleField.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-unknown-property */
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useMemo } from "react";
 import { useFrame } from "@react-three/fiber";
 import * as THREE from "three";
 
@@ -20,7 +20,10 @@ interface ParticleFieldProps {
 
 const ParticleField = ({ count = 300 }: ParticleFieldProps) => {
    const ref = useRef<THREE.Points>(null);
-   const [positions] = useState(() => createParticlePositions(count));
+   // Regenerate when count changes (degraded mode / breakpoint cross). A one-shot
+   // useState would keep the old-length array while the bufferAttribute count
+   // changed, reading past/short the buffer and collapsing particles.
+   const positions = useMemo(() => createParticlePositions(count), [count]);
 
    useFrame((_, delta) => {
       if (ref.current) {
@@ -47,7 +50,7 @@ const ParticleField = ({ count = 300 }: ParticleFieldProps) => {
             <bufferAttribute
                attach="attributes-position"
                args={[positions, 3]}
-               count={count}
+               count={positions.length / 3}
             />
          </bufferGeometry>
          <pointsMaterial

src/components/3d/SceneBackground.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useRef, useState, type RefObject } from "react";
 import { Canvas, useFrame } from "@react-three/fiber";
 import { PerformanceMonitor } from "@react-three/drei";
+import { useLenis } from "lenis/react";
 import * as THREE from "three";
 import FloatingGeometry from "./FloatingGeometry";
 import ParticleField from "./ParticleField";
@@ -65,7 +66,23 @@ const SceneBackground = () => {
    const { isMobile } = useBreakpoint();
    const reducedMotion = useReducedMotion();
    const [degraded, setDegraded] = useState(false);
+   const [scrolling, setScrolling] = useState(false);
    const pointer = useRef<Pointer>({ x: 0, y: 0 });
+   const scrollIdle = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+   // Pause the render loop while the user is actively scrolling, resume ~160ms
+   // after they stop. The 3D scene contributes nothing during a fast fling (it's
+   // behind blurred glass and moving past) but competes for GPU/main thread with
+   // the scroll -- freeing it is a direct fast-scroll smoothness win. Motion stays
+   // fully visible at rest, which is when the parallax actually reads.
+   useLenis(({ velocity }) => {
+      if (Math.abs(velocity) < 0.05) return;
+      if (!scrolling) setScrolling(true);
+      clearTimeout(scrollIdle.current);
+      scrollIdle.current = setTimeout(() => setScrolling(false), 160);
+   });
+
+   useEffect(() => () => clearTimeout(scrollIdle.current), []);
 
    useEffect(() => {
       const setFromXY = (clientX: number, clientY: number) => {
@@ -101,8 +118,10 @@ const SceneBackground = () => {
          }}
          camera={{ position: [0, 0, 8], fov: 50 }}
          dpr={dpr}
-         // Reduced motion -> render once and freeze (static 3D snapshot).
-         frameloop={reducedMotion ? "demand" : "always"}
+         // Reduced motion -> render once and freeze. While actively scrolling ->
+         // pause the loop ("demand") to free the GPU/main thread for the scroll;
+         // resume "always" at rest.
+         frameloop={reducedMotion || scrolling ? "demand" : "always"}
          gl={{
             antialias: !isMobile,
             alpha: true,

src/components/layout/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { motion } from "motion/react";
 import { staggerContainer } from "@utils/animations";
-import { MONO_FONT } from "@/constants/theme";
+import { MONO_FONT, CYAN } from "@/constants/theme";
 import FooterContent from "./FooterContent";
 
 const KONAMI: string[] = [
@@ -93,7 +93,7 @@ const Footer = () => {
                      border: "1px solid rgba(6,182,212,0.3)",
                      fontFamily: MONO_FONT,
                      fontSize: 12,
-                     color: "#06b6d4",
+                     color: CYAN,
                      textAlign: "center",
                   }}
                >

src/components/layout/Footer/FooterContent.tsx

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { motion } from "motion/react";
 import { getName, getSiteConfig } from "@data/dataLoader";
 import { staggerItem } from "@utils/animations";
-import { MONO_FONT } from "@/constants/theme";
+import { MONO_FONT, CYAN, TEXT_MUTED } from "@/constants/theme";
 import useBreakpoint from "@hooks/useBreakpoint";
 import FooterSocial from "./FooterSocial";
 
@@ -21,7 +21,7 @@ const FooterContent = () => {
                fontFamily: MONO_FONT,
                fontSize: 24,
                fontWeight: 700,
-               color: "#06b6d4",
+               color: CYAN,
             }}
             variants={staggerItem}
          >
@@ -56,7 +56,7 @@ const FooterContent = () => {
                   key={tech}
                   style={{
                      fontSize: 10,
-                     color: "#6e6e90",
+                     color: TEXT_MUTED,
                      fontFamily: MONO_FONT,
                      padding: "2px 8px",
                      borderRadius: 4,
@@ -81,7 +81,7 @@ const FooterContent = () => {
          >
             <p
                style={{
-                  color: "#6e6e90",
+                  color: TEXT_MUTED,
                   fontSize: 14,
                   textAlign: "center",
                }}

src/components/layout/Footer/FooterSocial.tsx

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { motion } from "motion/react";
 import { getSocialProfiles } from "@data/dataLoader";
 import { staggerItem } from "@utils/animations";
+import { TEXT_SECONDARY, CYAN } from "@/constants/theme";
 import ICON_MAP from "@utils/iconMap";
 
 const FooterSocial = () => {
@@ -32,18 +33,18 @@ const FooterSocial = () => {
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
-                     color: "#a5a5c0",
+                     color: TEXT_SECONDARY,
                      transition: "all 0.3s",
                   }}
                   onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => {
-                     e.currentTarget.style.color = "#06b6d4";
+                     e.currentTarget.style.color = CYAN;
                      e.currentTarget.style.borderColor =
                         "rgba(6, 182, 212, 0.3)";
                      e.currentTarget.style.background =
                         "rgba(6, 182, 212, 0.08)";
                   }}
                   onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => {
-                     e.currentTarget.style.color = "#a5a5c0";
+                     e.currentTarget.style.color = TEXT_SECONDARY;
                      e.currentTarget.style.borderColor =
                         "rgba(255, 255, 255, 0.06)";
                      e.currentTarget.style.background =

src/components/layout/Header/Hero.tsx

@@ -1,13 +1,17 @@
 import { useCallback } from "react";
 import { motion } from "motion/react";
+import { useLenis } from "lenis/react";
 import { ChevronDown } from "lucide-react";
 import HeroContent from "./HeroContent";
 
 const Hero = () => {
+   const lenis = useLenis();
    const scrollToAbout = useCallback(() => {
-      const el = document.querySelector("#about");
-      if (el) el.scrollIntoView({ behavior: "smooth" });
-   }, []);
+      const el = document.getElementById("about");
+      if (!el) return;
+      if (lenis) lenis.scrollTo(el, { offset: -64 });
+      else el.scrollIntoView();
+   }, [lenis]);
 
    return (
       <section

src/components/layout/Header/HeroContent.tsx

@@ -1,8 +1,9 @@
 import { useState, useEffect, useMemo, useCallback } from "react";
 import { motion, AnimatePresence } from "motion/react";
+import { useLenis } from "lenis/react";
 import { getName, getRoles } from "@data/dataLoader";
 import { staggerContainer, staggerItem } from "@utils/animations";
-import { MONO_FONT } from "@/constants/theme";
+import { MONO_FONT, GREEN } from "@/constants/theme";
 import HeroStats from "./HeroStats";
 import HeroSocial from "./HeroSocial";
 const RESUME_URL =
@@ -21,10 +22,13 @@ const HeroContent = () => {
       return () => clearInterval(interval);
    }, [roles]);
 
+   const lenis = useLenis();
    const scrollToProjects = useCallback(() => {
-      const el = document.querySelector("#projects");
-      if (el) el.scrollIntoView({ behavior: "smooth" });
-   }, []);
+      const el = document.getElementById("projects");
+      if (!el) return;
+      if (lenis) lenis.scrollTo(el, { offset: -64 });
+      else el.scrollIntoView();
+   }, [lenis]);
 
    return (
       <motion.div
@@ -42,7 +46,7 @@ const HeroContent = () => {
                   gap: 8,
                   fontFamily: MONO_FONT,
                   fontSize: 14,
-                  color: "#22c55e",
+                  color: GREEN,
                   background: "rgba(34, 197, 94, 0.06)",
                   backdropFilter: "blur(12px)",
                   WebkitBackdropFilter: "blur(12px)",