A collection of creative, modern, and interactive visualizations for your GitHub contribution history! Instead of the classic flat green grid, this project transforms your activity into beautiful designs.
Currently, it features four unique visualization modes:
- Default GitHub Calendar - A pixel-perfect, Tailwind-native clone of the standard GitHub heatmap graph.
- Halftone Grid (Inspired by Bryl Lim) - A sleek dot-pattern view where circles scale dynamically based on your activity.
- 3D Isometric Blocks (Inspired by Jason Long) - A pixel-perfect 3D block visualization that maps your daily contribution count to block height using obelisk.js.
- Apple Activity Style - A dark mode iOS-inspired design featuring activity rings, a dynamic radar chart based on user hashes, and a smooth area chart built with recharts.
- Live Rendering: Type in any GitHub username and watch both graphs update in real-time.
- Aesthetic Designs: Crafted with modern typography (Space Grotesk), smooth borders, and balanced layout proportions.
- Automatic Stats & Streaks: Under the 3D isometric view, you'll find calculated insights including:
- Total contributions over the last year.
- Contributions made during the current week.
- Your absolute best day (and date).
- Daily average contributions.
- Streaks tracker: Longest active streak and current active streak with start/end dates.
- Core: React + Vite (fast HMR out of the box!)
- Styling: Tailwind CSS + Google Fonts (Space Grotesk / Instrument Sans)
- State Management: Zustand (Optional)
- Charting Library: recharts (for the Apple-style area and radar charts)
- 3D Pixel Rendering: obelisk.js
- Data Fetching: Axios + GitHub Contributions API
This project acts as a gallery of copy-pasteable React components. You don't need to install this repository to use the graphs!
- Browse: Visit the live demo and select a design you like.
- Install Dependencies: Click on a design to view the required packages (e.g.,
axios,recharts,obelisk.js) and install them in your project. - Copy Code: Use the provided copy buttons to grab the component's source code and usage example.
- Paste & Customize: Drop the code directly into your React application and tweak it to fit your needs!
Want to adjust the 3D cubes? You can customize the dimensions directly in GithubIsometric.jsx. Look for these parameters near the top of the file:
// Adjust cube size and gap to fit the grid in the canvas view
const CUBE_SIZE = 14; // Must be an even number
const CUBE_GAP = 2; // Space between cubes
const BASE_HEIGHT = 3; // Height of 0-contribution blocks
const MAX_HEIGHT = 75; // Max height for the peak daysTo reposition the grid inside the canvas, edit the anchor point in the useEffect hook:
const point = new obelisk.Point(110, -10);preview.mp4
- Halftone grid design inspired by Bryl Lim's portfolio.
- 3D Isometric view logic inspired by Jason Long's Chrome Extension.
- Built with obelisk.js.
Feel free to play around, add your own designs, or customize the styling! Happy coding! 🚀