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

Description and use

The author replaced the default GitHub contribution graph with a 3‑D cyberpunk city rendered in SVG, embedded as images in the README, and automated daily updates via GitHub Actions.

Problem

Create a visually engaging GitHub profile without using JavaScript or CSS, while representing contribution data in a custom 3D city visualization.

Outcome

The profile now displays a single, animated cyberpunk console that updates daily, visually representing the user's contribution history as a 3D city.

Workflow

• 1. Design SVG assets for each console slice (header, stats, city, footer).
• 2. Embed SVGs as <img> tags in README to bypass sandbox restrictions.
• 3. Use CSS inside SVGs for animations (typing cursor, glow).
• 4. Slice console into 23 images, aligning top to create seamless window.
• 5. Generate city from contribution data: tilt grid, apply square‑root height scaling, add windows and lights.
• 6. Automate daily updates via a GitHub Action that queries the GitHub API once, builds SVGs, commits changes, and pushes.
• 7. Store API token as a secret to keep credentials hidden.

Evidence

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 decided to go further and turn the whole profile into a cyberpunk console: neon glow, scanlines, a terminal that types out my name, and a frame that holds everything together.

Source

I fixed a bug, refreshed, saw the bug. Fixed it again, refreshed, still the bug. Turns out I'd fixed it the first time.

Source

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

Source