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

Description and use

The author built a custom GitHub profile that visualizes contributions as a 3D cyberpunk city, using SVG images and GitHub Actions for daily updates.

Problem

The author wanted a custom GitHub profile that visually represented their contributions in a unique, engaging way.

Outcome

The profile now displays a single, seamless cyberpunk console with an animated contribution city that updates daily, all within GitHub’s restricted environment.

Workflow

• 1. Decided to create a custom profile.
• 2. Chose SVG images to bypass GitHub’s sandbox restrictions.
• 3. Built individual SVG slices (header, stats, city, footer, project cards).
• 4. Stacked slices with <img> tags to form a continuous console.
• 5. Implemented a 3D contribution city by tilting the grid and using a square‑root height formula.
• 6. Added neon glow, scanlines, and a typing animation via CSS inside SVG.
• 7. Set up a daily bot to query GitHub’s API once, generate updated SVGs, and commit them to the repo.
• 8. Stored secrets in GitHub Actions secrets to keep API tokens hidden.
• 9. Tested rendering and fixed caching issues by ensuring image dimensions matched a 40‑px grid.

Evidence

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

Source

But here's the thing. 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

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

Source

I set up a daily bot to query GitHub’s API once, generate updated SVGs, and commit them to the repo.

Source