git-3d-contributions

Українська

3D visualization of the GitHub contributions graph. Each day of the year is a bar; bar height reflects commit count.

Features

• 3D scene built with Threlte / Three.js
• GitHub username search with validation and error handling
• Year selection: dropdown, ← → arrows, and 5 / 10 / 15 year range presets
• Click a bar to zoom in and show the date and commit count
• On-screen Control key indicator (⌃ on Mac, Ctrl elsewhere)

Camera controls

	Left mouse button	Right mouse button
Without Control	Rotate	Pan
With Control	Pan	Rotate

Mouse wheel — zoom in / out.

UI

The control panel sits at the bottom of the screen:

1. Top row — GitHub username field and load button (Enter or →)
2. Bottom row — year range toggles (5 / 10 / 15), arrows, and year selector

Top-left — visual hint for the Control key.

Data

Contributions are fetched from gh-contributions-api:

GET https://gh-contributions-api.vercel.app/{username}/{year}

The default profile is d256sh.

Getting started

npm install
npm run dev

Open http://localhost:5173.

Scripts

Command	Description
npm run dev	Dev server
npm run build	Production build
npm run preview	Preview production build
npm run check	Type check (svelte-check)
npm run lint	ESLint + Prettier
npm run format	Format code

Stack

• SvelteKit
• Threlte + Three.js
• camera-controls
• Svelecte