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!

[Priyanshu-byte-coder]

This PR now has merge conflicts with main due to recent merges. Please rebase onto main and resolve conflicts.

[Priyanshu-byte-coder]

This PR now has merge conflicts with main. Please rebase your branch against the latest main and force-push to resolve. Run: git fetch upstream && git rebase upstream/main

[ArshVermaGit]

@Priyanshu-byte-coder merge conflicts are resolved please review and merge

[gitguardian]

⚠️ GitGuardian has uncovered 3 secrets following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

Since your pull request originates from a forked repository, GitGuardian is not able to associate the secrets uncovered with secret incidents on your GitGuardian dashboard.
Skipping this check run and merging your pull request will create secret incidents on your GitGuardian dashboard.

🔎 Detected hardcoded secrets in your pull request

GitGuardian id	GitGuardian status	Secret	Commit	Filename
33523564	Triggered	Generic High Entropy Secret	2348ced	.env.example	View secret
33523565	Triggered	Supabase Service Role JWT	2348ced	.env.example	View secret
33523566	Triggered	JSON Web Token	2348ced	.env.example	View secret

🛠 Guidelines to remediate hardcoded secrets

1. Understand the implications of revoking this secret by investigating where it is used in your code.
2. Replace and store your secrets safely. Learn here the best practices.
3. Revoke and rotate these secrets.
4. If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

• following these best practices for managing and storing secrets including API keys and other credentials
• install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

---

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}

[github-actions]

🎉 Merged! Thanks for contributing to DevTrack.

If the project has been useful to you, a ⭐ star on the repo is the easiest way to support it — it helps DevTrack get discovered by more developers.

Keep an eye on open issues for your next contribution!