Steve Johnson
Menu

← All projects

This site and its Playwright test suite

2026 · Website

How this portfolio is built: Astro on GitHub Pages, one data set behind the web resume and every PDF, and a build that checks itself on every pull request.

Problem

A personal site has to stay accurate as the resume changes. Keeping a web resume and several PDFs in step by hand invites drift, and a public site that can break silently is a poor advertisement for someone who tests software.

What I built

  • An Astro site hosted on GitHub Pages, built from one set of data files: roles, bullets, summaries, skills, education, and resume versions.
  • Content collections with strict schemas, so a bad entry fails the build: single-hyphen copy, no phone numbers, bullets that start with a past-tense verb, references that must resolve, and a public flag on every bullet.
  • One resume data set renders the web pages, a print layout, and a PDF for each version, printed in the build with Playwright from the same routes.
  • A project archive with filters for year, type, and tags that works without JavaScript, driven by one YAML file per project.
  • An issue-first workflow: every change starts as an issue, gets its own branch and pull request, and merges after the build check passes, with each merge deploying to the live site.
  • A test suite that reads the same YAML files the site is built from, so a test states what a page should contain without a second hand-copied list.
  • Pages written in plain HTML and CSS: Astro components with two hand-written stylesheets (screen and print) and no CSS framework, including light and dark themes that follow the system setting.
  • Requirements traceability: each requirement is a GitHub issue, every Playwright test is tagged with the requirement it verifies, and CI fails when a requirement has no test or a tag points at a requirement that does not exist. The deploy publishes the resulting matrix on this site.
  • Retrieval-grounded drafting of resume bullets, as a developer tool: a local embedding model, a committed index of the approved bullets, a scored eval that drafts with and without the retrieved examples, and a read-only page that shows which bullets are picked for 13 fixed test queries and how close each one is.
  • Built with Claude Code under those guardrails.

Stack

  • Astro
  • TypeScript
  • GitHub Pages
  • GitHub Actions
  • Playwright
  • HTML
  • CSS
  • Claude Code

Outcome

  • Live on GitHub Pages, with a full build of the site and its PDFs checked on every pull request.
  • Broken data is caught at build time instead of in production: each rule has been broken on purpose to confirm that it fails with a readable message.
  • A public Playwright suite checks that every resume version renders from the real data, that each version has one real PDF of a sensible length, and that a crawl from the home page finds no broken link, anchor, or orphaned page.
  • The suite also covers the interactive pieces (filters, art, audio, navigation) and runs axe accessibility scans of every page in light, dark, and phone width.
  • CI runs the suite on every pull request and it must be green before a merge. A short smoke test then checks the live site after every deploy, weekly, and on demand.