// ─────────────────────────────────────────────────────────────
// Pixel section transitions — chunky pixel dissolve between sections
// Scroll-triggered reveal + animated pixel border
// ─────────────────────────────────────────────────────────────
// Scroll-reveal wrapper: fades + slides sections in on scroll
function RevealSection({ children, delay = 0, ...rest }) {
const ref = React.useRef(null);
const [visible, setVisible] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
setTimeout(() => setVisible(true), delay);
io.disconnect();
}
});
}, { threshold: 0.08, rootMargin: '0px 0px -80px 0px' });
io.observe(el);
return () => io.disconnect();
}, [delay]);
return (
{children}
);
}
// Animated pixel divider between sections.
// Two rows of chunky pixels that shimmer/drop into place on scroll.
function PixelDivider({ color1 = '#ff9ec7', color2 = '#a99eff', color3 = '#9ed3ff', label }) {
const ref = React.useRef(null);
const [visible, setVisible] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { setVisible(true); io.disconnect(); } });
}, { threshold: 0.4 });
io.observe(el);
return () => io.disconnect();
}, []);
// Deterministic pseudo-random color pattern
const cols = 80;
const palette = [color1, color2, color3, 'transparent', 'transparent'];
const pattern = React.useMemo(() => {
const arr = [];
for (let i = 0; i < cols; i++) {
const seed = (i * 9301 + 49297) % 233280;
arr.push(palette[seed % palette.length]);
}
return arr;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
{/* Top row — drops in */}
{pattern.map((c, i) => (
))}
{/* Optional label */}
{label && (
✦ {label} ✦
)}
{/* Bottom row — drops in reversed */}
{pattern.slice().reverse().map((c, i) => (
))}
);
}
// ─────────────────────────────────────────────────────────────
// Off-the-Clock section — fashion/running/travel/adventure cards
// ─────────────────────────────────────────────────────────────
function OffTheClock({ chromeGradient, dark }) {
const cards = [
{
icon: '🏃♀️',
pixelIcon: PixelRunnerIcon,
title: 'training for my first marathon',
subtitle: '2026 Bank of America Chicago Marathon',
body: 'Long runs before work, hill repeats on weekends, negative splits on Strava. Running teaches me what shipping teaches me — show up daily, trust the process, the miles compound.',
tag: 'dedication · drive',
glow: '#ff9ec7',
},
{
icon: '✈️',
pixelIcon: PixelPlaneIcon,
title: 'adventure-seeker at heart',
subtitle: 'exploring new places',
body: 'Happiest when something I\'ve never done is next on the itinerary. Travel keeps me curious, and that curiosity follows me back to my keyboard on Monday.',
tag: 'curiosity · grit',
glow: '#a99eff',
},
{
icon: '💄',
pixelIcon: PixelLipIcon,
title: 'fashion + makeup = my other canvas',
subtitle: 'color theory, but wearable',
body: 'The same eye that cares about spacing, hierarchy, and palette in a UI cares about them in an outfit or an eye look. Creative practice in any medium sharpens taste in every other.',
tag: 'craft · taste',
glow: '#ffd5a8',
},
];
return (