/* Experience animations — small, icon-style vignettes (~104×68).
Compact and abstract; sit beside each experience row.
*/
// ---------- shared ----------
const ExpFrame = ({ children }) => (
);
// ---------- 1. UC Merced — research / BloomBee pipeline (mini) ----------
const ExpResearchAnim = () => {
const peers = [22, 52, 82];
const y = 34;
return (
{/* hop arcs above */}
{peers.slice(0, -1).map((x, i) => {
const x1 = x + 7, x2 = peers[i + 1] - 7;
const d = `M ${x1} ${y} Q ${(x1 + x2) / 2} ${y - 14}, ${x2} ${y}`;
return (
);
})}
{/* peer boxes */}
{peers.map((x, i) => (
))}
{/* caption */}
P2P · L0…L31
);
};
// ---------- 2. WashU TA — terminal / office hours ----------
const ExpTeachingAnim = () => (
{/* terminal frame */}
{/* traffic dots */}
{/* prompt + chars */}
{">"}
g
c
c
cse132
);
// ---------- 3. Garmin — radar sweep ----------
const ExpRadarAnim = () => {
const cx = 52, cy = 36, r = 22;
return (
{/* rings */}
{/* crosshairs */}
{/* sweep */}
{/* a couple of "detected" blips */}
{/* center */}
);
};
// ---------- 4. Zhejiang — waveform pulse ----------
const ExpWaveformAnim = () => {
const bars = 11;
const startX = 16;
const barW = 5;
const gap = 2;
const cy = 34;
return (
{/* baseline */}
{Array.from({ length: bars }).map((_, i) => {
const x = startX + i * (barW + gap);
const h = 6 + (i % 4) * 4 + Math.sin(i * 0.8) * 3;
return (
);
})}
CNN · STT
);
};
// ---------- 5. China Unicom — shield + scan line ----------
const ExpShieldAnim = () => {
const cx = 52, top = 12, w = 28, h = 40;
// shield path
const sx = cx, sy = top;
const shield = `
M ${sx} ${sy}
L ${sx + w / 2} ${sy + 6}
L ${sx + w / 2} ${sy + h - 14}
Q ${sx + w / 2} ${sy + h}, ${sx} ${sy + h}
Q ${sx - w / 2} ${sy + h}, ${sx - w / 2} ${sy + h - 14}
L ${sx - w / 2} ${sy + 6}
Z
`;
return (
{/* shield outline */}
{/* horizontal feature ticks inside (feature importance bars) */}
{/* sweeping scan line */}
{/* tiny corner pips */}
{/* caption */}
RISK · RF
);
};
// ---------- registry ----------
window.EXP_ANIMS = {
research: ExpResearchAnim,
teaching: ExpTeachingAnim,
radar: ExpRadarAnim,
waveform: ExpWaveformAnim,
shield: ExpShieldAnim,
};