/* Bingying Zheng — personal site v2
Phase A (0 – 1×vh): Hero — full body, centered, clickable
Phase B (1×vh – 2.2×vh): Morph — scroll-driven, scales up + clips to half-body, stays centered
Phase C (2.2×vh+): Post-hero — half-body fixed center, cards L/R, 8 real sections
*/
const { useState, useEffect, useRef } = React;
const clamp = (v, lo = 0, hi = 1) => Math.min(hi, Math.max(lo, v));
const lerp = (a, b, t) => a + (b - a) * t;
const ease = t => t < 0.5 ? 2*t*t : -1 + (4-2*t)*t;
/* ─── Sound effects (Web Audio API — no external files) ─── */
const AudioCtx = window.AudioContext || window.webkitAudioContext;
let _actx = null;
const getACtx = () => { if (!_actx) _actx = new AudioCtx(); return _actx; };
/* windchime decoded buffer cache */
let _chimeBuf = null;
let _chimeLoading = false;
const sounds = {
hover() {
const ctx = getACtx();
const o = ctx.createOscillator();
const g = ctx.createGain();
o.connect(g); g.connect(ctx.destination);
o.type = 'sine';
o.frequency.setValueAtTime(660, ctx.currentTime);
o.frequency.exponentialRampToValueAtTime(880, ctx.currentTime + 0.07);
g.gain.setValueAtTime(0.05, ctx.currentTime);
g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.1);
o.start(); o.stop(ctx.currentTime + 0.1);
},
pop() {
const ctx = getACtx();
[440, 554, 659].forEach((freq, i) => {
const o = ctx.createOscillator();
const g = ctx.createGain();
o.connect(g); g.connect(ctx.destination);
o.type = 'sine'; o.frequency.value = freq;
const t = ctx.currentTime + i * 0.04;
g.gain.setValueAtTime(0.07, t);
g.gain.exponentialRampToValueAtTime(0.001, t + 0.18);
o.start(t); o.stop(t + 0.18);
});
},
book() {
const ctx = getACtx();
const len = Math.floor(ctx.sampleRate * 0.09);
const buf = ctx.createBuffer(1, len, ctx.sampleRate);
const d = buf.getChannelData(0);
for (let i = 0; i < len; i++) d[i] = (Math.random()*2-1) * Math.exp(-i / (ctx.sampleRate * 0.022));
const src = ctx.createBufferSource();
const filt = ctx.createBiquadFilter();
const g = ctx.createGain();
filt.type = 'bandpass'; filt.frequency.value = 800; filt.Q.value = 0.6;
src.buffer = buf; src.connect(filt); filt.connect(g); g.connect(ctx.destination);
g.gain.setValueAtTime(0.22, ctx.currentTime);
g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.09);
src.start();
},
click() { this.hover(); },
};
/* ─── DATA ─── */
const WORK_CARDS = [
{ num: '01', title: 'SEO & GEO', desc: 'AI-assisted audits · technical issues · content gaps · AI search visibility.', tag: 'Live report', accent: '#7e946e', href: 'work/seo.html' },
{ num: '02', title: 'GOOGLE ADS', desc: '+200% ROAS lift. AUD $18K budget turnaround in 8 weeks through creative refresh.', tag: 'Case study', accent: '#4285F4' },
{ num: '03', title: 'SOCIAL MEDIA', desc: '小红书 KOL · WeChat · Weibo · LinkedIn. 110M+ impressions cross-brand.', tag: 'Case study', accent: '#e1497a' },
{ num: '04', title: 'MORE AI WORKS', desc: 'n8n workflows · behavioural triggers · re-engagement funnels. 100+ qualified enquiries.', tag: 'Case study', accent: '#7c3aed' },
{ num: '05', title: 'CREATIVES', desc: 'Brand assets, ad creatives, social content, motion graphics across industries.', tag: 'Design & video', accent: '#c95c3a' },
{ num: '06', title: 'EMAIL MARKETING', desc: 'HubSpot · GoHighLevel · 40–82% open rates. Multi-branch automation.', tag: 'Automation', accent: '#f0c64b', darkTag: true },
];
const CHAPTERS = [
{ kind: 'workhub', chapter: 'portfolio', label: 'My Work', cards: [] },
{ kind: 'human', chapter: 'beyond the metrics', label: 'The\nHuman', cards: [] },
];
const REACTIONS = [
{ key: 'intro', text: "Hi, I'm Bing!", mood: 'sparkle', illo: 'star' },
{ key: 'dog', text: 'I love dogs 🐶', mood: 'heart', illo: 'dog' },
{ key: 'game', text: 'one more game?', mood: 'sparkle', illo: 'switch' },
{ key: 'cake', text: 'I love cake 🍰', mood: 'blush', illo: 'cake' },
];
/* ─── Floating illustration SVGs — hand-drawn style ─── */
function IlloSVG({ type }) {
if (type === 'dog') return (
{/* floppy ears */}
);
if (type === 'switch') return (
{/* left joy-con */}
);
if (type === 'cake') return (
{/* candle */}
);
/* star / intro */
return (
);
}
/* ─── Hero prop SVG components ─── */
function Macbook() {
return (
{/* shadow under */}
WORK
{/* underline */}
portfolio
{/* highlight glints */}
);
}
function ResumeChalkboard() {
const [hovered, setHovered] = useState(false);
return (
setHovered(true)} onMouseLeave={() => setHovered(false)}>
{/* hanger string */}
{/* wooden frame */}
{/* CHALK CONTENT */}
{/* "RESUME" header */}
Resume
{/* underline squiggle */}
{/* chalk piece + eraser on the ledge */}
{/* chalk dust puffs on hover */}
{hovered && (
)}
);
}
function DeskScene({ onWorkClick }) {
const [hovered, setHovered] = useState(false);
// lamp turns on automatically when desk is hovered
const lampOn = hovered;
// clicking the lamp area navigates to work page
const handleLampClick = (e) => { e.stopPropagation(); sounds.pop(); if (onWorkClick) onWorkClick(); };
const handleWorkClick = (e) => { e.stopPropagation(); if (onWorkClick) onWorkClick(); };
return (
{ setHovered(true); sounds.hover(); }}
onMouseLeave={() => setHovered(false)}>
{/* DESKTOP */}
{/* shadow under base */}
WORK
{/* ============ PLANT ============ */}
{/* ============ LAMP ============ */}
{lampOn && (
)}
);
}
function VinylPlayer({ onPlayChange }) {
const [playing, setPlaying] = useState(false);
const audioRef = useRef(null);
useEffect(() => {
const audio = new Audio('assets/bgm.mp3');
audio.loop = true;
audio.volume = 0.6;
audioRef.current = audio;
return () => { audio.pause(); audio.src = ''; };
}, []);
const toggle = () => {
const next = !playing;
setPlaying(next);
if (next) audioRef.current.play().catch(() => {});
else { audioRef.current.pause(); }
if (onPlayChange) onPlayChange(next);
};
return (
{/* shadow */}
{/* turntable base */}
{/* control buttons */}
soya
vol. 1
{/* music notes float up when playing */}
{playing && (
♪
)}
{playing && (
♫
)}
{playing && (
♩
)}
);
}
function CoffeeMug() {
return (
{/* STEAM — three trails */}
{/* shadow */}
);
}
function PictureFrame() {
const [idx, setIdx] = useState(0);
const photos = [
{ bg: '#f4a8c1', emoji: '🌸', caption: 'spring 24' },
{ bg: '#6db8f0', emoji: '🌊', caption: 'beach day' },
{ bg: '#f0c64b', emoji: '🌻', caption: 'sunshine' }
];
const p = photos[idx];
return (
setIdx((idx + 1) % photos.length)}>
{/* nail in wall */}
{/* outer frame (wood) */}
{p.emoji}
{/* caption tag */}
{p.caption}
);
}
function Bookshelf() {
const [hoverIdx, setHoverIdx] = useState(null);
const books = [
{ color: '#e89a6b', title: 'BRAND' },
{ color: '#f0c64b', title: 'GROW' },
{ color: '#a6c8a0', title: 'SEO' },
{ color: '#6db8f0', title: 'DATA' },
{ color: '#e1497a', title: 'ADS' }
];
return (
{/* shelf frame */}
{ setHoverIdx(i); sounds.book(); }}
onMouseLeave={() => setHoverIdx(null)}>
{b.title}
);
})}
{/* MIDDLE SHELF — props (cup, plant, frame) — resting on the bottom shelf (top y=274) */}
{/* small plant pot */}
{/* small picture */}
♡
{/* candle / cup */}
);
}
function SleepingCat() {
const [awake, setAwake] = useState(false);
const onClick = () => {
setAwake(true);
setTimeout(() => setAwake(false), 1800);
};
return (
meow~ 😺
{/* Z's when sleeping */}
{!awake && (
z
z
z
)}
{/* cushion */}
);
}
function PolaroidCamera() {
const [flash, setFlash] = useState(false);
const onClick = () => {
setFlash(true);
setTimeout(() => setFlash(false), 180);
};
return (
{/* shadow */}
{/* FLASH effect — full overlay */}
{flash && (
);
}
function WindChime() {
const [ringing, setRinging] = useState(false);
const srcRef = useRef(null);
const gainRef = useRef(null);
const onEnter = () => {
setRinging(true);
const ctx = getACtx();
if (ctx.state === 'suspended') ctx.resume();
const play = (buf) => {
// stop any already-playing instance
try { srcRef.current && srcRef.current.stop(); } catch(e) {}
const src = ctx.createBufferSource();
const g = ctx.createGain();
src.buffer = buf;
src.loop = true;
src.connect(g); g.connect(ctx.destination);
g.gain.setValueAtTime(0, ctx.currentTime);
g.gain.linearRampToValueAtTime(0.7, ctx.currentTime + 0.15);
src.start(ctx.currentTime, 1.0); // start 1s into file (best ring section)
srcRef.current = src;
gainRef.current = g;
};
if (_chimeBuf) { play(_chimeBuf); return; }
if (_chimeLoading) return;
_chimeLoading = true;
fetch('assets/windchime.mp3')
.then(r => r.arrayBuffer())
.then(ab => ctx.decodeAudioData(ab))
.then(buf => { _chimeBuf = buf; _chimeLoading = false; play(buf); })
.catch(() => { _chimeLoading = false; });
};
const onLeave = () => {
setRinging(false);
if (gainRef.current && srcRef.current) {
const ctx = getACtx();
gainRef.current.gain.setValueAtTime(gainRef.current.gain.value, ctx.currentTime);
gainRef.current.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.4);
try { srcRef.current.stop(ctx.currentTime + 0.4); } catch(e) {}
srcRef.current = null; gainRef.current = null;
}
};
return (
{/* hanger ring */}
{/* sound waves when ringing */}
{ringing && (
<>
);
}
function GrowingPlant() {
return (
);
}
/* ─── About page overlay ─── */
function AboutPage({ open, onClose }) {
useEffect(() => {
if (open) document.body.style.overflow = 'hidden';
else document.body.style.overflow = '';
return () => { document.body.style.overflow = ''; };
}, [open]);
return (
<>
{/* green lead layer — slightly ahead of the main overlay */}
{/* close button — same style as nav menu button, always shows × */}
{/* left — photo */}
🐶 dog lover
🎮 gamer
🍰 cake fan
🌏 based in AU
{/* right — text */}
ABOUT ME
Bingying
Digital Marketing Strategist
I'm Bing, originally from China and now based in Melbourne. I started out
in social media marketing for one of China's leading game companies, then
moved to Australia to study digital marketing and business analytics.
Since then I've been working in digital marketing across a non-profit and
a boutique agency — mostly SEO, GEO, and paid search. Over time I got more
into the technical side, and then into AI. These days I'm building AI agents
and automation tools alongside my marketing work.
I'm interested in where AI and digital marketing are heading, and I'm
figuring that out by building things. If you're working on something in
that space, I'd love to connect.
Bingying
digital marketing
in
LET'S TALK ↗
{ setMenuOpen(o => !o); sounds.click(); }} aria-label="Menu">
{/* Dropdown menu */}
{ window.scrollTo({top:0,behavior:'smooth'}); close(); }}>
01 Home
{ onOpenAbout(); close(); }}>
02 About Me
{ onGoToWork(); close(); }}>
03 Work
{ onGoToHuman(); close(); }}>
04 The Human
05 LinkedIn ↗
);
}
/* ─── PropCard ─── */
function PropCard({ data, style, className }) {
const base = style || {};
if (data.kind === 'channel') return (
);
if (data.kind === 'metric') return (
{data.value}
{data.label.toUpperCase()}
);
if (data.kind === 'tags') return (
{it} )}
);
if (data.kind === 'note') return (
);
return null;
}
/* ─── Hero scene ─── */
function HeroScene({ driftT, vw, onOpenAbout, onFrameHover, onPropHover, frameHover, onWorkClick }) {
const dx = driftT * 320;
const dy = driftT * 110;
const dStyle = (xDir, yDir, deg) => ({ transform: `translate(${xDir*dx}px,${yDir*dy}px) rotate(${deg}deg)` });
const fadeOp = Math.max(0, 1 - driftT * 1.5);
const compact = vw <= 700;
const frameInner = compact
? { w: 145, h: 112, pad: 8, label: 20 }
: { w: 190, h: 148, pad: 10, label: 22 };
return (
{/* ── 上层：小件夹住标题 ── */}
{/* 风铃 — 标题左侧 */}
{/* 黑板 — 标题右侧，与风铃呼应 */}
{ sounds.hover(); onPropHover('chalk'); }} onMouseLeave={() => onPropHover(null)}>
{/* ── 中层：大件锚定左右 ── */}
{/* 相框 — 左侧中部 */}
{ onFrameHover(true); sounds.hover(); }} onMouseLeave={() => onFrameHover(false)}>
{/* 书架 — 右侧中部，与相框对称 */}
{/* ── 下层：地面感 ── */}
{/* 黑胶 — 左下锚点 */}
{ sounds.hover(); onPropHover('vinyl'); }} onMouseLeave={() => onPropHover(null)}>
{ onPropHover(v ? 'vinyl' : null); }}/>
{/* 植物 — 中间过渡，角色脚边 */}
{/* 书桌 — 右下锚点 */}
onPropHover('desk')} onMouseLeave={() => onPropHover(null)}>
);
}
/* ─── Character — fixed, centered, scroll-driven morph ─── */
function Character({ scrollY, vh, vw, sectionIdx, frameHover, propHover }) {
const [blink, setBlink] = useState(false);
const [reaction, setReaction] = useState(null);
const [mouse, setMouse] = useState({ x: -1, y: -1 });
const [hover, setHover] = useState(false);
const [illos, setIllos] = useState([]);
const reactionTimer = useRef(null);
const illoTimer = useRef(null);
const rafPupil = useRef(null);
const reactionTick = useRef(0);
const lastReactionKey = useRef(null);
useEffect(() => {
let t;
const schedule = () => {
t = setTimeout(() => {
setBlink(true);
setTimeout(() => setBlink(false), 140);
schedule();
}, 2400 + Math.random() * 3200);
};
schedule();
return () => clearTimeout(t);
}, []);
useEffect(() => {
const onMove = (e) => {
if (rafPupil.current) return;
rafPupil.current = requestAnimationFrame(() => {
// only update state when in hero — avoids re-renders during scroll
if (!rafPupil._isHero) { rafPupil.current = null; return; }
setMouse({ x: e.clientX, y: e.clientY });
rafPupil.current = null;
});
};
window.addEventListener('mousemove', onMove, { passive: true });
return () => { window.removeEventListener('mousemove', onMove); cancelAnimationFrame(rafPupil.current); };
}, []);
/* transition thresholds */
const TRANS_START = vh * 1.0;
const TRANS_END = vh * 2.2;
const rawT = clamp((scrollY - TRANS_START) / (TRANS_END - TRANS_START), 0, 1);
const t = ease(rawT);
const isHero = rawT < 0.05;
rafPupil._isHero = isHero;
/* size
hero: full-body 2:3 figure, scaled down on narrow screens
post: wider, container height = top 55% of natural height (waist-up crop via overflow:hidden) */
const heroW = vw <= 700 ? Math.min(280, Math.round(vw * 0.72)) : 320;
const heroH = Math.round(heroW * 1.5);
const postW = Math.min(360, Math.round(vw * 0.32));
const postNatH = Math.round(postW * 1.5); // full proportional height
const postVisH = Math.round(postNatH * 0.55); // visible portion (overflow-hidden)
const curW = Math.round(lerp(heroW, postW, t));
const curContH = Math.round(lerp(heroH, postVisH, t)); // container height
/* always centered */
const curLeft = Math.round(vw / 2 - curW / 2);
/* top: hero = feet at viewport bottom; post = bottom of visible crop ~20px above fold */
const heroTop = vh - heroH;
const postTop = vh - postVisH - 20;
const curTop = Math.round(lerp(heroTop, postTop, t));
/* expression overlay must match the FULL rendered img size (overflows container, gets clipped) */
const fullImgH = Math.round(curW * 1.5);
/* pupil tracking — map mouse → SVG offset (max ±12 units) */
const faceCX = curLeft + curW / 2;
const faceCY = curTop + Math.round(fullImgH * 0.276); // eyes ~27.6% down full img
const MAX_P = 12;
const pdx = mouse.x < 0 ? 0 : clamp((mouse.x - faceCX) / (vw * 0.5), -1, 1);
const pdy = mouse.y < 0 ? 0 : clamp((mouse.y - faceCY) / (vh * 0.4), -1, 1);
const px = Math.round(pdx * MAX_P);
const py = Math.round(pdy * MAX_P);
const showMood = rawT < 0.25; // mood overlays hero-only; blink always runs
const signOpacity = ease(clamp((rawT - 0.50) / 0.38, 0, 1));
const mood = reaction ? reaction.mood : null;
const onCharClick = () => {
if (!isHero) return;
sounds.pop();
const pool = REACTIONS.filter(r => r.key !== lastReactionKey.current);
const r = pool[Math.floor(Math.random() * pool.length)];
lastReactionKey.current = r.key;
reactionTick.current += 1;
setReaction({ ...r, _tick: reactionTick.current });
clearTimeout(reactionTimer.current);
reactionTimer.current = setTimeout(() => setReaction(null), 2400);
// spawn illustrations
const id = Date.now();
const spread = [
{ dx: -curW / 2 - 20, dy: 10, rot: -12, delay: 0 },
{ dx: curW / 2 - 30, dy: -15, rot: 9, delay: 100 },
];
setIllos(spread.map((p, i) => ({
id: id + i, type: r.illo,
left: vw / 2 + p.dx,
top: curTop + curContH / 2 + p.dy,
rot: p.rot, delay: p.delay,
})));
clearTimeout(illoTimer.current);
illoTimer.current = setTimeout(() => setIllos([]), 2600);
};
const chap = CHAPTERS[clamp(sectionIdx, 0, CHAPTERS.length - 1)];
/* sign: anchor bottom so sign straddles the arm level
arms in SVG ≈ 47% of full height → arm viewport y = curTop + fullImgH * 0.47 */
const armVY = curTop + Math.round(fullImgH * 0.52);
const signH = 130; // approximate rendered card height
const signBot = Math.max(Math.round(vh - armVY - signH * 0.35), 20);
return (
<>
{/* ── Art container — overflow:hidden crops the bottom naturally ── */}
{ isHero && setHover(true); sounds.hover(); }}
onMouseLeave={() => setHover(false)}
>
{/* single asset — always soya-rig.svg */}
{/* expression overlay — always rendered so blink works in all phases */}
{/* moving pupils — hidden during blink */}
{/* eye white */}
{/* hover — smile + cheek blush */}
{/* blink — always active */}
{/* mood overlays — hero only */}
{/* cover original mouth */}
{reaction.text}
)}
{/* ── Frame-hover: "learn more" bubble + radiating lines ── */}
{frameHover && isHero && (
<>
{/* speech bubble */}
learn more about me ✦
{/* radiating lines around character */}
{[0,45,90,135,180,225,270,315].map((deg, i) => {
const rad = deg * Math.PI / 180;
const cx = curW / 2 + 40, cy = curContH / 2 + 40;
const r1 = 180, r2 = 230;
return
)}
{/* ── Prop hover reaction — character comments on hovered prop ── */}
{propHover && isHero && (() => {
const msgs = {
vinyl: '♪ classical time~',
desk: 'check my work highlights~',
chalk: 'check my resume!',
};
const msg = msgs[propHover];
if (!msg) return null;
return (
{msg}
);
})()}
{/* ── Scroll hint at character's feet ── */}
{/* ── Floating illustrations ── */}
{illos.map(il => (
))}
{/* ── Shirt trapezoid — small clothing peek below sign ── */}
{/* ── Held sign — separate fixed element, always fully visible ── */}
{chap.chapter}
{chap.label}
);
}
/* ─── Per-section card layouts — 4 variants ─── */
/*
Each section has a "left column" and "right column" flanking the centered character.
The character occupies ~460px in the center, so each column gets the rest.
Layouts differ in which cards go left vs right and their arrangement.
*/
function SectionCards({ chapter, idx }) {
const [c0, c1, c2, c3] = chapter.cards;
const v = idx % 4;
if (v === 0) return (
<>
);
if (v === 1) return (
<>
);
if (v === 2) return (
<>
);
/* v === 3 — case study: big metric left, note right */
return (
<>
);
}
/* ─── SEO & GEO showcase section ─── */
function SEOGEOSection() {
return (
{/* ── Chapter header ── */}
CASE 05
SEO & GEO
Search engine optimisation · Generative engine optimisation · AI-assisted audits
{/* ── Healthcare example screenshots ── */}
Organic keyword growth
New users by channel
Top search queries
{/* ── AI agent description ── */}
AI agent · audit & report generation
I run AI agents that crawl, audit, and generate full SEO & GEO reports —
{/* ── Dashboard iframe ── */}
{/* hand-drawn annotation */}
see the example report — scroll & click!
{/* bottom hand-drawn hint */}
↑ fully interactive — built with Claude Code
);
}
/* ─── Click particle burst (green theme) ─── */
function ClickParticles() {
const [bursts, setBursts] = useState([]);
useEffect(() => {
const onClick = (e) => {
const shapes = ['★', '✦', '+', '●', '♡'];
const greens = ['#a6c8a0', '#7ab87a', '#c8e6c4', '#5a9c5a', '#d4edda'];
const id = Date.now() + Math.random();
const particles = Array.from({ length: 6 }, (_, i) => ({
id: i,
shape: shapes[Math.floor(Math.random() * shapes.length)],
color: greens[Math.floor(Math.random() * greens.length)],
dx: (Math.random() - 0.5) * 80,
dy: -(20 + Math.random() * 60),
size: 10 + Math.random() * 12,
rot: (Math.random() - 0.5) * 120,
}));
setBursts(b => [...b, { id, x: e.clientX, y: e.clientY, particles }]);
setTimeout(() => setBursts(b => b.filter(bst => bst.id !== id)), 700);
};
window.addEventListener('click', onClick);
return () => window.removeEventListener('click', onClick);
}, []);
return (
{bursts.map(burst => burst.particles.map(p => (
{p.shape}
)))}
);
}
/* ─── The Human section ─── */
function Polaroid({ src, rot, mt, size }) {
const [hov, setHov] = useState(false);
const w = size || 150;
const h = Math.round(w * 0.78);
return (
/* outer: fixed rotation + layout, never changes size so no sibling flicker */
setHov(true)}
onMouseLeave={() => setHov(false)}
style={{
transform: `rotate(${rot}deg)`,
marginTop: mt || 0,
width: w + 'px',
flexShrink: 0,
zIndex: hov ? 10 : 1,
position: 'relative',
cursor: 'pointer',
}}
>
{/* inner: scale only, so the hover hit-box stays the same size */}
{/* ── Cake Socials ── */}
{/* row 1 */}
{/* row 2 */}
Cake Socials
Built a Melbourne cake community
{/* ── Alumni Network ── */}
Alumni Network
Helped organise events for
{/* ── Dubbing Club ── */}
Dubbing Club
Club president at university —
window.scrollTo({ top: 0, behavior: 'smooth' })}
style={{
position: 'absolute', bottom: '24px', right: '28px',
fontFamily: 'var(--marker)', fontSize: '16px',
color: 'var(--ink)', background: 'var(--paper)',
border: '2.5px solid var(--ink)', borderRadius: '999px',
padding: '5px 16px', cursor: 'pointer',
boxShadow: '3px 3px 0 var(--ink)',
transition: 'transform .15s, box-shadow .15s',
zIndex: 20,
}}
onMouseEnter={e => { e.currentTarget.style.transform = 'translate(-1px,-1px)'; e.currentTarget.style.boxShadow = '4px 4px 0 var(--ink)'; }}
onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = '3px 3px 0 var(--ink)'; }}
>↑ home
);
}
/* ─── Work hub cards ─── */
function WorkCard({ data, dir }) {
const live = !!data.href;
return (
{ if (live) { e.currentTarget.style.transform = 'translate(-2px,-3px)'; e.currentTarget.style.boxShadow = '6px 7px 0 var(--ink)'; }}}
onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = live ? '4px 4px 0 var(--ink)' : '2px 2px 0 var(--ink)'; }}
>
{data.title}
{live ? data.tag : 'coming soon'}
{live && → }
);
}
function WorkHubSection() {
return (
<>
{WORK_CARDS.slice(0, 3).map(c =>
{/* center column annotation — sits above the character */}
{'click to explore\nmy work!'}
{WORK_CARDS.slice(3, 6).map(c =>
);
}
/* ─── App ─── */
function App() {
const [scrollY, setScrollY] = useState(0);
const [dims, setDims] = useState({ vh: window.innerHeight, vw: window.innerWidth });
const [showAbout, setShowAbout] = useState(false);
const [frameHover, setFrameHover] = useState(false);
const [propHover, setPropHover] = useState(null);
const [activeSection, setActiveSection] = useState(0);
const sectionRefs = useRef([]);
const goToSection = (idx) => {
sounds.pop();
const el = sectionRefs.current[idx];
if (el) el.scrollIntoView({ behavior: 'smooth' });
};
const goToWork = () => goToSection(0);
const goToHuman = () => goToSection(1);
useEffect(() => {
const onScroll = () => setScrollY(window.scrollY);
const onResize = () => setDims({ vh: window.innerHeight, vw: window.innerWidth });
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onResize);
onScroll();
return () => {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onResize);
};
}, []);
useEffect(() => {
const obs = new IntersectionObserver(
entries => entries.forEach(e => {
if (e.isIntersecting) setActiveSection(parseInt(e.target.dataset.idx, 10));
}),
{ threshold: 0.4 }
);
sectionRefs.current.forEach(el => el && obs.observe(el));
return () => obs.disconnect();
}, []);
const { vh, vw } = dims;
/* hero drift starts halfway through transition window */
const driftT = ease(clamp((scrollY - vh * 0.5) / (vh * 1.1), 0, 1));
/* character width in post phase — match section layout gutter */
const charW = Math.min(360, Math.round(vw * 0.32));
return (
setShowAbout(false)}/>
{ setShowAbout(true); sounds.pop(); }} onGoToWork={goToWork} onGoToHuman={goToHuman}/>
{/* Fixed character — always in DOM */}
{/* ── Hero runway ── sticky stage + 2.3×vh so morph has room */}
{ setShowAbout(true); sounds.pop(); }} onFrameHover={setFrameHover} onPropHover={setPropHover} frameHover={frameHover} onWorkClick={goToWork}/>
{/* ── content sections ── */}
{CHAPTERS.map((ch, i) => (
sectionRefs.current[i] = el}
style={{ contain: 'layout style', willChange: 'opacity' }}
>
{ch.kind === 'workhub' ? (
<>
{/* scroll hint */}
scroll down to explore more about me
↓
) : ch.kind === 'human' ? (
<>
))}
);
}
ReactDOM.createRoot(document.getElementById('root')).render( 
