A modern, interactive dashboard built with React, Vite, TailwindCSS, and shadcn/ui, for visualizing GitHub contribution over time.

Live Site: jrbrowning.github.io

Designed to primarily be a fast local development site for prototyping and iterating, This tool is for developers who want to introspect (and maybe publish) on their GitHub history journey.

If you'd like to create your own version of your journey, head over to GitHubHero to generate a github-static-transformed.json data set using GitHub CLI and the GraphQL endpoint.

Then fork this repo, drop that file into the \public folder, edit any details to personalize for your liking, and follow the Build and Preview your site steps below.

• 🔀 Sankey visualization: Year-over-year language flow
• 📊 Contribution summary: Commits, PRs, issues, and reviews by year
• 🏷️ Repo language breakdown: Language composition per repo/year
• 🎛️ Interactive filtering: Select top N languages
• ⚛️ Framework: React 19 + Vite 7
• 🎨 Styling: TailwindCSS, shadcn/ui, Framer Motion, Lucide Icons
• 📈 Charts: Plotly.js, Recharts
• 🌓 Responsive, dark mode compatible design using shadcn/ui

Development mode:

# Start dev server
npm run start

# Clean and reinstall deps
npm run rebuild

This project uses Commitizen for conventional commit messages. To launch the commit interface:

npm run commit

Build a static version of the repo into the /docs

npm run gh-page-build

Preview the site using a light weight local server (reads content from the /docs, where vite reads from /)

npm run gh-page-preview

1. Go to your repo on GitHub.
2. Navigate to: Settings → Pages
3. Under Source, choose: • Branch: main • Folder: /docs
4. Click Save.

├── docs/                   # Static site output for GitHub Pages
├── app/                    # Application source code (App.tsx, Charts)
├── components/             # Reusable React components from shadcn
├── lib/                    # Utility functions and libraries
├── .github/                # GitHub workflows and configuration
├── commitlint.config.js    # Commitlint configuration
├── package.json            # Project metadata and dependencies
├── tsconfig.json
└── vite.config.ts

• React 19
• Vite 7
• TailwindCSS
• shadcn/ui
• Framer Motion
• Lucide Icons
• Plotly.js
• Recharts
• TypeScript
• ESLint
• Prettier
• Commitizen
• Husky
• gh-pages
• ThemeProvider (custom)

Built mostly by AI (Claude 3.7/4.0 Sonnet, OpenAI GPT-4o/4.1, MS VSCode CoPilot) with human direction and decision making.

Human director Jeff Browning — who is powered by curiosity and coffee ☕.