# devanmetz.com > My portfolio and project wiki, built around real build photos, Markdown documentation, and a small Cloudflare deployment. Canonical page: [devanmetz.com]() Project date: Sep 2026 Updated: 2026-10-14 Category: Web design & publishing Status: Live website Tags: Astro, TypeScript, Markdown, Cloudflare - **Purpose:** Portfolio, project documentation, and build stories - **Stack:** Astro static pages + a Cloudflare contact handler - **Publishing:** Private source repository; public website ## In short I built this site to bring together my software, hardware, physical builds, and writing in a portfolio that also serves as my project wiki. I keep working details, supporting photos, references, and build stories connected so the project material stays together. ![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 ### Project documentation Projects and posts are Markdown (plain text with formatting markers) files in Astro (a framework for building websites) content collections (groups of content files with a shared structure). Frontmatter (metadata at the start of a content file) 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. ### Keeping old links working 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 ### Cards and search 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 (the page’s document markup) before JavaScript (browser code) runs. The homepage shows all projects and a search field for the whole site. Search checks project wikis, blog posts, and the other public pages, including build details and video transcripts. It handles partial words and small spelling mistakes, then shows matching text and a thumbnail. The index is rebuilt from the published pages with each deployment, and searches run in the browser. ### Image formats and accessible design Original build photos, application captures, and credited project artwork are kept with the source. Astro generates responsive WebP images (a compressed image format, sized for different screens) for pages and JPEG images (another compressed image format) for social previews during the build. The design uses self-hosted Space Grotesk (a font served with the site), warm paper colors, blue actions, compact spacing, and responsive layouts. Keyboard focus, heading order, descriptive image text, and reduced-motion behavior (respecting a preference for less animation) 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. The build produces a sitemap (a list of site URLs for search engines) and a blog RSS feed (a subscription feed for new posts) alongside the HTML. Each page has a canonical URL (its preferred web address) and social metadata (information used in shared-link previews). ## Hosting and the contact form ### Serving the published pages Cloudflare Workers Static Assets (Cloudflare’s hosting service for built files) 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. ### Contact delivery A small Worker (code running on Cloudflare’s servers) handles the homepage contact form. It validates submissions, verifies Turnstile (Cloudflare’s automated-abuse check), 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. ## Reading with an AI agent The [agent index]() links to a Markdown version of every project and blog post. The [full-text download]() puts the whole collection in one file, and the [JSON export]() (a structured data format) provides structured project details for other tools. These files are generated from the same published content as the website. They include project facts, photos and captions, video links, and available transcripts. Each document links back to its regular web page for citations. ## Checks and maintenance Changes pass Astro and TypeScript (JavaScript with type checks) checks, contact-handler tests, and a production build. Static link checks cover page references and section anchors (links to headings within a page). Desktop and mobile browser checks cover the pages affected by a change. GitHub Actions (automated repository workflows) repeats the checks and build on each push. The finished site is then deployed to Cloudflare. Reference documentation: [Astro content collections]() and [Cloudflare Static Assets](). ## FAQ ### What is the site built with? The site uses Astro static pages, TypeScript, and Markdown content collections. Cloudflare Workers Static Assets serves the built files, and a small Worker handles the contact form. ### Where does site search run? Search runs in the browser using an index rebuilt from published pages with each deployment. It searches project wikis, blog posts, public pages, build details, and video transcripts. ### Can an AI agent read the project documentation? Yes. The agent index links to Markdown versions of projects and posts. A full-text download and structured JSON export are generated from the same published content and link back to the regular web pages. ### Is the website source public? The source repository is private, while published pages are public. Draft content is excluded from listings and generated routes. ## Related reading - [KICKR CORE 2 Hub]() - [Market Atlas]() - [Free Hunting Map]()