// Journey timeline — horizontal scroll w/ year anchors function Journey(){ const ref = React.useRef(null); const trackRef = React.useRef(null); const [active, setActive] = React.useState(0); React.useEffect(()=>{ window.registerReveal && window.registerReveal(ref.current); },[]); React.useEffect(()=>{ const t = trackRef.current; if (!t) return; const onScroll = () => { const cards = t.querySelectorAll('.jn-card'); const left = t.scrollLeft + t.clientWidth/2; let best = 0, bestDist = Infinity; cards.forEach((c,i) => { const cx = c.offsetLeft + c.offsetWidth/2; const d = Math.abs(cx - left); if (d < bestDist) { bestDist = d; best = i; } }); setActive(best); }; t.addEventListener('scroll', onScroll, { passive: true }); return () => t.removeEventListener('scroll', onScroll); }, []); const jumpTo = (i) => { const card = trackRef.current.querySelectorAll('.jn-card')[i]; if (card) { trackRef.current.scrollTo({ left: card.offsetLeft - (trackRef.current.clientWidth - card.offsetWidth)/2, behavior: 'smooth' }); } }; return (
/ 06 · Journey

From curiosity
to compounding.

{TIMELINE.map((t,i) => ( ))}
{TIMELINE.map((t,i) => (
STAGE · 0{i+1}{t.title.toUpperCase()}
{t.year}
{t.title}
{t.body}
))}
); } Object.assign(window, { Journey });