Shipping COBOL Quest and Gnomad Camping Sounds

Two vibes, one goal: show the work

Agency sites sell trust. Portfolio projects prove you can ship. This month I published two builds that sound unrelated but share one pattern: browser-first, demo-ready, no login wall.

COBOL Quest — Technomancer RPG

COBOL Quest teaches COBOL through fantasy framing: Identification Division spells, CICS rituals, DB2 dragon hoards. Stack is Next.js 14, Monaco editor, Prisma — with a static export + localStorage path for the public demo.

Try the live demo →

Why COBOL? Because legacy literacy is a superpower for Main Street operators who still run on systems younger devs never touched. Wrapping it in RPG progression makes the learning curve honest instead of intimidating.

Gnomad Camping Sounds — Wilderness Mixer

Gnomad Camping Sounds is the opposite energy: five looping channels (fire, rain, stream, wind, crickets), SVG campsite that reacts to your mix, sleep timer with fade-out. React + Vite + Web Audio API.

It’s a palate cleanser project — small, polished, and useful when you’re debugging at 2 AM and need rain without opening YouTube.

Publishing pattern

Both got project pages on davidcole.cloud, cover images, stack tags, and demo links under /DEMO/. Same pipeline I use for client graduation: build → project MDX → bento grid → optional blog note (this one).

What I’d do differently

I’d record 30-second screen captures for each demo earlier — static screenshots don’t sell interactive audio or Monaco compile feedback.

Next: one combined “playground” index linking all /DEMO/* builds so visitors don’t hunt the sitemap.