Vibe-Coding This Website
Every line of code in this portfolio was written by AI agents. The work was mine in a different sense: I set the direction, turned taste into constraints, split the problem across agents, challenged their output, and decided what was allowed to ship.
- Year
- 2026
- Role
- Direction and review · AI implementation
- Status
- Ongoing
Overview
Every line of code on this site was written by AI.
I did not open the editor and quietly implement the difficult parts by hand, but I also did not give one chatbot a vague prompt and accept whatever came back. I treated agents as a delivery team. I owned the product direction, information architecture, content standard, risk decisions and final acceptance bar. The agents inspected the repository, proposed plans, divided independent work, wrote the implementation, reviewed one another and tested the result in the real interface.
My job was to keep that system pointed at the right problem. During this redesign I rejected ornamental concepts that made the portfolio feel like an awards entry, required all 24 records to survive, chose a compact editorial index, refused a theme toggle, insisted that reconstructed Labs disclose their fidelity, and kept sending transitions back when a correct route still flickered.
I supplied screenshots and recordings, challenged stale or hardcoded content, and required remote content to remain the source of truth. Content originally lived in Sanity; the current version uses Supabase for validated portfolio records and media. The original version of this case study documented the first successful workflow: narrow agents, written rules, aggressive review and persistent decisions. This update shows the same method under harder conditions—a complete redesign, multiple record types, parallel agents, media optimization, CMS migration and a worktree handoff.
The capability is not simply prompting an AI to code. It is directing a group of agents well enough that their separate contributions become one coherent, reviewable product.
My role: Direction and review · AI implementation.
System map
The human-directed agent delivery loop
The agents own implementation. Bill owns intent, decomposition quality, taste, risk and the decision to ship.
- 01 · Bill
Set the direction
Define the problem, mood, constraints, non-negotiables and what must not be built. The work starts with judgment, not code.
- 02 · Lead agent
Inspect before proposing
Read the repository, CMS model, existing decisions and live behaviour so the plan responds to the actual system rather than an imagined one.
- 03 · Lead agent
Decompose and delegate
Split independent work across specialist agents—content, architecture, media, transition analysis and browser QA—with explicit boundaries and expected evidence.
- 04 · Specialists
Write the implementation
Agents edit the code, schemas and content, reuse the shared system and validate their own slice. Every implementation line is AI-written.
- 05 · Review agents
Challenge the output
Review for regressions, architectural drift, accessibility, loading races and gaps between the brief and the visible interface.
- 06 · Bill
Reject, reframe or accept
Compare the result with the intended experience. Ornamental concepts, a theme toggle, fake Lab fidelity and weak content framing were all rejected here.
- 07 · Evidence
Verify and preserve state
Build every route, test desktop and mobile layouts, validate the Supabase content, record handoffs and keep one authoritative working tree.
Read the text schematic
BILL · HUMAN DIRECTION
brief · mood board · taste · constraints · final acceptance
│
▼
LEAD AGENT · SYSTEM CONTEXT
inspect repository · read CMS · recover decisions · identify unknowns
│
▼
PLAN + DELEGATION
bounded tasks · parallel specialists · explicit evidence
┌─────────────────┼─────────────────┐
▼ ▼ ▼
CONTENT AGENT BUILD AGENT QA / REVIEW AGENT
narrative + CMS code + schemas browser + architecture
└─────────────────┼─────────────────┘
▼
ADVERSARIAL REVIEW
bugs · drift · accessibility · loading races · fidelity
│
▼
BILL · HUMAN GATE
reject · reframe · request evidence · approve
│
▼
VERIFIED DELIVERY
Validated Supabase content · release checks · browser review
Authorship: AI agents wrote the code. Bill directed the system that made it coherent.The decisions
Keep authorship explicit
The agents wrote the code; I directed the product and accepted the work. Saying both is more useful than pretending either side worked alone, and it makes the case study about a real capability rather than a novelty claim.
Turn taste into operational constraints
“Minimal editorial” is too vague for an agent. I made the standard concrete: preserve all records, avoid ornamental awards-site gestures, keep the interface compact, reject a theme toggle and prevent the old portfolio shell from leaking into the new system.
Delegate narrow work in parallel
Independent agents could research preview imagery, audit media policy and rewrite the case-study narrative at the same time. The lead agent retained integration ownership so parallel speed did not become parallel inconsistency.
Give every agent the real system, not an isolated ticket
Agents inspect the current repository, remote content model, transition utilities and handoff notes before acting. Context is what stops a locally correct patch from reviving legacy UI or breaking a different record type.
Review generated code structurally
A page can look finished while its media swaps race, navigation logic duplicates or content comes from the wrong source. Review therefore checks architecture and state ownership as well as pixels.
Test the interface, not only the build
Static checks cannot reveal a one-frame flash or a stale preview. Agents have to operate the site, compare desktop and mobile, inspect video readiness and verify every relevant record family.
Keep the human gate final
Agents can propose, implement and critique, but they do not decide what represents me. I can reject a polished result, change the framing or ask for deeper evidence until the work matches the intent.
Evidence
The hard part
Polished output can still miss the taste
SymptomAgents repeatedly produced competent concepts that felt ornamental, generic or too eager to look like an awards portfolio.
CauseModels optimize the stated request and familiar design patterns; they do not inherit an unspoken personal standard.
FixName the violations, preserve rejected directions in the handoff and convert preferences into constraints the next agent can apply.
LessonGuiding agents means making taste legible without reducing it to a single prompt.
Parallel agents can create parallel truths
SymptomContent, media and architecture work can each look correct while disagreeing about routes, record counts or the source of truth.
CauseSpecialists optimize their bounded task and may not see changes made by another workstream.
FixKeep one integration owner, use a canonical record catalogue and validate the assembled system after every parallel pass.
LessonDelegation only scales when ownership of integration remains explicit.
AI makes redesigning dangerously cheap
SymptomEntire visual directions can be produced quickly enough that novelty starts competing with purpose.
CauseLow implementation cost removes a natural brake on exploration.
FixReturn every concept to the product question: does it make the body of work easier to understand, or is it merely new?
LessonThe faster agents build, the more discipline the human needs when choosing what survives.
Correct code can still flicker
SymptomRoutes arrived at the right page, yet intermediate frames, stale previews and black media states appeared during real interaction.
CauseAsynchronous decoding, video readiness, document paint and transition timing formed one state machine across several modules.
FixMake agents inspect the full interaction frame by frame, coordinate ownership of the cover and underlay, and test every record family instead of patching one route.
LessonDeep UI direction requires asking agents for temporal evidence, not a final screenshot.
The wrong server made correct data look stale
SymptomAfter the Sanity migration, a refreshed page still showed the old case-study copy and preview.
CauseTwo worktrees were serving different code, and the older dev server held a memoized pre-migration collection.
FixVerify process ownership, retire duplicate servers, keep one authoritative worktree and query Sanity directly before blaming the CMS.
LessonAgentic delivery includes environment control and source-of-truth verification, not only code generation.
Results and limits
Outcomes
- Every implementation line in the current portfolio was written by AI agents under human direction and review.
- One compact editorial system now preserves and connects all 24 projects, case studies, Labs and notebooks.
- Parallel agent work produced content research, architecture changes, media optimization and browser QA without giving up one integration owner.
- The site uses Supabase as the source of truth for portfolio records and media, with a validated contract shared by the index and detail routes.
- The repository and its architecture decision record make the AI-written implementation and its operating constraints inspectable.
- The result remains deliberately ongoing: visual judgment, transition refinement and final acceptance stay human responsibilities.
- The release workflow checks the Astro project and complete content catalogue before generating the public pages.
Guardrails
- AI-written changes are reviewed for correctness, security, accessibility and architectural drift before acceptance.
- Astro emits static output; Sanity content is fetched at build time and write credentials never reach the browser.
- Release builds fail instead of silently publishing an empty portfolio when required Sanity configuration or content fetching fails.
- Content-security policy, HSTS, clickjacking protection and MIME-sniffing protection are configured in the Vercel output.
- External links use isolated browsing contexts, and repository checks guard against secrets or unsafe runtime behaviour.
- Interactive Labs retain honest fallbacks and recorded evidence when source fidelity or browser capabilities are limited.