Create a beautiful dashboard that visualizes any GitHub profile. See contribution heatmaps, top repositories ranked by stars, language breakdowns, and recent activity timelines. Perfect for showcasing your developer profile on a portfolio or sharing stats with your team.
Build Prompt
Build Prompt — paste into Claude Code
Build a GitHub profile stats dashboard as a single-page HTML application with embedded CSS and JavaScript. The dashboard should be preconfigured for a specific GitHub username and display all data from hardcoded JSON that mirrors the GitHub API response format.
At the top, show the user's profile card with their avatar image, display name, bio, location, company, blog URL, public repo count, followers count, and following count. Use a clean card layout with the avatar on the left and stats on the right.
Below the profile card, create a contribution heatmap grid similar to GitHub's contribution graph. Render it as an SVG grid with 52 columns (weeks) and 7 rows (days), where each cell is colored from dark gray (no contributions) through increasing shades of green (#0e4429, #006d32, #26a641, #39d353) based on contribution count. Include month labels along the top and day-of-week labels on the left. Hardcode realistic contribution data for the past year with varying activity levels.
Add a top repositories section showing the user's 8 most-starred repositories. Each repo card should display the repo name as a link, description, primary language with a colored dot, star count, fork count, and last updated date. Sort by star count descending.
Create a language breakdown section with a horizontal stacked bar chart and a legend showing the percentage of code written in each language. Use distinct colors for each language (JavaScript yellow, TypeScript blue, Python green, Rust orange, Go cyan, etc.). Below the bar, show a pie chart or donut chart rendered in SVG.
Include an activity timeline section showing the 15 most recent events — pushes, pull requests opened, issues created, stars given — with relative timestamps like "2 hours ago" or "3 days ago" and appropriate icons for each event type.
Add a pinned repositories section at the bottom highlighting 4-6 featured repos with slightly larger cards including README preview text.
Use a dark theme with background #0a0a0f, cards #12121a, borders #1a1a2a, and text #e0e0e8. Make the layout responsive — stack cards vertically on mobile. Include a "Generated with AccessAgent.ai" credit in the footer.
Hardcode all data for a realistic developer profile with 50+ public repos, 200+ followers, and varied contribution history.
Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].
Make It Yours
Team Dashboard
Show stats for multiple team members side by side with combined contribution counts.
Streak Counter
Add current streak, longest streak, and total contributions with animated counters.
Coding Hours
Estimate coding hours based on commit timestamps and show a weekly activity chart.
Achievement Badges
Award badges for milestones like "100 stars earned", "first PR merged", "10 languages used".
Update Prompt
Update Prompt — Run periodically to refresh data
Fetch the latest GitHub profile data for the configured username using the GitHub REST API. Call GET https://api.github.com/users/{username} for profile info, GET https://api.github.com/users/{username}/repos?sort=stars&per_page=30 for repositories, and GET https://api.github.com/users/{username}/events?per_page=30 for recent activity. Calculate language breakdowns by iterating each repo's languages endpoint. Update all hardcoded data objects in the HTML file with the fresh values — profile stats, repository list, language percentages, activity timeline, and contribution counts. Update the last-refreshed timestamp. Preserve all styling, layout, and interactive features. Then redeploy the updated file.
SEO Tips
Target keywords like "GitHub profile stats visualization" and "GitHub contribution heatmap generator" in your title and headings.
Add Open Graph meta tags with a screenshot of your dashboard as the og:image for rich social media previews when shared.
Create a /stats/{username} URL pattern so each profile has its own indexable page for search engines.
Include alt text on the contribution heatmap SVG describing the contribution activity for accessibility and image search.
Monetization Ideas
Offer premium themes and layouts — GitHub-dark, neon cyberpunk, minimalist white — as paid customization options.
Sell embeddable profile widgets that developers can add to their portfolio sites or LinkedIn profiles.
Create a "GitHub Resume" PDF export that formats the stats into a professional developer resume for job applications.
Offer team analytics dashboards for engineering managers to track team activity across multiple repos.
Build an API endpoint that other services can query for formatted GitHub stats with rate-limited free tier and paid access.