Skip to content
Goat head chess knight pieceA theme-aware monochrome engraving-style illustration of a chess knight piece with a goat head.Sam Ananias Cases
activeTechnical Powerhouse

Portfolio Architecture & Content System

A content-first personal portfolio platform built with Astro SSG, Tailwind CSS v4, and version-controlled markdown content collections.

Key decision: Use Astro SSG for zero client JS by default and 100% portable markdown content.
Portfolio Architecture & Content System

Project Overview

This portfolio is built to demonstrate engineering discipline, clean architectural boundaries, and deliberate problem solving. Rather than relying on heavy client-side frameworks or unstructured CMS blobs, the site leverages Astro v5 Content Collections, Tailwind CSS v4 CSS-first design tokens, and a strict verification suite.

Portfolio Architecture & Hero UI Layout

Key Architecture Decisions

  • Content-First SSG: Pages are pre-rendered at build time with 0kb client-side JavaScript by default.
  • Specification-Driven: Every page is governed by an explicit Information Architecture specification inside docs/plans/.
  • Automated Verification Suite: Code passes Prettier, ESLint, Astro typecheck, Playwright E2E tests, and axe-core accessibility audits on every change.

Key project outcomes

  • Built for instant page loads with zero unnecessary client script execution.
  • Designed and verified to meet strict web accessibility and design system standards.
  • Portable Markdown content collections managed with strict TypeScript schemas.