// v5 — Recent Work (4 contemporary projects) + Through-Line const RECENT_WORKS = [ { n: "01", slug: "mariannes", client: "Marianne's Olive Oil", year: "2025", role: "Website · brand · editorial commerce", title: "A simple product made culturally and emotionally specific.", unstable: "A premium olive oil entering a crowded category where every brand uses the same hills, the same fonts, and the same words for \"good.\"", audience: "Buyers who pay $40 for oil are buying a story, a producer, a calendar of harvest. Generic luxury doesn't earn that.", system: "A website and brand experience built around taste, origin, trust, and the pace of a founder-led food brand — homepage direction, product storytelling, editorial structure, and commerce moments arranged like a magazine that happens to sell oil.", artifacts: ["Website", "Editorial system", "Commerce surfaces", "Visual language"], proves: "A simple product can feel culturally and emotionally specific.", specimen: "mariannes", href: null }, { n: "02", slug: "outdoorsy", client: "Outdoorsy", year: "2022–24", role: "Host platform · brand · cross-platform design system", title: "A category-defining platform rebuilt around the people who make it possible.", unstable: "A marketplace whose supply side — the hosts — wasn't centered anywhere in the brand or the product. Growth depended on them, but the experience didn't feel built for them.", audience: "Hosts running real businesses on the platform, plus the internal product, design, and engineering teams who had been shipping out of separate playbooks across Android, iOS, and web.", system: "A warmer host-centered brand refresh, a cross-platform design system with shared tokens and patterns, and prototyped host tooling — delivered as DRI inside the team, not next to it.", artifacts: ["Brand refresh", "Design system", "Host tooling", "Cross-platform patterns"], proves: "Brand, product, and system design can come together as one integrated body of work.", specimen: "outdoorsy", href: "showcase.html" }, { n: "03", slug: "rvrs", client: "RVRS", year: "2025", role: "Product · brand · venture shaping", title: "Helping a new idea find its shape before the market has language for it.", unstable: "An early venture whose category doesn't quite exist yet — the founders know the product, but the audience does not yet have words for what they're being offered.", audience: "First users, first investors, first hires. All three have to recognize themselves in the same surface and walk away with the same one-line description.", system: "A product and brand system that translates an early idea into market presence: brand platform, product framing, interface direction, messaging system, and the concept architecture the team uses internally to make decisions about what RVRS is and isn't.", artifacts: ["Brand platform", "Product framing", "Interface direction", "Messaging system"], proves: "A new idea can find its shape before the market has language for it.", specimen: "rvrs", href: null }]; // Small inline icons — visual shorthand per (project, layer) // 4 projects × 3 layers = 12 unique animated icons const V5LayerIcon = ({ project, layer }) => { const key = `${project}-${layer}`; const COMMON = { width: 22, height: 22, viewBox: "0 0 24 24", "aria-hidden": "true", className: `v5-layer-icon v5-layer-icon-${key}` }; // ===== MARIANNE'S OLIVE OIL ===== if (key === "mariannes-unstable") { // 5 identical bottles in a row — sameness return ( ); } if (key === "mariannes-audience") { // Half-sun rising over harvest horizon — calendar of harvest return ( ); } if (key === "mariannes-system") { // Open magazine spread — pages opening return ( ); } // ===== PSYCHEDELIC SCIENCE ===== if (key === "psychedelic-unstable") { // 5 dots oscillating at different speeds — moving at different speeds return ( ); } if (key === "psychedelic-audience") { // 3 overlapping circles — multiple audiences sharing one surface return ( ); } if (key === "psychedelic-system") { // Concentric rings expanding from center — signal at the center return ( ); } // ===== RVRS ===== if (key === "rvrs-unstable") { // Dashed outline shape rotating — category not yet defined return ( ); } if (key === "rvrs-audience") { // 3 dots arranged in triangle pointing at center — first users, investors, hires recognize themselves return ( ); } if (key === "rvrs-system") { // Translation arrow — sketch → solid form return ( ); } // ===== OUTDOORSY ===== if (key === "outdoorsy-unstable") { // Off-center compass — the host isn't pointing at center return ( ); } if (key === "outdoorsy-audience") { // Tent + dashed trail — hosts on the road return ( ); } if (key === "outdoorsy-system") { // Three device frames sharing one token (clay dot) — cross-platform system return ( ); } // ===== SPOR ===== if (key === "spor-unstable") { // Balance scale tilting — between wellness and pharmacy return ( ); } if (key === "spor-audience") { // Daily ritual dots — one lights up sequentially return ( ); } if (key === "spor-system") { // Packet with measured dose marks filling sequentially return ( ); } return null; }; // Bespoke SVG specimens — large editorial plate per project const V5Specimen = ({ kind, year, client }) => { if (kind === "mariannes") { return ( ); } if (kind === "psychedelic") { return ( ); } if (kind === "rvrs") { return ( ); } if (kind === "outdoorsy") { return ( ); } if (kind === "spor") { return ( ); } return null; }; const V5RecentCard = ({ c, i }) => { const ref = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { const el = ref.current;if (!el) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) {setSeen(true);io.disconnect();} }, { threshold: 0.15 }); io.observe(el); return () => io.disconnect(); }, []); return (

