Frontend polish: back-to-top button & animated category progress bars

[Copilot]

Adds two focused visual improvements to the long-scrolling SPA without touching functionality.

Changes

Back-to-top floating button (src/main.ts, src/style.css)

• Fixed-position button, hidden until scrollY > 400px, revealed via spring-bounce animation (ease-bounce + opacity + scale)
• Gradient matches brand tokens (--color-accent → --color-accent-secondary), accent glow shadow, hover-lift, active-press feedback
• Scroll handler throttled with requestAnimationFrame + a ticking flag to avoid per-pixel DOM mutations
• --back-to-top-clearance CSS custom property documents the vertical offset above the theme-toggle button (56 px button + gap → 72 px desktop / 68 px mobile) instead of bare magic numbers
• Fully accessible: aria-label, focus-visible ring; prefers-reduced-motion suppresses transform, keeps opacity fade

Animated category progress bars (src/dashboard.ts, src/style.css)

• Previously bars were written as bar.style.width = "${pct}%" synchronously, making the existing transition: width 1s a no-op (no state change to transition from)
• Now: bar starts at 0%, target stored as --bar-target-width CSS custom property, requestAnimationFrame adds .animate which triggers @keyframes bar-fill { from { width: 0 } to { width: var(--bar-target-width) } }
• prefers-reduced-motion skips the keyframe and snaps directly to target width

@keyframes bar-fill {
  from { width: 0; }
  to   { width: var(--bar-target-width, 100%); }
}
.category-bar.animate {
  animation: bar-fill 1s var(--ease-out) forwards;
}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
chimera	Ready	Preview, Comment	May 3, 2026 1:30pm