The devanmetz.com homepage with picture cards for OpenFloat Archery, Goop Troops, and a custom electric bicycle.
The homepage during the project-wiki redesign, using original project imagery.

Overview

This site brings together my software, hardware, physical builds, and writing. The portfolio is also the project wiki: each picture card opens a page with the project’s working details, supporting photos, references, and current state.

The blog remains a place for build stories. Those posts link back to their project pages, where the reference material stays together.

Content and page structure

Projects and posts are Markdown files in Astro content collections. Frontmatter describes the title, summary, category, tags, publishing state, images, and project facts. The rest of the file holds the documentation.

Project headings generate a contents list automatically. Build photos and linked blog stories join that navigation when present. The same project data supplies the homepage cards, portfolio grid, detail page, and social preview.

The former standalone wiki notes have moved into the appropriate projects. Old URLs redirect to the new page or the relevant heading so existing links continue to work.

Images and browsing

The portfolio uses one consistent card layout for every project. Category filters help browse games, hardware, props, tools, and writing; all cards are present in the initial HTML before JavaScript runs.

Original build photos, application captures, and credited project artwork are kept with the source. Astro generates responsive WebP images for pages and JPEG images for social previews during the build.

The design uses self-hosted Space Grotesk, warm paper colors, blue actions, compact spacing, and responsive layouts. Keyboard focus, heading order, descriptive image text, and reduced-motion behavior are part of the implementation.

Publishing and privacy

The GitHub source repository is private, while published pages are public. Draft content is excluded from listings and generated routes. Future-dated entries remain excluded until a build runs after the publication date.

That distinction is important: repository privacy does not make deployed content private. Only material intended for the public site is published. Original project archives remain separate from the site’s curated content.

The build produces a sitemap and a blog RSS feed alongside the HTML. Each page has a canonical URL and social metadata.

Hosting and the contact form

Cloudflare Workers Static Assets serves the generated site at devanmetz.com. Page rendering happens during the Astro build, so browsing the portfolio does not require a content database or per-request page rendering.

A small Worker handles the homepage contact form. It validates submissions, verifies Turnstile, applies a request limit, and sends an email through Cloudflare. The delivery address and private verification key stay out of the generated page and browser script.

The form preserves entered text if delivery fails and reports success after the email service accepts the message. The separate Contact URL redirects to the form at the bottom of the homepage.

Checks and maintenance

Changes pass Astro and TypeScript checks, contact-handler tests, and a production build. Static link checks cover page references and section anchors. Desktop and mobile browser checks cover the pages affected by a change.

Source changes are committed to GitHub, whose workflow repeats the checks and build. Production deployment is a separate Cloudflare step. Keeping those steps explicit makes it possible to verify both the source revision and the public result.

Reference documentation: Astro content collections and Cloudflare Static Assets.