{/* LEFT — specimen as the hero visual (clickable when a case study exists) */} {c.href ? ( ) : (

)} {/* RIGHT — narrative tower */}

{c.client} {c.role} {c.href ? (

) : (

)} What it made possible

{c.proves}

The unstable idea

{c.unstable}

The audience problem

{c.audience}

The system I shaped

{c.system}

— Artifact set

{c.artifacts.map((a) => {a})}

{c.href && ( Open the full case study → )}

); }; const V5Work = () => { return (

01 Recent work

The most useful view of the practice isn't chronological. It's the set of live category problems I've been working through recently — premium food, psychedelics, regulated CPG, social systems, and new product platforms.

{RECENT_WORKS.map((c, i) => )}

); }; // PRINCIPLES — five things every good engagement has to produce const PRINCIPLES = [ { n: "01", verb: "Make the idea legible.", body: "Find the language, metaphors, categories, and emotional logic that let people understand what they're looking at." }, { n: "02", verb: "Make the product usable.", body: "Turn ambiguity into interfaces, flows, prototypes, packaging, or experiences people can actually move through." }, { n: "03", verb: "Make the story repeatable.", body: "Build the narrative system so the team, brand, audience, and market can all carry the idea forward in the same words." }, { n: "04", verb: "Make the system teachable.", body: "Translate the work into frameworks, curricula, playbooks, templates, and shared language a team can use without me." }, { n: "05", verb: "Make the work scalable.", body: "Create the structure that lets the idea survive beyond a launch — content systems, design systems, growth systems, operating models, or AI workflows." }]; const V5Principles = () => { const ref = useRef(null); useEffect(() => { const el = ref.current;if (!el) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { el.querySelectorAll(".v5-through-row").forEach((r, i) => { r.style.setProperty("--d", `${i * 110}ms`); r.classList.add("is-in"); }); io.disconnect(); } }, { threshold: 0.15 }); io.observe(el); return () => io.disconnect(); }, []); return (

— Operating principles · the work, in five moves

The category might be software, cannabis, psychedelics, CPG, education, AI, or regulated operations. The principles don't change. Every engagement is shaped to produce five things — and if even one is missing, the work doesn't survive past the launch.

{PRINCIPLES.map((t) =>

{t.n}

{t.verb}

{t.body}

)}

Find the signal. Shape the system. Make the idea understandable. The output might be a website, a brand platform, a packaging line, a product concept, a syllabus, an AI prototype, or an operating model. The real work is making the idea usable.

); }; Object.assign(window, { V5Work, V5RecentCard, V5Principles });