GitCity — 3D GitHub Contribution Visualiser

1. Concept

GitHub contribution graphs are useful but visually flat. GitCity transforms the same data into a 3D cityscape — each column of the contribution calendar becomes a city block, and building height is proportional to commit count. High-activity streaks produce skyscrapers; quiet periods produce low-rise districts.

2. Technical Approach

• Data Layer — GitHub Contributions API fetches full-year contribution data for any public username
• Generation Layer — contribution matrix mapped to 3D geometry via Three.js BoxGeometry
• Rendering Layer — WebGL rendering with orbit controls, ambient + directional lighting
• Interaction Layer — hover to inspect individual days, orbit/zoom/pan

3. Procedural City Generation

function buildCity(contributions) {
  contributions.weeks.forEach((week, weekIdx) => {
    week.contributionDays.forEach((day, dayIdx) => {
      const height = Math.max(0.1, day.contributionCount * HEIGHT_SCALE);
      const geometry = new THREE.BoxGeometry(0.8, height, 0.8);
      const color = getContributionColor(day.contributionCount);
      const mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color }));
      mesh.position.set(weekIdx, height / 2, dayIdx);
      scene.add(mesh);
    });
  });
}

4. Why It Matters for a Portfolio

GitCity demonstrates 3D rendering (Three.js/WebGL), API integration, data-to-geometry mapping, and creative engineering — skills rarely showcased by ML engineers. It's also immediately interactive and shareable, which gives it strong engagement as a portfolio piece.