I Was Overwhelmed, So I Turned My GitHub Profile Into a Roguelike Dungeon

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

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

Задача

The author was overwhelmed with a long to‑do list and needed a motivating project to regain momentum.

Результат

The project transformed the author’s GitHub profile into an engaging roguelike dungeon, providing daily visual feedback on contributions and motivating continued work.

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

• 1. Designed a README layout using stacked SVG images to form a single console.
• 2. Built a .NET 10 console app (DungeonGen) with renderers for each section (header, dungeon, inventory, quests, about, connect).
• 3. Mapped contribution calendar to dungeon tiles, added night sky, hero, and stat boxes.
• 4. Generated interactive GitHub Pages page for hover tooltips.
• 5. Implemented GitHub Action to run generator daily and commit changes only when SVGs differ.
• 6. Added cache‑busting query parameters to SVG URLs to force image refresh.
• 7. Handled GraphQL API limitations and partial data errors.
• 8. Adjusted rendering of side rails to avoid zero‑width bounding box issue.

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

I started small: a header with a typing animation, built by animating a clipPath width one character at a time.

Источник

A GitHub Action runs the generator every day and commits only if something changed:

Источник

Each renderer is just C# string building that produces SVG. No libraries, no magic.

Источник

The generator now adds a hash of each SVG to its URL (dungeon.svg?v=1a2b3c4d), so a changed image gets a new URL.

Источник