🔗 Live demo: vijayvardhanji.github.io/github-profile-analyzer
A creative, animated GitHub profile viewer. Pure HTML/CSS/JS — no frameworks, no charting libraries. Every visualization is hand-built with raw SVG/Canvas.
Concept: "Every commit leaves a shape." A developer's identity is rendered as a small constellation — an orbiting language-ring chart around their avatar, a star-graded repo grid, and a contribution heatmap.
index.html → structure & all UI states
style.css → design system, dark/light theme, animations
script.js → GitHub API calls, error handling, SVG chart, heatmap, PNG export, theme toggle
No build step, no bundler — just three static files.
- Username search with instant demo chips
- Identity card: avatar, name, typed bio, location/company, followers/following/repos/stars
- Language orbit — animated SVG rings sized by language share across top starred repos
- Repo cards — top repos by stars, with language, star count, fork count, description
- Contribution heatmap — auto-hides if the source is unreachable
- Dark/light theme toggle
- Export card as PNG
- Smooth animated transitions between all states, fully responsive
| Scenario | Behaviour |
|---|---|
| Username doesn't exist | Clean 404 message |
| Zero public repos | Graceful empty state, profile still renders |
| Rate limit hit (60/hr unauth) | Live countdown to reset, auto-recovers |
| Slow network | 12s timeout → friendly message |
| Offline/network failure | Distinct offline message |
| Per-repo language fetch failing | Skipped silently, rest of chart still renders |
Every error state has a Try again button.
python3 -m http.server 8000
# open http://localhost:8000Or just double-click index.html.