A modern GitHub profile visualizer built with React, Vite, Tailwind CSS, and D3.js.
Search for any GitHub user and explore their public data through clean, interactive visualizations: language usage, pinned repositories, contribution heatmap, and follower insights.
- 🎨 Responsive UI with light/dark/system theme toggle
- 📈 Force-directed language–repo graph (D3.js)
- 🧱 GitHub-style contribution heatmap (3-month range)
- 📊 Language usage donut chart
- 📌 Pinned repositories and follower preview cards
- 🌐 Shareable permalink + modal
- React + Vite
- Tailwind CSS
- D3.js for visualizations
- GitHub REST API for user + repo data
- Responsive layout via Tailwind’s utility-first system
- React Router DOM
- React Hot Toast for notification
- Vitest
This template uses Vite’s default setup with hot module reloading:
npm install
npm run devtesting
npx vitest --uiLight Mode
Dark Mode
Force-directed graph adapted from Mike Bostock’s Observable notebook.
Original copyright © 2021 Observable, Inc. Licensed under the MIT License.
Partially inspired by Maeve Kane’s fork of the Quaker network graph, which added dynamic tooltips and aesthetic improvements.
Contribution heatmap styled to resemble GitHub’s own
Original data and graph concept from the Programming Historian Python network lesson.
Logo and favicon generated using LogoMakr (used under free license with credit).
- Logo: https://app.logomakr.com/2xB8x8
- Favicon: https://app.logomakr.com/7Yyekz
Initial UI design inspiration from Frontend Mentor.
🧠 Special thanks to ChatGPT for helping me debug D3 and polish UX.
This project’s source code is licensed under the MIT License — you are free to use or adapt it for learning or personal use.
⚠️ Note: The logo and favicon were generated using LogoMakr under their free license, which requires attribution and does not allow commercial use without a paid license.