lesfer.ma

This site is its own case study. It holds my projects, my journal and the Academy, and it answers questions about all of them. Each generation so far has been rebuilt around what the previous one taught me, and the current one is built on a single rule: the content is the product, and everything else, the AI included, exists to serve the reader.

Highlights

• One Next.js app with every page, article and project in the repository as MDX and YAML, modeled and edited through Keystatic. No database, and every content change is a commit.
• A home page where a twin drawn in scanlines sits in a vintage monitor and changes as you scroll: a head for the introduction, meshing cogs for the workshop, a page writing itself for the journal, a mortarboard for the Academy, a speech bubble for contact.
• The Academy: article series with their own pages, reading progress and section tracking, starting with a series on building reliable AI over company knowledge.
• A copilot that answers from the site's own content, cut into sections at its headings, and cites the exact section each claim comes from. Code checks every citation and drops the ones the model wasn't shown.
• Measured before it shipped: questions from real visitors and questions written for each kind of visitor, a held-out set never tuned against, and a judge model whose grading was itself checked against mine.
• A decision model at the door that scores each message's intent before the copilot answers, and stops the attempts to manipulate it.
• Readable by agents three ways: HTML for people, llms.txt for crawlers, and an MCP server that gives any agent the copilot's own tools.
• Page transitions that crossfade and morph titles and thumbnails into place, and a push-to-deploy pipeline that ships an immutable Docker image.

Three Generations

The first version, in March 2026, was a terminal: monospace everywhere, navigation written as shell paths, and two applications to run it, a Payload CMS with MongoDB behind a Next.js front end.

The second, in July, collapsed it into one Next.js app with its content in git, and introduced the scanline home and a copilot. That copilot answered from three layers: facts inlined in its prompt, evidence cards a model wrote offline for every page, and a few tools.

The third, in October, kept the single app and rebuilt most of what sits on it: the twin moved into a monitor with new drawings, Projects became the Workshop, the Academy arrived, the stack moved to Next.js 16.4 and React 19.3, and the copilot was rebuilt from measurement, which retired the offline cards and their pipeline altogether.

The Twin

The twin is a canvas of horizontal lines displaced by a heightfield, the look of shapes pressing up through cloth. Each shape is computed per point rather than painted, so it renders at any resolution, in a worker on its own canvas where the browser allows it. Through scanlines only silhouettes survive, so every drawing is a simple shape with soft edges. The head blinks and follows the pointer; open the copilot and the head comes back on any slide, its lines turn green, and its mouth moves while an answer streams or is read aloud.

The Copilot

Every answer starts from the visitor's question, the page they're reading, and a one-line map of everything on the site. Four read-only tools reach the rest: a keyword search over sections, reading a section or a whole document, and exact lists of projects and articles. The model chooses which to call. It writes section ids as it cites, and code turns the valid ones into numbered links to the exact heading. On a page that doesn't exist, the copilot knows which path failed and helps find what was meant.

The parts around it are what make it trustworthy rather than impressive. It's measured stage by stage, so a failure says whether the evidence never arrived, a citation was invented, or the answer itself went wrong. A classifier scores every message in parallel with the answer; in testing it stopped 10 of 15 manipulation attempts and blocked none of 45 legitimate questions. Answers leave a trace beside each visitor's rating, and a review queue turns the confirmed failures into new test cases. The companion journal entry covers the rebuild, the model comparison, and what broke along the way.

Content As The Product

lib/content is the only door to the content: pages, feeds, the sitemap, llms.txt, the copilot's knowledge and the MCP server all read through the same typed accessors, so a draft is hidden from all of them at once. A test checks that every internal link in the content resolves, and another that every evaluation case still points at sections that exist, so renaming a heading fails for free instead of in a paid eval run.

Delivery

Pushing to main runs a dependency audit, lint, type checks and the tests, then builds a standalone Docker image, publishes it, and deploys it behind a health check. The copilot needs three settings for its model (an OpenAI-compatible endpoint, a key and a model name), because provider resilience belongs in a gateway, not in this app. Around it sit a strict Content Security Policy, structured data, an RSS feed, and an Open Graph image for every page drawn in the same scanline style.