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

Описание и применение

Автор создал динамический киберпанковый консольный интерфейс для своего профиля GitHub, визуализируя вклад в виде 3D‑города, обновляющегося ежедневно, используя SVG и GitHub Actions.

Задача

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

Результат

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.

Рабочий процесс

• 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.

Доказательства

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

Источник

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

Источник

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.

Источник

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

Источник

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

Источник