/* eslint-disable no-undef */ /* App shell — nav + footer + state-based routing */ const { useState: useStateA, useEffect: useEffectA } = React; function Nav({ page, go }) { const [stuck, setStuck] = useStateA(false); const [menuOpen, setMenuOpen] = useStateA(false); useEffectA(() => { const onScroll = () => setStuck(window.scrollY > 16); window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); // close mobile menu on page change useEffectA(() => { setMenuOpen(false); }, [page]); const items = [ { id: "home", label: "Home" }, { id: "works", label: "Works" }, { id: "playbook", label: "Playbook" }, { id: "resume", label: "Résumé" }, ]; return (
{/* Mobile dropdown menu */}
{items.map(it => ( ))} Let's talk
); } function Footer({ go }) { return ( ); } /* ───────────────── Page transition wrapper ───────────────── */ function PageTransition({ pageKey, children }) { const ref = React.useRef(null); useEffectA(() => { const el = ref.current; if (!el) return; el.style.opacity = "0"; el.style.transform = "translateY(18px)"; // force reflow then animate in void el.offsetHeight; el.style.transition = "opacity 0.5s cubic-bezier(0.2,0.6,0.2,1), transform 0.5s cubic-bezier(0.2,0.6,0.2,1)"; el.style.opacity = "1"; el.style.transform = "translateY(0)"; }, [pageKey]); return
{children}
; } /* ───────────────── Interstitial transition screen ───────────────── */ const INTERSTITIAL_MESSAGES = { works: "Welcome to the archive. Every dashboard, pipeline, and app I've shipped.", playbook: "Welcome to the playbook. How I think about data, design, and delivery.", resume: "Welcome to my resume. The short version of the long story.", }; const INTERSTITIAL_TITLES = { works: "Works", playbook: "Playbook", resume: "Résumé", }; function Interstitial({ page, onDone }) { const [phase, setPhase] = useStateA("in"); // in | visible | out const ref = React.useRef(null); useEffectA(() => { // fade in const el = ref.current; if (!el) return; el.style.opacity = "0"; void el.offsetHeight; el.style.transition = "opacity 0.4s ease"; el.style.opacity = "1"; setPhase("visible"); // after 3s, fade out and finish const fadeOutTimer = setTimeout(() => { setPhase("out"); el.style.transition = "opacity 0.4s ease"; el.style.opacity = "0"; }, 3000); const doneTimer = setTimeout(() => { onDone(); }, 3400); return () => { clearTimeout(fadeOutTimer); clearTimeout(doneTimer); }; }, []); return (
{/* Page-specific decorative illustrations */} {/* Shared: subtle grid dots */} {[...Array(12)].map((_, i) => [...Array(8)].map((_, j) => ( )) )} {page === "works" && <> {/* WORKS: Dashboard/chart motifs — bar charts, scatter, data grids */} {/* Bar chart cluster — bottom left */} {/* Axis lines */} {/* Pie/donut chart — top right */} {/* Scatter dots — center right */} {/* Data grid lines — top left */} {[0,1,2,3,4].map(i => ( ))} {[0,1,2,3].map(i => ( ))} {/* Large concentric rings */} {/* Trend line */} } {page === "playbook" && <> {/* PLAYBOOK: Process/methodology — flow arrows, steps, pipeline */} {/* Flow pipeline — horizontal with nodes */} {[0,1,2,3,4,5].map(i => ( {i < 5 && } {i < 5 && } ))} {/* Funnel shape — bottom left */} {/* Branching arrows — top right */} {/* Hexagonal grid — center */} {[0,1,2].map(row => [0,1,2,3].map(col => ( { const cx = 500 + col * 52 + (row % 2) * 26; const cy = 380 + row * 45; const r = 22; return [0,1,2,3,4,5].map(k => { const a = Math.PI / 3 * k - Math.PI / 6; return `${cx + r * Math.cos(a)},${cy + r * Math.sin(a)}`; }).join(" "); })()} stroke="#C7522A" strokeWidth="0.6" opacity="0.05" fill="none" /> )) )} {/* Circular orbit — large */} } {page === "resume" && <> {/* RESUME: Career/timeline — document shapes, milestones, path */} {/* Vertical timeline — left side */} {[0,1,2,3,4].map(i => ( ))} {/* Document shapes — top right */} {/* Second document, offset */} {/* Career path curve — large swooping line */} {/* Achievement stars — scattered */} {[[850,450],[900,500],[870,540],[920,470]].map(([x,y], i) => ( { const r1 = 8, r2 = 3; return [0,1,2,3,4,5,6,7,8,9].map(k => { const a = Math.PI / 5 * k - Math.PI / 2; const r = k % 2 === 0 ? r1 : r2; return `${x + r * Math.cos(a)},${y + r * Math.sin(a)}`; }).join(" "); })()} fill="#C7522A" opacity={0.05 + i*0.01} /> ))} {/* Graduation cap — abstract */} {/* Concentric rings */} } {/* Logo mark */}
U
{/* Page title */}

{INTERSTITIAL_TITLES[page]}.

{/* Typewriter message */}
{/* subtle progress bar */}
); } /* ───────────────────────── App ───────────────────────── */ function App() { const [page, setPage] = useStateA(() => { const h = location.hash.replace("#", ""); return ["home","works","playbook","resume"].includes(h) ? h : "home"; }); const [transitioning, setTransitioning] = useStateA(null); const go = (p) => { if (p === page || transitioning) return; // already on this page or transitioning if (p === "home") { // home navigates instantly, no interstitial setPage(p); history.replaceState({}, "", "#" + p); window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" }); } else { // show interstitial for works/playbook/resume setTransitioning(p); history.replaceState({}, "", "#" + p); } }; const finishTransition = () => { const target = transitioning; setTransitioning(null); setPage(target); window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" }); }; useEffectA(() => { const onHash = () => { const h = location.hash.replace("#", ""); if (["home","works","playbook","resume"].includes(h) && h !== page) { if (h === "home") { setPage(h); } else { setTransitioning(h); } } }; window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, [page]); return (
); } ReactDOM.createRoot(document.getElementById("root")).render(); // dismiss loader once React has painted requestAnimationFrame(() => { const loader = document.getElementById("loader"); if (loader) loader.classList.add("done"); });