← Back to portfolio

How this
site was built.

I designed and ran this as a product. Defined the brief, structured the team, set quality gates, reviewed every deliverable, made every framing decision. Here’s the structure, the process, and what I learned.

Not a template.
A product.

The brief was specific: position for product leadership roles at AI/ML companies in Brazil. Answer three unspoken questions in under 60 seconds. Feel warm, colorful, personal — Farm Rio energy, not McKinsey.

I treated it as a product build:

  • Defined the audience and positioning
  • Wrote the project brief
  • Designed the team structure (8 agents, 4 waves)
  • Set quality standards and review gates
  • Ran iterative reviews with revision rounds
  • Made all scope and framing decisions

Starting artifacts

My CV — games-focused, needed repositioning for AI/product leadership

The CV I started with was written for games/audio roles. It emphasized SEGA, Zero Latency VR, FMOD, and OSSIC. The portfolio needed to reposition the same career arc toward AI product leadership — keeping the creative foundation but leading with Apple, Microsoft, and AI/ML delivery.

Career narrative — drafted by me: Creative Foundation → Big-Tech → Intentional Move

Three chapters, written by me before the agents started:

  • Creative Foundation: Games, VR, developer ecosystems, community building
  • Big-Tech Upgrade: Microsoft (Design → Product), Apple (Platform → Management)
  • Intentional Move: Brazil, INSEAD, LATAM AI market
Visual references — Farm Rio energy, bright colors, purple anchor
  • • Anchor color: purple (joyful, saturated — not corporate)
  • • Palette: multi-color, bright, rainbow-adjacent. Farm Rio: lush, tropical, bold.
  • • Mode: light-first. Warm off-white backgrounds, not sterile white.
  • • Typography: modern, slightly warm. Not geometric/cold.
  • • Generous whitespace, rounded corners, soft shadows.
Anti-pattern list — what the site must NOT be
  • • No skill percentage bars
  • • No timeline graphics
  • • No “I’m passionate about...” copy
  • • No dark-mode-default
  • • No corporate blue-and-gray
  • • No stock testimonials
  • • No template feeling
Agent team design doc — 8 agents, 4 waves, quality gates, handoff protocol

A 700-line document specifying:

  • • Each agent’s role, responsibilities, and deliverables
  • • Quality checks each agent must pass before handoff
  • • Wave sequencing and dependency chain
  • • Communication protocol between agents
  • • Definition of Done for the full project
  • • Anti-patterns to avoid (10 specific failure modes)

My role: product
owner & CEO.

Eight AI agents, organized into four waves:

  • Two management agents ran continuously (Project Lead + Sally Proxy)
  • Six execution agents worked sequentially with quality gates between each wave
  • I wrote every brief, reviewed every output, and made all scope and framing decisions

Click any agent below to see their role, deliverables, and quality bar.

Product Owner & CEO

Sally Kellaway

Brief, team design, quality gates, all decisions, final approval

Always Active

Project Lead

+

Orchestrated the full team. Owned the task list, assigned work, reviewed every deliverable, made judgment calls when agents faced ambiguity. Ran quality gates between waves — nothing moved to the next wave without passing review.

Deliverables

  • Task assignments for all agents
  • Quality gate reviews (4 gates)
  • Conflict resolution between agents
  • Escalation decisions to Sally

Quality bar

Does the site, as a complete artifact, make a hiring manager want to meet Sally?

Always Active

Sally Proxy

+

Single source of truth about Sally — career facts, key numbers, tone preferences, what can and cannot be shared publicly. Other agents asked the proxy instead of guessing. Prevented misrepresentation.

Deliverables

  • Career fact verification for all agents
  • Tone and voice guidance
  • Confidentiality checks (Apple/Microsoft)
  • Context answers for 20+ agent questions

Quality bar

Would Sally recognise herself in every word on this site?

Wave 1

Architect

+

Scaffolded the Astro 5 project from scratch. Set up directory structure, TypeScript config, Vercel deployment, content collection schemas, i18n routing, form handling, ESLint/Prettier. Defined the file architecture that every other agent built into.

