Gitcon is a high-performance, premium GitHub contribution dashboard built with Revine, the developer-first React framework. Gitcon fetches and aggregates public user activity to visualize daily rhythms, streaks, cumulative growth, and project-level momentum in a dark-themed, glassmorphic layout.
- Dynamic Contribution Heatmap: Interactive calendar grid visualization with configurable filters (supporting last 6 months or last 12 months) and detailed tooltip counts.
- Weekly Coding Rhythm: Graph highlighting weekly peaks and low-productivity days to discover when you code best.
- Productivity Hours: SVG distribution chart plotting commit density by hour of the day to define core active periods.
- Top Contributed Accounts: Automatically lists other GitHub user and organization accounts whose repositories you have contributed to, with direct external redirects.
- Most Used Languages: Complete breakdown of programming languages used across projects, accompanied by dynamic color-coded visual progress indicators.
- Streak & Growth Calculators: Computes acceleration indexes, active streaks, and all-time record contribution metrics.
- Modern Dark-Mode Aesthetics: Premium CSS glassmorphism, harmonious palettes, fluid micro-animations, and responsive column layouts designed for desktop and mobile displays.
Clone the repository and install the application dependencies:
npm installTo avoid GitHub GraphQL API rate limiting, create a GitHub Personal Access Token (PAT) and place it in a .env file at the project root:
REVINE_PUBLIC_GITHUB_TOKEN=your_personal_access_token_hereSpin up the local hot-reloading development server:
npm run devBy default, the server runs on http://localhost:3000.
src/
├── components/ # Reusable layout and graphic widgets (ContributionGrid, StatCard, Leaderboard)
├── pages/ # File-based SPA routing
│ └── user/
│ └── [username]/
│ ├── accounts.tsx # All contributed accounts subpage
│ ├── languages.tsx # All languages breakdown subpage
│ ├── repositories.tsx # All repositories subpage
│ └── [username].tsx # Main profile container and rhythm charts
├── styles/ # Global design tokens and tracker layouts
├── utils/ # Data calculation, NVM random seeding, and GraphQL clients
└── root.tsx # Application entry point
To showcase your profile and metrics on the global leaderboard:
- Open src/constants/users.json.
- Append your GitHub username to the list (verify that it is comma-separated and surrounded by double quotes):
[ "rachit-bharadwaj", "torvalds", "your-github-username" ]
- Commit the file and open a Pull Request to merge your addition!
- Revine: Single-page React framework built for optimal development speed.
- React: Modern functional structure with UI-bound memoized states.
- Tailwind CSS: Responsive grid columns, animations, and typography tokens.
- GitHub GraphQL API: Deep queries fetching complex calendar nodes.
This project is licensed under the MIT License.