</3d github visualizer>
</the problem>
GitHub profiles are flat and don't show contribution patterns visually. A list of repositories tells you what someone built but not how their work connects, evolves, or clusters by language and activity.
</my approach>
Three.js 3D rendering of contribution data with a 3-axis positioning model that maps age, popularity, and fork activity to spatial coordinates. Prioritized performance with frustum culling, LOD scaling, and geometry caching to maintain 60fps on 100+ repositories.
</key features>
Interactive 3D graph
Each repo is a sphere sized by stars, colored by language, positioned by age and activity. Explore the full scene with orbit controls.
Real-time GitHub API data
Live search with autocomplete, 30-minute cache TTL, and debounced queries to avoid rate limiting.
Custom camera controls
Full keyboard, mouse, and touch navigation. WCAG AA compliant with screen reader support.
Data export
Export to JSON, CSV, or screenshot. Shareable collaboration snapshots.
</what i learned>
Low-level Three.js gives more control than React Three Fiber when performance optimizations like frustum culling and geometry instancing are critical.
Spatial encoding of data (mapping metrics to x/y/z) makes patterns visible that are invisible in flat lists.