Deliverables

  • Astro 5 project scaffold
  • Directory structure (pages, components, layouts, content, data)
  • Vercel deployment config
  • Content collection schemas with Zod validation
  • showcase.json data structure
  • README.md for GitHub

Quality bar

Does npm run dev start cleanly? Can every agent find where their work goes?

Wave 1

Design System

+

Built the visual foundation. Extended Tailwind config with full token system — colors, typography, spacing, shadows. Created 8 reusable component primitives. Defined the signature gradient that ties the site together.

Deliverables

  • Tailwind config with full color scale (purple 50-950, coral, teal, pink, yellow)
  • 8 Astro components (Container, Section, Card, Button, Tag, Heading, ColorBar, GradientText)
  • Typography system with clamp() responsive sizes
  • Signature gradient: linear-gradient(135deg, #7C3AED, #EC4899, #F97316, #FBBF24)
  • WCAG AA contrast verification

Quality bar

Bold and colorful, not chaotic. Does it feel tasteful to someone who was a Design Lead?

Wave 2

Copywriter

+

Wrote every word a human reads on the site. Hero tagline (3 options presented), career narrative in 3 chapters, shipped work descriptions, section headers, contact copy, meta/SEO copy. All in Sally's voice — warm, direct, playful, confident.

Deliverables

  • Hero tagline (3 options → Sally chose)
  • Career narrative: 3 chapters, ~500 words
  • Section headers with personality
  • 17 shipped work descriptions
  • Contact section copy
  • Meta descriptions and OG tags

Quality bar

Read it aloud. Does it sound like a real person? Zero clichés. No "passionate" or "leveraged."

Wave 2

Builder

+

Assembled the site from design system components and content. Built every page section, navigation, scroll animations, responsive layout, contact form with AJAX submission. Made it work beautifully on a phone.

Deliverables

  • 7-section single-page layout
  • Sticky nav with scroll state + mobile hamburger
  • Scroll-triggered reveal animations
  • Shipped work grid with category filtering
  • Contact form with Web3Forms AJAX
  • Responsive at 375px, 768px, 1024px, 1280px

Quality bar

Looks intentional at 375px on an iPhone SE. No horizontal scroll. Lighthouse > 95.

Wave 3

Integrator

+

Merged the approved copy into the built pages. Ensured content rendered correctly in components. Verified all showcase items displayed from JSON data. Connected all the pieces into a coherent whole.

Deliverables

  • Copy integrated into all page sections
  • Showcase data rendering verified (17 items)
  • Content collection files populated
  • All links and CTAs working

Quality bar

Does every section tell a coherent story from hero to contact?

Wave 4

QA

+

Final quality pass across everything. Content review for accuracy and tone. Technical audit for accessibility, performance, and SEO. Competitive review against 3-5 peer portfolios. The last line of defense before this represents Sally to the world.

Deliverables

  • Content accuracy check (all claims vs CV)
  • Accessibility audit (WCAG AA)
  • Performance audit (Lighthouse)
  • Keyboard navigation test
  • Screen reader test on hero + contact
  • Mobile screenshot review at 4 breakpoints
  • 3 independent adversarial testers

Quality bar

The hiring manager test: Series B AI startup in São Paulo. 30 seconds on phone. Want to schedule a call?

How the waves worked

Wave 1 (Foundation) ran first — the architect and design system agent worked in parallel to build the scaffold and visual language. Nothing else started until Wave 1 passed quality review.

Wave 2 (Content & Build) started only after Wave 1 was approved. The copywriter and builder worked in parallel — one producing words, the other assembling pages from the design system. Both needed the scaffold and components from Wave 1.

Wave 3 (Integration) merged copy into pages. Could only start once both the copy and the built pages were approved.

Wave 4 (Quality) was the final gate. Full accessibility, performance, and content audit. Adversarial QA with three independent AI testers running different review angles simultaneously.

Phases, waves,
decisions, gates.

Phases are the macro delivery arcs. Waves are how agents were sequenced within Phase 1. Key decisions (★) and quality gates (◇) show where I intervened. Click any item to expand details and build log highlights.

P0 Milestone

Initial Artifacts

Started with: CV, career narrative, 3 reference sites, anti-pattern list, positioning statement.

  • Sally's CV (games-focused — needed repositioning for AI/PM)
  • Career narrative draft (Sally-authored)
  • Visual references: Farm Rio energy, warm + colorful
  • Anti-patterns: no skill bars, no timelines, no "passionate about"
  • Target: AI/ML companies in Brazil/LATAM

From the build log

Day 1: "The file structure IS the architecture. Get it right."

Details
P1 Wave 1 Milestone

Project Scaffold

Astro 5 project created. Directory structure, TypeScript, Vercel deployment, content schemas.

  • Astro 5 with Tailwind CSS + Svelte integration
  • File structure matching the brief exactly
  • Content collection schemas (Zod validation)
  • Vercel adapter configured
  • ESLint + Prettier + .gitignore

From the build log

Build passed first time. Zero config issues.

Details
P1 Wave 1 Milestone

Design System

8 component primitives, full color palette, signature gradient, responsive typography.

  • Container, Section, Card, Button, Tag, Heading, ColorBar, GradientText
  • Purple 50-950 scale + coral, teal, pink, yellow
  • Signature gradient: linear-gradient(135deg, #7C3AED, #EC4899, #F97316, #FBBF24)
  • clamp() responsive type (hero: 2.5rem→4.5rem)
  • Purple-tinted shadows, 16px radius, generous whitespace
Details
P1 Quality Gate

Quality Gate 1

Does it build? Is the design system cohesive? Can agents find where their work goes?

  • npm run dev starts cleanly — no errors
  • All routes defined and returning layouts
  • Tailwind tokens match brief spec
  • Components flexible enough for builder to compose
  • Design feels "Farm Rio not McKinsey" — verified

From the build log

Passed. Wave 2 greenlit.

Details
P1 Wave 2 Milestone

Copy Written

All site copy drafted: hero tagline (3 options), career narrative (3 chapters), descriptions, contact, SEO.

  • 3 hero tagline options → Sally chose option C
  • Career narrative: Creative Foundation → Big-Tech Upgrade → Intentional Move
  • 17 shipped work descriptions
  • Section headers with personality (not "About Me")
  • Meta descriptions + OG tags
Details
P2 Decision

Decision: Voice Pivot

Third person → first person. The entire site was rewritten.

  • Original brief specified third person ("Sally built...")
  • After Phase 1 review, first person felt more direct and human
  • Every section rewritten — not a find-replace
  • This was the single biggest framing decision in the project

From the build log

"It felt more direct and human. More me."

Details
P2 Decision

Decision: Skills Cut

22 skills → 10. AI-assisted brand review said: "listing everything makes a reader trust none of it."

  • AI agent playing brand consultant role reviewed the full site
  • Recommendation: cut to 10 focused on AI product leadership
  • Removed: generic PM skills, soft skills, tools
  • Kept: Applied AI PM, GenAI Delivery, Cross-Functional, People Management
Details
P2 Decision

Decision: Card Curation

20 shipped work cards → 16. Merged 4 Zero Latency into 1. Removed weak entries.

  • Each card must have: verifiable link OR clear impact metric
  • 4 Zero Latency VR entries → 1 consolidated card
  • Removed cards without public evidence
  • Added: expandable details, ownership badges, year, role
Details
P2 Quality Gate

Quality Gate 2

Does it sound like Sally? Zero clichés? Mobile-first? Gradient used consistently?

  • Read all copy aloud — sounds like a real person
  • Search for banned words (passionate, driven, leveraged) — zero found
  • Mobile review at 375px — looks intentional
  • Signature gradient: hero, cards, contact button — consistent not excessive
  • Hiring manager test: want to schedule a call? — YES

From the build log

"Read it aloud. It sounds like someone you'd want to work with."

Details
P2 Wave 4 (QA) Milestone

Adversarial QA

3 independent AI testers. Content, UX, hiring manager perspective. Found 9 issues.

  • Content tester: verified all claims against CV, found missing university name
  • UX tester: found empty group headers on filter, broken contact gradient
  • Hiring manager tester: confirmed positioning works, flagged form error state
  • 9 total issues found → all fixed before launch
  • No placeholder content anywhere
Details
P1-P2 Decision

Decision: Mandatory Copy Review

Every word requires Sally approval. 2 revision rounds. Opening line rewritten 3 times.

  • Copywriter produces draft → Project Lead compiles for review
  • Sally reviews, marks changes → Copywriter revises
  • Round 2: Sally approves or requests further changes
  • Opening line: "Sally did not start in a boardroom" (rejected) → "Sally's first product was a sound effect" (rejected) → final version approved
  • This gate was non-negotiable throughout the project
Details
P3 Milestone

Featured Project Begins

The Market Beneath the Model — second agent team, 6 researchers, designer collaboration.

  • New team: 8 agents (data architect, 6 researchers, editor)
  • Schema designed: 11 entity types, TypeScript interfaces
  • 381 structured records produced
  • 4 Svelte interactive components built
  • 19 PM decisions made and applied

From the build log

All 6 research agents delivered. Central thesis validated across 5 independent streams.

Details
All Milestone

Deployment Pipeline

GitHub → Vercel auto-deploy. Static build, zero config, preview branches.

  • Push to main → Vercel auto-deploys in ~30s
  • Static output: no server, no database, no backend
  • Build time: ~1.5s for 8 pages
  • Preview deployments on feature branches
  • Svelte islands hydrate on client — static-first
  • HTTPS auto-provisioned by Vercel
Details

How decisions
flowed.

Every approval went through me. Agents produced; I reviewed and decided. The project-lead made tactical calls; I made strategic ones.

Sally (me) Writes brief, defines team, sets quality bar
Project Lead Assigns tasks, runs gates, resolves agent conflicts, escalates to Sally when needed
Sally Proxy Answers agent questions about Sally’s career, tone, intent — agents never guess
Execution agents
  • • Architect — project scaffold
  • • Design System — visual foundation
  • • Copywriter — all site text
  • • Builder — page assembly
  • • Integrator — copy into pages
  • • QA — final quality pass
Project Lead Reviews deliverables against brief, passes or sends back
Sally (me) Final approval on all copy, visual direction, and framing decisions

What only I decided:

  • Voice direction (third → first person)
  • Which skills to keep (22 → 10)
  • Which shipped work to showcase (20 → 16)
  • Visual direction and brand energy
  • What can and can’t be shared publicly
  • Every sentence of copy

Running a
product org
of AI agents.

Briefs are the product.

The quality of an agent’s output is directly proportional to the specificity of the brief. Vague instructions produce generic work. Detailed briefs with research questions, deliverable formats, quality gates, and anti-patterns was the highest-leverage work in this project.

Quality gates prevent compounding errors.

Without gates between waves, downstream agents build on upstream mistakes. The project-lead caught design system issues before the builder started, and copy tone issues before integration. Fixing problems early is cheaper in tokens, too.

The proxy pattern eliminates guessing.

A dedicated agent holding all context about me — career facts, tone, preferences, what I can and can’t share — meant execution agents never had to guess. They asked the proxy, got a grounded answer, and kept building.

The human in the loop is the product leader, not the QA.

The most important interventions weren’t bug fixes. They were framing decisions: switching to first person, cutting skills, choosing which work to showcase. These are judgment calls that define how the world sees you. They can’t be delegated.

The same skills that run a product org run an agent team.

Scoping work into clear tasks. Writing briefs that eliminate ambiguity. Setting quality bars. Reviewing outputs against intent. Making priority calls when resources are constrained. Managing an AI agent team is product management — just with a different kind of team.

Want to build your own?

I’ve put together a starter kit with the prompt, the process, and tips for people new to building with AI tools.

Get the starter kit →