GitLandscape

A 3D visualization of your GitHub contributions using Three.js. Display your contribution graph as an interactive 3D grid (in dark or light mode) where you can move around and zoom in on your contributions. Each day is represented by a cube whose height corresponds to your number of contributions.

Setup

1. Create a GitHub token:

   • Go to GitHub Settings > Developer settings > Personal access tokens
   • Click "Generate new token (classic)"
   • Give it a name
   • Select the repo scope (or public_repo if you only need public repositories)
   • Generate and copy the token

2. Configure environment variables:

   • Copy .env.example to .env
   • Edit .env and add your GitHub username and token:

     GITHUB_USERNAME=your_username
     GITHUB_TOKEN=your_token_here
     

3. Install dependencies and start:

   npm install
   npm start

   To start in light theme, use:

   npm start -- --light

4. Open in your browser:

   • Navigate to http://localhost:3000
   • Select a year from the dropdown to view your contributions in 3D