Skip to content

feat(dashboard): creative UX overhaul with storytelling and visual depth#39

Merged
rajnavakoti merged 3 commits intomasterfrom
feat/36-dashboard-ux-overhaul
Mar 18, 2026
Merged

feat(dashboard): creative UX overhaul with storytelling and visual depth#39
rajnavakoti merged 3 commits intomasterfrom
feat/36-dashboard-ux-overhaul

Conversation

@rajnavakoti
Copy link
Collaborator

Summary

  • Hero section with animated stat counters, compelling tagline, and estimated total pipeline value
  • Color-coded pipeline stages with connector arrows and per-status accent colors
  • Pie chart (pure CSS conic-gradient) for category breakdown with legend
  • Progress ring gauges for graduation rate, selection rate, average score, and decisions made
  • Expandable submission cards — click to reveal problem statement, value estimate, effort, tech stack, and demo/issue links
  • Softer dark mode — swapped pure black (#111) for dark slate (#1a1a2e) with layered surfaces
  • Better hover effects — subtle scale + lift instead of jarring color inversion
  • Enriched data — submissions.json now includes problem, value, effort, techStack, demoUrl fields
  • Still zero frameworks, zero build steps, fully accessible

Issues Closed

Closes #36, Closes #37, Closes #38

Test plan

  • Hero counters animate on load
  • Pipeline shows all 8 stages with correct color-coded top borders
  • Pie chart renders proportionally with correct category colors
  • Progress ring gauges animate in smoothly
  • Clicking a card expands to show detail section
  • Clicking again (or pressing Enter/Space) collapses it
  • Dark mode is visibly softer than before (not pure black)
  • Table/card hover uses subtle highlight, not color inversion
  • Responsive at 320px, 768px, 1024px, 1440px
  • Links inside cards still work without triggering expand

🤖 Generated with Claude Code

rajnavakoti and others added 3 commits March 18, 2026 15:21
- Hero section with animated counters, tagline, and estimated total value
- Pipeline stages color-coded by status with connector arrows
- Pie chart (CSS conic-gradient) for category breakdown with legend
- Progress ring gauges for graduation rate, selection rate, avg score
- Expandable submission cards showing problem, value, effort, tech stack, demo links
- Status badges with tasteful accent colors instead of monochrome
- Softer dark mode (#1a1a2e base) instead of pure black
- Hover effects: subtle scale + lift instead of color inversion
- Enriched submissions.json with problem, value, effort, techStack, demoUrl fields
- Micro-interactions: counter animation, gauge ring animation, card expand
- Retained: no frameworks, no build step, semantic HTML, ARIA labels, responsive

Closes #36, Closes #37, Closes #38

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Claude <noreply@anthropic.com>
- Pie chart: heavy border, offset box-shadow, square center cutout
- Gauge cards: offset box-shadow with hover shift effect
- Gauge rings: outer border circles for structural weight
- Legend swatches: bordered instead of plain color fills
- Pie container: bordered card with shadow

Co-Authored-By: Claude <noreply@anthropic.com>
@rajnavakoti rajnavakoti merged commit f126e23 into master Mar 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

1 participant