// Project case study page — compact grouped sidebar + wide single-column content.
const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React;
// Which sidebar group each section belongs to (echoes the reference layout).
const SIDEBAR_GROUPS = [
{ label: "Summary", ids: ["summary", "background", "overview", "context", "problem", "solution"] },
{ label: "Process", ids: ["research", "scope", "improvements", "wireframes", "exploration", "feedback", "final", "process", "retrospective", "reflection"] }];
// Lets any nested CaseFigure open the page-level lightbox without threading
// a handler through every render path.
const ZoomCtx = React.createContext(null);
// Safari-style window chrome for screen recordings. Rendering the frame in CSS
// (rather than baking it into the video) keeps the chrome crisp at any DPR and
// lets the URL change per project.
// NOTE: the `browser_window.jsx` starter was evaluated and rejected here — it's
// a dark-theme Chrome window with a tab bar at a fixed pixel width/height,
// whereas these figures need light Safari chrome, no tab bar, and fluid width
// to fill the case-study content column.
function BrowserFrame({ url, children }) {
const dot = (bg) => ({ width: 10, height: 10, borderRadius: "50%", background: bg, flexShrink: 0 });
return (
{/* Toolbar — deliberately minimal so the recording stays the focus. */}
{/* Address bar — narrow and centered; it labels the screen, nothing more. */}
{url}
{/* Balances the traffic lights so the URL sits optically centered. */}
{children}
);
}
// Minimalist phone shell for mobile screen recordings: rounded corners, no
// bezel or notch, soft shadow behind, and a plain mobile-browser address bar
// so the recording reads as a phone in a browser. Narrow and centered so a
// portrait recording doesn't dominate the column.
function PhoneFrame({ url, children }) {
return (
{/* Address bar — deliberately plain; it labels the screen, nothing more. */}
{url}
{children}
);
}
// Large case-study figure: image (or placeholder) on a soft panel, caption below.
// Skips a lead-in on a looping figure video (native loop always restarts at 0).
function useVideoStart(videoStart) {
const ref = useRefP(null);
const onLoaded = () => {
const v = ref.current;
if (v && videoStart) {try {v.currentTime = videoStart;} catch (e) {}}
};
const onTimeUpdate = () => {
const v = ref.current;
if (!v || !videoStart) return;
if (v.currentTime < videoStart - 0.15) {try {v.currentTime = videoStart;} catch (e) {}}
};
return videoStart ? { ref, onLoadedMetadata: onLoaded, onTimeUpdate } : {};
}
function CaseFigure({ src, videoSrc, caption, label, aspect = "16 / 10", priority = false, w = 1600, h = 1200, crop, bleed, frame, phoneFrame, flat, spaceAbove, shadow, maxWidth, videoStart }) {
const onZoom = React.useContext(ZoomCtx);
const canZoom = !!(onZoom && (src || videoSrc));
const open = () => canZoom && onZoom({ caption, src, videoSrc });
const vidStart = useVideoStart(videoStart);
return (
{caption &&
{caption}
}
);
}
function CompactSidebar({ sections, activeId, onJump, onTop, onHome }) {
// Flat list of sections, each optionally followed by its subsection links.
return (
// Sticky column that does NOT scroll. Holds the Back to Home button plus
// the section nav, so the button stays pinned while a long section list
// scrolls internally beneath it.
{/* The top nav auto-hides while reading, so this is the persistent
way back to the work index. */}
);
}
function MobileTimeline({ sections, activeId, onJump }) {
// The pill row scrolls horizontally and can be many pills wide, so the
// active one drifts out of view as the reader moves down the page. Nudge the
// row so the current section is always visible.
const barRef = useRefP(null);
useEffectP(() => {
const bar = barRef.current;
if (!bar) return;
const pill = bar.querySelector("[data-active-pill='1']");
if (!pill) return;
const barBox = bar.getBoundingClientRect();
const pillBox = pill.getBoundingClientRect();
const pad = 16;
let delta = 0;
if (pillBox.left < barBox.left + pad) delta = pillBox.left - barBox.left - pad;else
if (pillBox.right > barBox.right - pad) delta = pillBox.right - barBox.right + pad;
if (!delta) return;
// scrollBy avoids scrollIntoView, which would also scroll the page.
bar.scrollBy({ left: delta, behavior: "smooth" });
}, [activeId]);
// The main site-nav compacts on scroll (its height changes) and, on case
// study pages, slides out of view entirely. Track its VISUAL bottom edge —
// getBoundingClientRect() accounts for the transform, so the sub-nav follows
// the nav up and sits flush at the top once it's hidden (no see-through gap).
const [navH, setNavH] = useStateP(48);
useEffectP(() => {
let raf = 0;
const measure = () => {
const nav = document.querySelector(".site-nav");
if (nav) setNavH(Math.max(0, Math.round(nav.getBoundingClientRect().bottom)));
};
// Follow the nav's 0.3s transform for the whole transition, not just its
// end state, so the sub-nav never lags behind and expose a gap.
const track = () => {
measure();
raf = requestAnimationFrame(track);
};
let stopAt = 0;
const kick = () => {
stopAt = Date.now() + 450;
if (!raf) track();
// Stop the rAF loop once the transition has settled.
clearTimeout(kick._t);
kick._t = setTimeout(function stop() {
if (Date.now() >= stopAt) {cancelAnimationFrame(raf);raf = 0;measure();} else
kick._t = setTimeout(stop, 60);
}, 450);
};
measure();
window.addEventListener("scroll", kick, { passive: true });
document.addEventListener("scroll", kick, { passive: true, capture: true });
window.addEventListener("mousemove", kick, { passive: true });
window.addEventListener("resize", measure);
return () => {
window.removeEventListener("scroll", kick);
document.removeEventListener("scroll", kick, { capture: true });
window.removeEventListener("mousemove", kick);
window.removeEventListener("resize", measure);
cancelAnimationFrame(raf);
clearTimeout(kick._t);
};
}, []);
return (
{sections.map((s) => {
// The scroll spy reports subsection ids too (e.g. "improvements-2"),
// which match no pill here — so nothing highlighted once you scrolled
// into one. Resolve those back to their parent section.
const isActive = s.id === activeId || String(activeId || "").startsWith(s.id + "-");
return (
);
})}
);
}
// Per-section figures. Real assets get reused here as they're added.
// Per-section figure LAYOUT (count, aspect, placeholder label). The actual
// image `src` comes from each project's data (section.figures[i].src) — swap
// those paths in data.jsx. Leave src blank to show the labeled placeholder.
const SECTION_FIGURES = {
summary: [{ label: "summary image", aspect: "16 / 10" }],
research: [{ label: "research synthesis board", aspect: "16 / 9" }],
wireframes: [
{ label: "low-fi wireframes — round 1", aspect: "16 / 9" },
{ label: "refined flow — round 4", aspect: "16 / 9" }],
feedback: [{ label: "usability test highlights", aspect: "16 / 9" }],
final: [{ label: "final shipped flow", aspect: "16 / 10" }]
};
// Big-number stats band — call out headline impact numbers.
function StatsBand({ stats }) {
return (
{stats.map((s, i) =>
{s.value}
{s.label}
)}
);
}
// Quote wall — user research quotes as speech bubbles.
function QuoteWall({ quotes, maxWidth }) {
return (
);
}
// Bulleted list of key improvements.
function KeyList({ title, items }) {
return (
{title &&
{title}
}
{items.map((it, i) =>
)}
);
}
// Inline **bold** and [text](url) support inside body copy — lets the data
// emphasize the most scannable phrase, or link out, without hand-writing JSX.
function RichText({ text }) {
const parts = String(text).split(/(\*\*[^*]+\*\*|\[[^\]]+\]\([^)]+\))/g);
return parts.map((p, i) => {
if (p.startsWith("**") && p.endsWith("**") && p.length > 4) {
return {p.slice(2, -2)};
}
const link = /^\[([^\]]+)\]\(([^)]+)\)$/.exec(p);
if (link) {
return (
{link[1]}
);
}
return {p};
});
}
// Paragraph run used by both sections and their subsections.
function Paras({ body }) {
return (body || []).map((p, i) =>
);
}
// Headed note blocks. `boxed` wraps them in an accent-tinted panel (used for
// "Key issues"-style summaries that should read as a callout).
function NotesBlock({ title, notes, boxed, columns, spaceAbove }) {
return (
{title &&
{title}
}
{notes.map((nt, i) =>
{nt.title}
)}
);
}
function Section({ section, registerRef, projectId }) {
// Merge layout placeholders with any per-project figure data (by index):
// the data supplies src/caption, the layout supplies aspect/label/count.
const layout = SECTION_FIGURES[section.id] || [];
const provided = section.figures || [];
// A project that declares `figures` owns its figure count outright — including
// an empty array, which means "no figures here" rather than "fall back to the
// layout default" (that fallback used to render a bare labeled placeholder).
// Only sections with no `figures` key at all inherit the layout scaffolding.
const n = section.figures ? provided.length : layout.length;
const figures = Array.from({ length: n }, (_, i) =>
Object.assign({}, layout[i] || layout[0] || {}, provided[i] || {}));
void projectId;
return (
registerRef(section.id, el)}
style={{
scrollMarginTop: 70,
padding: "44px 0",
borderBottom: "1px solid var(--hair-soft)"
}}>
}
{/* Figures span the full content width (most of the page). */}
{figures.map((f, i) =>
)}
{/* Notes deferred to sit below the figures. */}
{section.notes && section.notesAfterFigures &&
}
{section.closingHeadline &&
{section.closingHeadline}
}
{section.closingBody &&
}
{/* Numbered subsections (e.g. the improvement areas). An `unnumbered`
subsection shows no badge and doesn't consume a number. */}
{(section.subsections || []).map((sub, si) => {
const num = (section.subsections || []).
slice(0, si + 1).filter((x) => !x.unnumbered).length;
return (
)}
{/* Optional second beat inside the same subsection (e.g. research
survey first, then the interview write-up under the same header). */}
{(sub.afterTitle || sub.afterBody || sub.lists) &&
{sub.afterTitle &&
{sub.afterTitle}
}
{(sub.lists || []).length > 0 &&
{sub.lists.map((l, li) =>
)}
}
}
);
})}
);
}
// Projects requiring a password before their case study is shown.
const PROTECTED_PROJECTS = { epic: "pixels" };
// Intermediary password screen shown before a protected case study.
function PasswordGate({ project, onUnlock, onNavigate }) {
const [value, setValue] = useStateP("");
const [error, setError] = useStateP(false);
const [reveal, setReveal] = useStateP(false);
const expected = PROTECTED_PROJECTS[project.id];
const submit = (e) => {
e.preventDefault();
if (value.trim().toLowerCase() === expected) {
onUnlock();
} else {
setError(true);
}
};
return (
);
}
// Placeholder page for a case study that isn't written yet. Points visitors to
// the shorter overview in the Design Archive.
function UnderConstruction({ data, projectId, onNavigate }) {
return (
🚧
Under construction
{data.title}
This case study is currently under construction. A less detailed project overview is available in my design archive.
);
}
function ProjectPage({ projectId, onBack, onOpen, onNavigate, isMobile }) {
// Password gate for protected projects — unlock persists for the session.
const isProtected = projectId in PROTECTED_PROJECTS;
const [unlocked, setUnlocked] = useStateP(() =>
typeof sessionStorage !== "undefined" && sessionStorage.getItem("unlocked:" + projectId) === "1");
// Re-check unlock state whenever the project changes.
useEffectP(() => {
setUnlocked(typeof sessionStorage !== "undefined" && sessionStorage.getItem("unlocked:" + projectId) === "1");
}, [projectId]);
const gateProject = window.PROJECTS.find((p) => p.id === projectId) || window.PROJECTS[0];
if (isProtected && !unlocked) {
return (
{
try {sessionStorage.setItem("unlocked:" + projectId, "1");} catch (e) {}
setUnlocked(true);
}} />);
}
const pageData = window.PROJECT_PAGE[projectId];
if (pageData && pageData.underConstruction) {
return ;
}
return ;
}
function ProjectCaseStudy({ projectId, onBack, onOpen, onNavigate, isMobile }) {
const data = window.PROJECT_PAGE[projectId] || window.PROJECT_PAGE.searchneu;
const project = window.PROJECTS.find((p) => p.id === projectId) || window.PROJECTS[0];
const [activeId, setActiveId] = useStateP(data.sections[0].id);
const [zoomed, setZoomed] = useStateP(null);
const refs = useRefP({});
const registerRef = (id, el) => {if (el) refs.current[id] = el;};
// Scroll spy
useEffectP(() => {
const onScroll = () => {
const y = window.scrollY + 120;
let current = data.sections[0].id;
for (const s of data.sections) {
const el = refs.current[s.id];
if (el && el.offsetTop <= y) current = s.id;
(s.subsections || []).forEach((_, i) => {
const sub = refs.current[`${s.id}-${i}`];
if (sub && sub.offsetTop <= y) current = `${s.id}-${i}`;
});
}
setActiveId(current);
};
window.addEventListener("scroll", onScroll, { passive: true });
document.addEventListener("scroll", onScroll, { passive: true, capture: true });
onScroll();
return () => {
window.removeEventListener("scroll", onScroll);
document.removeEventListener("scroll", onScroll, { capture: true });
};
}, [projectId]);
// Smooth scroll that works in this embedding (behavior:"smooth" is a no-op here).
// Eases scrollTop via a short interval loop, writing to whichever scroller is live.
const smoothScrollTo = (targetY) => {
const scroller = document.scrollingElement || document.documentElement;
const getY = () => window.scrollY || scroller && scroller.scrollTop || 0;
const setY = (v) => {window.scrollTo(0, v);if (scroller) scroller.scrollTop = v;};
const start = getY();
const dist = targetY - start;
if (Math.abs(dist) < 2) {setY(targetY);return;}
const dur = Math.min(1500, Math.max(700, Math.abs(dist) * 0.55));
const clock = () => window.performance && performance.now ? performance.now() : Date.now();
const t0 = clock();
// Ease in-out — gentle acceleration and a soft landing.
const ease = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
const iv = setInterval(() => {
const t = Math.min(1, (clock() - t0) / dur);
setY(start + dist * ease(t));
if (t >= 1) clearInterval(iv);
}, 16);
};
const jump = (id) => {
const el = refs.current[id];
if (!el) return;
setActiveId(id); // reflect selection immediately (programmatic scroll fires no scroll event)
const scroller = document.scrollingElement || document.documentElement;
const curY = window.scrollY || scroller && scroller.scrollTop || 0;
smoothScrollTo(el.getBoundingClientRect().top + curY - 64);
};
const toTop = () => smoothScrollTo(0);
// Next project
const idx = window.PROJECTS.findIndex((p) => p.id === projectId);
const next = window.PROJECTS[(idx + 1) % window.PROJECTS.length];
return (
{/* Consistent shared site nav (with hover dropdowns) */}
{isMobile && }
{!isMobile && onNavigate("home")} />}
{/* Mobile has no sidebar, so the way back lives above the hero. */}
{isMobile &&
}
{/* Hero */}
CASE STUDY · {data.eyebrowDate || data.meta[2]?.value || ""}