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

Description and use

The author turned their GitHub profile into a cyberpunk console with a 3D city representing contributions, using SVG images and daily updates via GitHub Actions.

Problem

The author wanted a custom GitHub profile that visually represented their contributions in a unique way, but GitHub’s README sandbox limits interactivity and styling.

Outcome

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

Workflow

• 1. Conceived the idea of a 3D contribution city and cyberpunk console.
• 2. Designed SVG assets for each console slice (header, stats, city, project cards, footer).
• 3. Embedded CSS animations inside SVGs to create typing and blinking cursor effects.
• 4. Used a 40‑pixel grid and glow overflow to align seams between images.
• 5. Calculated building heights with a square‑root formula to avoid extreme towers.
• 6. Generated city layout from GitHub contribution data, sorting buildings back‑to‑front.
• 7. Automated daily updates via a GitHub Actions workflow that queries the GitHub API once per day, regenerates SVGs, and commits changes.
• 8. Stored secrets (API token) in GitHub Actions secrets to keep them private.
• 9. Published the final README with the stacked SVG images.
• 10. Monitored for API failures and handled retries.
• 11. Shared the result on Dev.to.

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 used a 40 px grid. Every slice is a multiple of 40 pixels tall, so the faint background grid continues across the cuts instead of jumping.

Source

h = 8 + 110 · √(c/cmax)

Source