Building this Cotswolds portfolio

Top-down pixel Cotswolds village at 2pm, with cottages, a river bridge, villagers, and Workshop, Library, and Post office links — The homepage at mid-afternoon — navigation by walking into buildings, with HTML destinations as a fallback.

Why a village, not a landing page

Most portfolios open with a hero and a grid of cards. This one opens in a small Cotswolds village. You walk into the Workshop for case studies, the Library for writing, or the Post office to get in touch.

The HTML pages still exist — they have to, for accessibility, search engines, and anyone who turns JavaScript off — but the intended path is the map. The village is navigation with atmosphere, not a game that traps the content inside a canvas. From writing, work, or contact, the studio mark opens a notes home; [V] returns to the square.

The same village at dusk with lit windows, street lamps, and a moon clock reading 7:45 PM — Same square at dusk. Lighting follows solar elevation for a time-zone-derived location; `?time=HH:MM` previews any hour.

Stack choices

Astro builds the site as static HTML. Case studies and articles live as Markdown with validated frontmatter. There is no client router and no React shell around the portfolio; Phaser mounts only on the homepage when the village boots.

Phaser 4 runs the top-down village: tiled maps, collisions, interiors, villagers, day/night lighting from the visitor’s local time, and construction robots that patrol the church and workshop. Leaving a content page is an ordinary link back to the village, not a custom SPA history layer.

Aseprite and Tiled own the art and maps. Generators under scripts/art/ can scaffold tilesets and maps; once the .aseprite and .tmj files exist they are the source of truth. Robot and drone sprites were iterated the same way — regenerate, export, look at them in the square.

Alchemy deploys the static build to Cloudflare Workers Assets, with a custom domain on danielcmadeley.com. Preview and production are separate stages. The site stays noindex until the release checklist is complete; draft case studies are labelled as drafts on purpose.

Full village map poster showing cottages, church scaffolding, sheep pasture, river, and robots — A full map render of the square — workshop, library, post office, church works, and the sheep pasture across the bridge.

What “game-first” actually means

The homepage is the overlay. If Phaser fails to load, a short HTML fallback lists Workshop, Library, and Post office so the site remains usable. The studio welcome is only on the content side, opened from the mark on writing, work, and contact.

About as a standalone page was dropped. The design-studio cottage is scenery. Work, writing, and contact are the three destinations that matter.

Workshop page listing draft case studies with technical diagrams and Back to village link — Inside the Workshop: case studies as a bench list, drafts marked honestly, still one click back to the village.

Content and honesty

The workshop case studies are still drafts. They follow a problem → contribution → approach → outcome shape, but outcomes and permissions are not invented for polish. The library can hold real articles as they become ready; this post is the first shelf occupancy.

Contact is framed as “work with me”: what is a good fit, and a clear mailto. No fake metrics, no placeholder social proof.

Library writing index showing this article On the shelf and upcoming reading-list topics — The Library shelf after this piece shipped — one published note, and a short reading list for what comes next.

What I would change next

Turn draft case studies into publishable ones with approved wording and diagrams.
Ship a second article from a real engineering project, not only meta writing about the site.
Tighten performance budgets for the Phaser download on slower phones.
Finish release gates (indexing, sitemap, social cards) once the content is ready.

Until then, the village stays the front door — and the Library finally has something on the desk.