feat(ui): Add Micro-Animations & Transitions for Dynamic Dashboard UX

[ArshVermaGit]

Summary

Adds comprehensive micro-animations and smooth CSS transitions throughout the DevTrack dashboard to make the interface feel more responsive, alive, and premium. This addresses the issue where the UI felt static when interacting with dashboard elements.

Resolved Issue

Resolves #1560

Problem

The application UI lacked interactive feedback on standard elements — stat tiles, list items, progress bars, and loading states all felt flat and static, reducing the perceived quality of the product.

Solution

Animation Foundation

• tailwind.config.ts: Extended with custom keyframes (fade-in-up, scale-in, shimmer) and corresponding animation utilities.
• globals.css: Introduced 5 reusable CSS utility classes:

  Class	Effect
  .stagger-children	Sequential 50ms reveal delays for up to 10 children
  .skeleton-shimmer	Gradient-sweep loading replacing flat pulse
  .stat-cell	Hover lift (translateY -2px) + accent glow shadow
  .list-item-hover	Slide-right with accent left-border reveal
  .progress-fill	Smooth 600ms cubic-bezier width transition

Components Enhanced (16+ files)

• Shimmer skeletons: Upgraded from animate-pulse → skeleton-shimmer across 26+ components
• Staggered fade-in: Applied to stat grids, repo lists, goal lists, activity feeds, and issue rows
• Hover lift + shadow: Added to interactive cards in RecentActivity, InactiveRepositories, PRMetrics review repos
• Progress bar animation: Smooth fill transitions in WeeklySummaryCard and LocalCodingTime
• Stat cell hover glow: Applied to every stat tile across IssueMetrics, PersonalRecords, PRMetrics, CIAnalytics, CommunityMetrics, DiscussionsWidget, ProjectMetrics, and more

Key Files Changed

• tailwind.config.ts — Custom animation keyframes
• src/app/globals.css — Reusable animation utility classes
• src/components/IssueMetrics.tsx
• src/components/PersonalRecords.tsx
• src/components/RecentActivity.tsx
• src/components/InactiveRepositoriesCard.tsx
• src/components/PRMetrics.tsx
• src/components/WeeklySummaryCard.tsx
• src/components/ProjectMetrics.tsx
• src/components/CommunityMetrics.tsx
• src/components/LocalCodingTime.tsx
• src/components/GoalTracker.tsx
• src/components/TopRepos.tsx
• src/components/DiscussionsWidget.tsx
• src/components/CIAnalytics.tsx
• 26+ additional components (shimmer skeleton batch upgrade)

Accessibility

All animations respect the existing prefers-reduced-motion: reduce media query in globals.css, which blanket-disables all animation and transition durations. No additional accessibility work was required.

Type of Change

• Bug Fix
• New Feature (new functionality)
• UI/UX Improvement
• Code Refactoring / Technical Debt Reduction

How Has This Been Tested?

• Verified npm run build compiles successfully with zero TypeScript or module errors.
• Confirmed no bundle size regression (dashboard: 319 kB unchanged).
• All 12 static pages generated without errors.
• Verified animations are purely CSS-based with no JS overhead or layout thrashing.
• Confirmed prefers-reduced-motion media query correctly disables all new animations.

[vercel]

@ArshVermaGit is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[ArshVermaGit]

Hi @Priyanshu-byte-coder ! Issue #1560 has been resolved. Please review the PR and merge it under GSSoC. Thanks!