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 unique, engaging way.

Результат

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

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

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

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

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

Источник

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:

Источник

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.

Источник

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

Источник

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

Источник