Blog

Handing off a case study page

Project pages in Midnight Office share one layout: title, category, hero image, and structured sections for context, approach, and outcome.

Keep copy in markdown

Buyers add src/content/projects/*.md or edit the data file — whichever fits their workflow. Components accept props; they do not embed paragraphs.

Images at twice the display size

Export WebP at two times the rendered width. Pass explicit width and height to Astro’s image component so the layout never jumps while fonts load.

The portfolio bands on the home page point at these case studies. When you add a project, wire it in src/data/projects.ts and create the slug page automatically through the collection loader.