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

Description and use

The author built an interactive GitHub profile as a roguelike dungeon using stacked SVG slices and a .NET generator, restoring motivation and visualizing contributions.

Problem

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

Outcome

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

Workflow

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

Evidence

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

Source

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

Source

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

Source

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

Source