Case study · jackmalzone.com
The site you’re already on.
The studio front door for a one-person shop working across construction, real estate, wellness, marine consulting, and creative. The site argues with its own boilerplate — a CLAUDE.md in the repo functions as a copy filter against the forty-other-studio-sites trap.
The job
My work spans web development, AI workflows, dashboards, construction technology, creative systems, real-estate websites, wellness platforms, marine consulting, and a long-term writing project. A standard portfolio would flatten that into a skill list and a card grid.
I wanted a front door with a stronger spine — one that names the kinds of operators I build for, shows the real projects as case studies rather than thumbnails, and reads as the work I actually do rather than as a template I rented.
Constraints
There is no client copy review. Every line had to be defended against my own boilerplate. The CLAUDE.md in the repo is the answer to that — a list of banned words and a single north-star rule (“Don’t describe the site as restrained. Restrain it.”) that any future me, or any AI agent editing the site, has to argue with before shipping new copy.
Brand layering: Jack Malzone is the public name. Seventh Agora is a long-term writing and design project that informs the work without being promoted. Two names, one visitor — without confusing them, and without inventing a third name to compete with the first two.
Day theme and dark theme are not the same palette inverted. Day reads as Pacific Northwest to California coast — cool parchment, coastal cypress, iron oxide. Dark reads as Iceland — basalt, glacier, moss, volcanic ochre. Same semantic tokens, different visual references.
What I built
Next.js 16 App Router, React 19, TypeScript, plain CSS with BEM, component plus CSS co-location, static `*.data.ts` files for content until Sanity is justified. Eight top-level routes plus the case-study route you’re reading now.
Two named features: **Studio Console** at `/studio-console` (structured intake instrument for new project conversations) and **Systems Atlas** at `/systems-atlas` (visualization of how the projects connect across domains). Roman numerals as section markers — the homepage, the About page, and each case study carry their own sequence. Earned ornament; kept where they fit.
An accessibility toolkit with five user-controllable preferences (theme, text size, font, letter-spacing, contrast). A pre-paint init script reads stored preferences from localStorage and applies them to the `<html>` element before the first render, so changing themes or text size never produces a flash of unstyled choice.
A JM monogram in Playfair Display Semi-Bold as the public mark — forest tile with parchment letters in day mode, moss tile with basalt letters in dark mode, anchored to the OpenGraph card so every share reads as the same identity.
SEO surfaces: robots, sitemap (auto-includes new case-study slugs), Person and WebSite JSON-LD in the root layout, per-case-study Article JSON-LD authored by the Person via `@id` reference.
A `/work/[slug]` route with five published case studies — Vital Ice, Field Ledger, Beringia Marine, Tale of Two Rivers, and this one. Same five-section structure. Same out-of-scope discipline. Each one extends one array entry away.
What I deliberately did not build
The CLAUDE.md treats this section as the most load-bearing one in the whole repo. Most of the site’s discipline is here.
- Not a SaaS — no signup, no dashboard, no user account, no waitlist.
- Not a blog yet — case studies are higher ROI for this stage; a blog would be infrastructure ahead of writing.
- Not a manifesto for Seventh Agora — the project is named but not promoted, and the CLAUDE.md explicitly forbids inventing a third brand.
- One typed track() helper, not scattered analytics calls — PostHog, Meta, and Google Ads all fan out through the same function, and any ID left unset is a clean no-op.
- No public pricing tiers yet — the held decision is to keep pricing off the page until I want to surface it.
- No costume framing — every section names what it is in plain words; the CLAUDE.md banned-words list catches every reach for boilerplate.
What stays maintainable
Static content lives in `*.data.ts` files until editorial volume justifies Sanity. The case-study data file is one array. Adding the next entry is one edit; the sitemap, the work-page card link, and the Article JSON-LD all pick it up.
The CLAUDE.md at the repo root is the copy filter. It survives me. A future engineer or AI assistant editing this site has to argue with it before shipping new copy — and that argument is the value.
Component plus CSS co-location, BEM naming, one folder per component. No Tailwind, no design-system framework, no abstraction ahead of need. A future refactor opens one component file and reads what it does.
The CLAUDE.md catches what I would have shipped without it. The site is what is left after that filter runs.