I Turned My GitHub Profile Into a Cyberpunk Console With a City Built From My Contributions

Description and use

The author built a dynamic cyberpunk console for their GitHub profile that visualizes contributions as a 3D city, updating daily, using SVG and GitHub Actions.

Problem

The author wanted a custom GitHub profile that visually represented their contributions in a more engaging way than the default grid of green squares.

Outcome

The author successfully transformed their GitHub profile into a dynamic cyberpunk console that visualizes contributions as a 3D city, updates daily, and remains fully functional within GitHub’s sandbox constraints.

Workflow

• 1. Conceived the idea of a 3D contribution city and cyberpunk console.
• 2. Designed SVG assets for header, footer, stats, city, and project cards.
• 3. Used SVG <style> to embed CSS animations for typing and blinking cursor.
• 4. Stacked 23 SVG images with align="top" to create a seamless terminal window.
• 5. Implemented a square‑root height formula for building heights to avoid extreme towers.
• 6. Added lighting, windows, stars, and a plane for visual realism.
• 7. Wrote a daily update script that queries GitHub’s API once, generates new SVGs, and commits them to the repo.
• 8. Stored API token as a secret in GitHub Actions to keep it hidden.
• 9. Configured the README to reference the SVG assets and display the console.
• 10. Tested rendering and caching behavior, adjusted grid spacing and glow overflow to hide seams.

Evidence

GitHub doesn’t let you run anything in a README. <script> gets stripped. <style> gets stripped. Even inline style="" attributes get stripped.

Source

To GitHub, an SVG embedded with <img> is just an image. And *inside* an SVG, you’re allowed to use CSS, including animations:

Source

I know, what a weird question, right? My first instinct was simple: height = number of contributions. That gave me one giant tower for my busiest day and a sea of flat slabs for everything else.

Source

I used a square root instead: h = 8 + 110 · √(c/cmax).

Source

I wrote a daily update script that queries GitHub’s API once, generates new SVGs, and commits them to the repo.

Source