# The site you are on is the case study

This page documents the portfolio itself. I started with an empty repository, wrote the design and build system, then prepared the static files for deployment. The repository contains both the authored source and the generated pages. Its verification script is there too.

### Built from source

Case-study prose lives in Markdown and shared page structure lives in HTML partials. A dependency-free Node script renders the Markdown, assembles the CSS and JavaScript needed by each route, inlines the structured data, and writes the static pages.

The pages do not depend on a client-side framework. Vercel Insights and Speed Insights are loaded separately for analytics; the portfolio remains functional if those scripts are unavailable.

![Build pipeline](media:site-build-pipeline)

### The design rules

The palette has one background token and three text colors. A separate pair controls selected text. Light and dark themes change those token values without introducing another palette.

Layout values are named in CSS. The main article column is 760px wide on desktop. It sits beside a 240px sidebar with a 48px gap. A 6px token handles compact link stacks; larger separations use 24px, 32px, 48px, or 80px according to the relationship between elements. Case titles are 28/36 on desktop and 24/32 on mobile. Body copy is 16/24, while captions and code labels use 14/20. Inter Variable is self-hosted for text and Geist Mono is used for code.

Links and controls use the gray text tokens at rest and move to the primary text color on direct hover. Keyboard focus uses a visible ring. The Heph demo has a reduced-motion mode; routine controls change state without decorative animation.

```css title="src/styles/10-base.css"
:root {
    --bg: #000000;
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --text-tertiary: #767676;
    --highlight-bg: #b3b3b3;
    --highlight-text: #ffffff;
    --section-gap: 24px;
    --section-content-gap: 6px;
    --text-media-gap: 32px;
    --link-line-height: 24px;
    --theme-toggle-size: 32px;
    --theme-toggle-optical-offset: 2px;
    --footer-stack-bottom-gap: 4px;
    --footer-title-optical-offset: 4px;
    --sidebar-column: 240px;
    --content-column: 760px;
    --layout-gap: 48px;
    --media-radius: 22px;
}
```

### Verification

The verification scripts check the design tokens, responsive rules, content constraints, route order, asset references, and live crawler access. Missing images and files that are no longer referenced are both reported.

The same script rebuilds every page in memory and compares the result with the committed HTML. A source edit followed by a missed rebuild therefore fails verification instead of leaving stale output unnoticed.

![Verification harness](media:site-verify-harness)

### The Heph demo

The terminal on the [Heph](/heph) case study is a simulation written in vanilla JavaScript. It plays one retrieval sequence and opens cited evidence. The keyboard controls shown in the interface also work. Reduced-motion users receive the completed state without the timed playback.

### Machine-readable routes

The site publishes a Schema.org identity graph, WebFinger records, host metadata, an llms.txt reference, an RSS feed, a humans.txt file, and a sitemap. Its `Content-Signal` header permits search, AI input, and AI training. These files identify Gil Rodrigues and link back to the same canonical homepage.

### Delivery and access

The functional CSS and JavaScript are inlined by route. Fonts are preloaded, and responsive image sets let the browser choose an appropriate file for the viewport. The HTML uses landmarks, live regions, visible keyboard focus, and reduced-motion handling.

I designed and wrote the portfolio along with its build and verification scripts. The page above is generated by the same system it describes.