The latest articles on Forem by Rishabh Bhartiya (@rishabhbhartiya). https://forem.com/rishabhbhartiya https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3855341%2Feb317c87-e5a3-419e-8eff-7aeb8675f5f7.png https://forem.com/rishabhbhartiya en Rishabh Bhartiya Wed, 01 Apr 2026 10:27:04 +0000 https://forem.com/rishabhbhartiya/i-turned-your-github-contribution-graph-into-a-3d-city-you-can-drive-through-5acj https://forem.com/rishabhbhartiya/i-turned-your-github-contribution-graph-into-a-3d-city-you-can-drive-through-5acj <p>Every developer has that green squares grid on their GitHub profile. You stare at it, feel guilty about the gaps, and move on.</p> <p>I wanted to make it feel alive. So I built <strong>GitCity</strong>.</p> <h2> What is it? </h2> <p>GitCity transforms your GitHub contribution history into an interactive isometric 3D city. Every day you commit, a building grows. The more commits, the taller the tower. Years of consistent coding turns into a proper skyline.</p> <p>👉 <strong>Try it: <a href="https://gitcity.natrajx.in" rel="noopener noreferrer">gitcity.natrajx.in</a></strong></p> <h2> The feature nobody expected </h2> <p>You can switch to <strong>simulation mode</strong> and drive a car through the city you built with your code.</p> <p>It started as a joke. It's now the thing everyone screenshots.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Frishabhbhartiya%2FGitCity%2Fblob%2Fmain%2Fscreenshots%2Fcardriving.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Frishabhbhartiya%2FGitCity%2Fblob%2Fmain%2Fscreenshots%2Fcardriving.gif" alt="Driving simulation" width="" height=""></a></p> <h2> Features </h2> <ul> <li>🏙️ Isometric 3D city from your GitHub contributions</li> <li>🚗 Driveable city simulation mode</li> <li>🎨 6 themes — Matrix, Noir, Aurora, Ocean, Gold, Ice</li> <li>📅 Filter by year, month, or week</li> <li>🔗 Embeddable SVG — one URL drops your skyline into any README</li> <li>🔓 No login needed — just enter any GitHub username</li> <li>✅ Free and open source</li> </ul> <h2> Add it to your README </h2> <div class="highlight js-code-highlight"> <pre class="highlight markdown"><code><span class="p">![</span><span class="nv">GitCity</span><span class="p">](</span><span class="sx">https://gitcity.natrajx.in/api/svg?username=YOUR_USERNAME</span><span class="p">)</span> </code></pre> </div> <p>Try it with <code>torvalds</code> to see what a legendary skyline looks like:<br> 👉 <a href="https://gitcity.natrajx.in/torvalds" rel="noopener noreferrer">gitcity.natrajx.in/torvalds</a></p> <h2> Tech stack </h2> <p>Built with React, Vite, and Three.js for the 3D rendering. Deployed on Vercel. GitHub contribution data fetched via the public API — no token required.</p> <h2> Open source </h2> <p>The full source is on GitHub — PRs and feedback welcome.<br> 👉 <a href="https://github.com/rishabhbhartiya/GitCity" rel="noopener noreferrer">github.com/rishabhbhartiya/GitCity</a></p> <p>Would love to hear what your city looks like — drop your username in the comments!</p> github opensource webdev showdev