feat: UI elevation -- accessibility, scroll/load performance, motion polish, token consistency#185
Merged
Merged
Conversation
- 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
- 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
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.
…ements 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
Document the accessibility, scroll/load performance, motion, and design-token refinements from this release.
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
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.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
A refinement pass across the whole site: accessibility, scroll/load performance, motion polish, design-token consistency, and several real bug fixes. No new dependencies, no content or UI removed, motion kept visible.
The work was driven by a parallel multi-dimension audit + adversarial verification, then a DevTools performance trace to find the actual scroll-lag root cause (not guesses).
Why the site lagged on fast scroll
A trace under CPU throttle showed 50 simultaneous
backdrop-filterblur layers and a long forced-reflow window during scroll.backdrop-filteronly caches while its backdrop is static, but the backdrop here (aurora blobs + 3D canvas) animates every frame -- so blurs recomputed continuously. The worst offenders were 5 full-viewport-width.section-darkerbands re-blurring the moving background.Changes
Performance (scroll)
.section-darkerbackdrop-blur bands with gradient overlays -- the dominant fast-scroll repaint. Verified gone in the built CSS.transform(GPU) instead ofleft/top(per-frame layout).overscroll-behavioradded.Performance (load)
/size/220x220thumbnails: ~43KB -> 25KB each across 20 badges, sharper on retina. Render-time helper, survives the weekly sync.Accessibility (WCAG 2.2)
mainlandmark; navaria-label/aria-current/aria-expanded/aria-controls.aria-invalid+ inlinerole="alert"error; success announced to screen readers.TEXT_MUTEDbumped to clear AA contrast on the dark glass.Bug fixes
countchange (buffer desync).parseDatemonth/year guards; stable list keys.Design system
theme.tstokens +--ch-*channels across the tree; wiredMAX_WIDTH*/type tokens into sections; removed deadBLUEtoken.Testing
pnpm type-check,pnpm lint(0 warnings),pnpm test(4/4),pnpm build-- all green locally..section-darkerships as a gradient with no backdrop-filter.Caveat: a clean before/after FPS number wasn't reproducible on the dev box (identical runs swung 24->51 fps; scripted scroll fights Lenis). What's deterministically proven is that the measured root causes are removed from the shipped build. Best validated with a real wheel-scroll.
Notes
mainare unrelated to this PR (no deps added/changed).