[FEAT] Add language breakdown widget using GitHub API

[Priyanshu-byte-coder]

Summary

Show a breakdown of programming languages the user has been writing, based on their most active repositories.

What to build

• New API route: GET /api/metrics/languages
  • For each repo in the user's top repos (already fetched at /api/metrics/repos), call GET /repos/{owner}/{repo}/languages
  • Aggregate language byte counts across all repos
  • Return top 6 languages with percentages
• New component: src/components/LanguageBreakdown.tsx
  • Display as a horizontal stacked bar + legend
  • Use distinct colors per language (map popular languages to known colors: TypeScript → blue, Python → yellow, etc.)

Where to add

Wire into src/app/dashboard/page.tsx — add a new row or next to TopRepos.

Acceptance criteria

• API fetches language data from GitHub and returns top 6 + percentages
• Component renders stacked bar chart
• Loading skeleton while fetching
• Empty state if no repos found

Difficulty

Medium — requires chained API calls and a new chart component.

[Harsh-Codes-77]

Hi @Priyanshu-byte-coder

I have gone through the issue and would like to work on it under GSSoC'26.
I’m interested in contributing to this project and believe I can complete the task effectively.

Could you please assign this issue to me?
Thank you! 🚀