The previous version of this site had drifted — pages from years ago, projects that no longer existed, a register that didn't match the work I'm actually doing now. The refresh started with the obvious — pages, palette, typography — and quickly became substrate work. Most of the durable value isn't in the visible site; it's in the methodology that produced it.
The Constitution discipline
The redesign is governed by a single document: DESIGN.md. It opens with the site Northstar, then a Northstar per section (Home, Projects, Stream, Toolkit, Photographs), then operating principles (UI, UX, animation, content), then a decision log where every load-bearing call gets recorded with its reasoning and an explicit reversal condition. By the end of the build day, 34 decisions had landed there.
That sounds like overhead. In practice it's the opposite. The Constitution is the artifact that lets AI agents execute consistently against the design intent — every decision they need to make is either pre-decided or trace-able to a Northstar. The site is a worked specimen of intent-based execution: specify the outcomes, name the constraints, let the work happen against the recorded substrate rather than from scratch each session.
The default for personal-site redesigns is "design-by-vibes" — successive rounds of taste arbitration with no recorded trail. This one runs the opposite way. When a decision gets reversed (and a few did during the build), the reversal is logged with its own reasoning. Future me, future contributors, future AI agents can read the trail and not relitigate.
Identity tissue across fourteen pages
A multi-page site without recurring identity elements reads as a collection of separate pages, not as one place. The architectural fix is small but load-bearing: a brand mark in a consistent position, breadcrumbs showing depth, a lowercase wordmark, palette that holds across light and dark modes.
- Favicon with a sky-blue ring — one SVG file works on both light and dark browser chrome via the ring's mid-tone visibility. No runtime adaptation hack; the ring is the answer.
- Lowercase wordmark — "nicolai johannesen" in the masthead and across all footers. Inter bold, no inflation, no borrowed register.
- Breadcrumbs on every non-home page — Home › Projects › this page. Same nav rendered everywhere; visitors don't feel like they landed on a disconnected page.
- One palette, two modes — Slate (cool-deep paper + sky accent). Light and dark variants from a single set of CSS custom properties.
- Asset-size matches consumption depth — teaser crops on index pages, full-size on detail pages. The TradeTi.me screenshot demonstrates the principle: 200px teaser on the home, full natural aspect on its project page.
None of these are new patterns. What's distinctive is that they all earn their place from the same Northstar (identity sufficient to bracket the work content) rather than being independently chosen at design-by-vibes altitude.
Substrate that compounded
The visible site is the smaller half of what the build produced. The larger half is reusable substrate for future projects:
- Design Critique Patterns catalogue — twelve named patterns codified across visual hierarchy, layout, motion, information architecture, cross-page consistency, and editorial. Each pattern has a worked specimen from the v3 build and a generalizable lesson phrased as instruction. Reusable on every future site.
- Image Generation Triage Workflow SOP — six-step process for AI-generated imagery with explicit asset-size-matches-consumption-depth rule, a real-asset-precedence check that prevents generating images when real product screenshots would do, favicon design discipline, and the WebP optimization pipeline. The TradeTi.me hero dropped from 324 KB to 60 KB without visible quality loss using this.
- Substrate-Connected Comments SOP — discipline for code/CSS/HTML comments. Every comment connects to a Northstar code (LAY-2-v3) or a decision-ID (D-v3.19) so future readers can trace from code to reasoning without leaving the codebase.
- /headless-critique skill — multi-mode (light + dark) headless rendering automation that caught two real bugs the single-mode passes missed during this build.
- Memory rules captured in real-time — the PA invisibility principle, "or" means alternatives not additives, no life-context hallucination in user's voice, resist the limitations-section default. Each rule has a worked failure-mode specimen from the build session.
The pattern: the visible work and the substrate work compound together. Building the personal site produced eleven artifacts that will speed up every future project. That's the actual return on the build — not the website itself, but the substrate the website's construction left behind.
Current state, what's next
The site is built and verified locally across all 13 pages in both light and dark mode. Multi-mode headless rendering caught the bugs; image optimization shipped; favicon ships; brand-mark recurs; breadcrumbs work. The Constitution has 34 decisions logged.
What remains: deploying v3 to replace the live v2 on nicolaijohannesen.com. The deploy script exists (scripts/deploy.sh njcom sites/nicolaijohannesen.com/); ratification of the build is the gating step. After deploy, the site continues compounding via stream entries (small ships and notes), project-page enrichments (as TradeTi.me ships new versions, Essential Concepts consolidates, the books develop), and the Constitution itself (as new design decisions surface, they get logged the same way).
The bet behind this whole exercise: a personal site can be Constitution-led design that compounds reusable substrate for future projects, not just a portfolio. Most personal sites don't earn the Constitution because they don't accrete enough decisions to justify the discipline. This one does — and the substrate trail produced is the proof of concept.