// v5 — About as a faceted hexagonal compass // Adapted from v2's CredentialsSection — one practitioner, six lenses. const V5_FACETS = [ { id: "strategist", roman: "I", label: "Strategist", discipline: "Brand · category · positioning", tagline: "Helping unfamiliar ideas find their language.", body: "The work often starts before the category is clear. A team can describe what they are building, but not what world it lives in. I help shape the positioning, audience model, narrative architecture, and operating logic that let the rest of the work compound instead of scatter.", evidence: [ { t: "Marianne's Olive Oil · brand & website", s: "Recent", pip: "pip-green" }, { t: "RVRS · venture shaping · brand platform", s: "Recent", pip: "pip-green" }, { t: "Schwazze · multi-banner growth system", s: "2024–26", pip: "pip-steel" }, { t: "Native Roots · CMO · 50+ product launches", s: "2017–20", pip: "pip-steel" }] }, { id: "builder", roman: "II", label: "Builder", discipline: "Product · interface · AI", tagline: "Design as a thinking instrument. AI as the new tool.", body: "Twenty years of product and experience design, now consolidated around AI-native workflows. From early concept to shipped surface, the practice produces interfaces, prototypes, product systems, and buildable artifacts using Claude, OpenAI, and MCP exploration as part of the design instrument, not as a side track.", evidence: [ { t: "Apple Music · rapid prototyping", s: "2015", pip: "pip-steel" }, { t: "Adobe Marketing Cloud · 3 patents", s: "2012–14", pip: "pip-copper" }, { t: "Airbnb Trips · design sprints", s: "2016", pip: "pip-steel" }, { t: "AI-Native HMI Foundry · Claude → Ignition", s: "Active", pip: "pip-green" }] }, { id: "educator", roman: "III", label: "Educator", discipline: "CU Boulder · adjunct", tagline: "The classroom is where the method gets sharper.", body: "Adjunct Professor of Design at the University of Colorado since 2017. I teach human-centered design, product development, business strategy, and creative process. Frameworks that survive a room of graduate students tend to survive client work too.", evidence: [ { t: "Adjunct Faculty · CU Boulder", s: "2017–now", pip: "pip-green" }, { t: "Advanced Tools · graduate", s: "Active", pip: "pip-green" }, { t: "Design Leadership · graduate", s: "Inactive", pip: "pip-steel" }, { t: "Startup Design · graduate", s: "Inactive", pip: "pip-steel" }] }, { id: "author", roman: "IV", label: "Author", discipline: "Writing · Kendall Hunt", tagline: "Writing forces the method to become clear.", body: "Two books published with Kendall Hunt in 2024. Story (by) Design and The Futures of Brand translate design, story, and brand strategy into frameworks students and teams can use. The books are the practice's working memory: written and designed to be used in the order a designer actually meets the problem.", evidence: [ { t: "Story (by) Design · Kendall Hunt", s: "2024", pip: "pip-copper" }, { t: "The Futures of Brand · Kendall Hunt", s: "2024", pip: "pip-copper" }, { t: "Frameworks in active use · CU classroom", s: "Ongoing", pip: "pip-green" }, { t: "Reusable models · client engagements", s: "Ongoing", pip: "pip-green" }] }, { id: "founder", roman: "V", label: "Founder", discipline: "Portal · Stay Gold · practice", tagline: "A studio engine behind the practice.", body: "Founded Portal in 2013 as the studio layer of the practice: senior creative talent, real-time research, human-centered design, and lean development. Co-founded Stay Gold in 2020. Portal lets the work expand beyond a single operator without losing the through-line.", evidence: [ { t: "Portal · founder · studio engine", s: "2013–now", pip: "pip-green" }, { t: "Stay Gold · co-founder · studio", s: "2020–24", pip: "pip-steel" }, { t: "Independent design practice", s: "Active", pip: "pip-green" }, { t: "Senior creative network", s: "Network", pip: "pip-green" }] }, { id: "translator", roman: "VI", label: "Translator", discipline: "Emerging · regulated", tagline: "Making new categories make sense.", body: "The through-line across everything: working at the moment when an idea is not yet obvious. Psychedelics, cannabis, functional mushrooms, AI-native product, SCADA/HMI, clean energy. The job is to make the unfamiliar legible, desirable, usable, teachable, buildable, and trusted.", evidence: [ { t: "Psychedelic Science · brand + social", s: "Recent", pip: "pip-green" }, { t: "Spor · regulated CPG · microdose", s: "Recent", pip: "pip-green" }, { t: "Cultivation SCADA/HMI · regulated industrial", s: "Lab", pip: "pip-copper" }, { t: "Grid Flexibility Command Twin · clean energy", s: "Lab", pip: "pip-copper" }] }]; const V5Facet = () => { const [active, setActive] = useState(0); const [paused, setPaused] = useState(false); const wheelRef = useRef(null); useEffect(() => { if (paused) return; const id = setInterval(() => setActive((a) => (a + 1) % V5_FACETS.length), 6500); return () => clearInterval(id); }, [paused]); useEffect(() => { const el = wheelRef.current;if (!el) return; const io = new IntersectionObserver(([e]) => { if (!e.isIntersecting) setPaused(true); }, { threshold: 0.05 }); io.observe(el); return () => io.disconnect(); }, []); const pick = (i) => {setPaused(true);setActive(i);}; const R = 200; const labelR = 300; const angleFor = (i) => -90 + i * 60; const rad = (a) => a * Math.PI / 180; const ptFor = (i, r = R) => { const a = rad(angleFor(i)); return [Math.cos(a) * r, Math.sin(a) * r]; }; const hexPts = V5_FACETS.map((_, i) => ptFor(i).join(",")).join(" "); const activeFacet = V5_FACETS[active]; const activeAngle = angleFor(active); return (
03 About · meet the practitioner

One practice. Six lenses.

Independent design director, founder, author, and educator. Based in Boulder. Twenty years of practice across software, advertising, regulated CPG, cannabis, psychedelics, AI, and education.

Different work, same instrument.
The lens changes. The practice holds.
{/* Wheel */}
Lens {activeFacet.roman} / VI
{/* Portrait at center */}
Chris Znerold
{/* Facet labels */} {V5_FACETS.map((f, i) => { const [lx, ly] = ptFor(i, labelR); const on = i === active; let anchor = "center"; if (lx > 30) anchor = "left";else if (lx < -30) anchor = "right"; return ( ); })}
{/* Detail panel */}
Lens {activeFacet.roman}
{V5_FACETS.map((_, i) =>

{activeFacet.label}

{activeFacet.tagline}

{activeFacet.body}

    {activeFacet.evidence.map((it, j) =>
  • {it.t} {it.s}
    • )}
{String(active + 1).padStart(2, "0")} / 06
); }; Object.assign(window, { V5Facet, V5_FACETS });