// v5 — Section dividers, Closing CTA, Substantial Footer, App entry
// SECTION DIVIDER — quiet typographic plate between IA groups
const V5GroupDivider = ({ label, n, title, copy }) => {
return (
{n}
— {label}
{copy}
);
};
// ENGAGEMENT MODES — content-driven cards for the contact section
// ENGAGEMENT MODES — ordered along the idea commercialization timeline
const MODES = [
{
name: "Workshop",
range: "1–5 days · with Portal",
body: "Structured sessions that move a team from scattered ideas to sharper decisions. Run with Portal when the room needs research, provocation, category signal, or outside creative pressure.",
fit: "Best when the team has the ingredients but needs signal, structure, and a better decision.",
href: "mailto:znerold@gmail.com?subject=Workshop%20with%20Portal",
cursor: "1–5 days · Portal collective",
// Idea commercialization timeline coverage — indices into IDEA_STAGES
zones: [0, 1]
},
{
name: "Prototype sprint",
range: "1–3 weeks · with Portal",
body: "A fast concept-to-artifact cycle using AI-native workflows, live research, and senior creative direction. Built for moments when a deck is not enough and the team needs something tangible to react to.",
fit: "Best when you need to make a hard decision, and the prototype has to do the convincing.",
href: "mailto:znerold@gmail.com?subject=Prototype%20sprint%20with%20Portal",
cursor: "1–3 wks · research-fed",
zones: [2, 3, 4]
},
{
name: "Consulting",
range: "4–12 weeks",
body: "Focused strategic engagement to shape a category, brand, product platform, website, campaign system, or AI-enabled workflow. Defined scope, defined deliverables, senior judgment from start to finish.",
fit: "Best when there is a specific problem to solve and a deadline to hit.",
href: "mailto:znerold@gmail.com?subject=Consulting%20engagement",
cursor: "4–12 wks · scope-defined",
zones: [1, 2, 3, 4]
},
{
name: "Embedded advisory",
range: "3–6 months",
body: "Part-time senior partnership inside the team's existing rhythm. Useful when product, brand, growth, AI, or category decisions need ongoing pressure, clarity, and cross-functional judgment.",
fit: "Best when the company is at an inflection point and needs a senior partner in the room.",
href: "mailto:znerold@gmail.com?subject=Embedded%20advisory",
cursor: "3–6 mo · in the room",
zones: [0, 1, 2, 3, 4, 5, 6]
},
{
name: "Selective staff leadership",
range: "Open-ended",
body: "Director, VP, or senior leadership roles for the right team. I'm open to staff opportunities when the category, people, mandate, and operating model make sense.",
fit: "Best when the role needs range, judgment, and a builder's relationship to ambiguity.",
href: "mailto:znerold@gmail.com?subject=Staff%20leadership%20conversation",
cursor: "Senior placement",
zones: [0, 1, 2, 3, 4, 5, 6]
}];
// Idea commercialization timeline — stages a new idea travels through
const IDEA_STAGES = [
{ id: "signal", label: "Signal", note: "Audience, culture, category" },
{ id: "frame", label: "Frame", note: "Thesis, positioning, language" },
{ id: "concept", label: "Concept", note: "Directions, range, system" },
{ id: "validate", label: "Validate", note: "Reduce, test, choose" },
{ id: "prototype", label: "Prototype", note: "Make it real" },
{ id: "ship", label: "Ship", note: "Production, launch, handoff" },
{ id: "scale", label: "Scale", note: "Operate, learn, grow" }];
const V5Engagements = () => {
const [active, setActive] = useState(2); // start on Consulting
const [paused, setPaused] = useState(false);
useEffect(() => {
if (paused) return;
const id = setInterval(() => setActive((a) => (a + 1) % MODES.length), 5500);
return () => clearInterval(id);
}, [paused]);
const pick = (i) => {setPaused(true);setActive(i);};
const activeMode = MODES[active];
const minZone = Math.min(...activeMode.zones);
const maxZone = Math.max(...activeMode.zones);
const N = IDEA_STAGES.length;
return (
{/* Compact opener — tiny dim eyebrow, headline directly below */}
04Engagements · ways to work together
Five ways to enter the work, depending on where the idea is stuck: signal, frame, concept, validation, prototype, ship, or scale.
{/* Idea-commercialization timeline — horizontal, shows active mode's coverage */}
{/* Background line */}
{/* Active coverage band */}
{/* Stage markers */}
{IDEA_STAGES.map((s, i) => {
const isActive = activeMode.zones.includes(i);
return (
{String(i + 1).padStart(2, "0")}{s.label}{s.note}
);
})}
{/* Two-column body — mode picker on left, dynamic detail on right */}
{/* Mode picker — linear list of selectable engagements */}
{MODES.map((m, i) =>
)}
{/* Dynamic detail panel — transitions when active mode changes */}
);
};
// ESCHER MARK — three interlocked Borromean rings. Each pair overlaps with an
// alternating over/under weave (A>B, B>C, C>A) so no ring sits consistently in front;
// the eye keeps trying to resolve the stacking order. Minimal at rest, hover starts a
// slow rotation and a soft diffused halo, click twirls 540° flipping the weave parity.
const EscherMark = () => {
const [twirl, setTwirl] = React.useState(0);
return (
);
};
// SUBSTANTIAL FOOTER — colophon-style closing surface
const V5Footer = () => {
const year = new Date().getFullYear();
const today = new Date().toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }).toUpperCase();
return (
);
};
// APP entry — IA reorganized into 3 groups: Work · Method · About
const V5App = () => {
useEffect(() => {
const handler = (ev) => {
const link = ev.target.closest("a[href^='#']");
if (!link) return;
const href = link.getAttribute("href");
if (href === "#" || href.length < 2) return;
const el = document.querySelector(href);
if (!el) return;
ev.preventDefault();
window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
};
document.addEventListener("click", handler);
return () => document.removeEventListener("click", handler);
}, []);
return (
{/* === SHOWCASE === single featured case study replaces the multi-card recent work */}
{/* === METHOD === starter is baked into V5Method */}
{/* === AI FLUENCY === its own section */}
{/* === ABOUT === facet wheel introduces Chris (consolidated, no separate opener) */}
{/* === ENGAGEMENTS === ways to work together — orbital roadmap */}