// Animated visuals for each experience era
const { useEffect, useRef, useState } = React;
// 1. IBM/HCUP — animated data pipeline showing 50 states flowing through SAS macros to 130 databases
function PipelineVisual({ active }) {
const [tick, setTick] = useState(0);
useEffect(() => {
if (!active) return;
const id = setInterval(() => setTick(t => t + 1), 80);
return () => clearInterval(id);
}, [active]);
// 50 input streams condensing through center, fanning out to 130 outputs
const inputs = Array.from({ length: 50 });
const outputs = Array.from({ length: 26 }); // visual subset of 130
return (
);
}
// 2. Foley Bezek — paper depositions scanning into structured rows
function DepositionsVisual({ active }) {
const [tick, setTick] = useState(0);
useEffect(() => {
if (!active) return;
const id = setInterval(() => setTick(t => t + 1), 80);
return () => clearInterval(id);
}, [active]);
return (
);
}
// 3. SMS — accreditation: hospital nodes lighting up green/red as logistic model evaluates
function AccreditationVisual({ active }) {
const [tick, setTick] = useState(0);
useEffect(() => {
if (!active) return;
const id = setInterval(() => setTick(t => t + 1), 100);
return () => clearInterval(id);
}, [active]);
const LOOP = 220;
const loopTick = tick % LOOP;
// Grid of hospital "nodes"
const grid = [];
for (let r = 0; r < 6; r++) {
for (let c = 0; c < 8; c++) {
grid.push({ r, c, seed: (r * 8 + c) * 7 });
}
}
return (
);
}
// 4. SysteMetrics — origins: 50-state stratified sampling map / mainframe
function OriginsVisual({ active }) {
const [tick, setTick] = useState(0);
useEffect(() => {
if (!active) return;
const id = setInterval(() => setTick(t => t + 1), 100);
return () => clearInterval(id);
}, [active]);
// 50 hex-like nodes representing states
const states = Array.from({ length: 50 });
return (
);
}
// 5. Tec de Monterrey — computer architecture blueprint assembling itself
function UniversityVisual({ active }) {
const [tick, setTick] = useState(0);
useEffect(() => {
if (!active) return;
const id = setInterval(() => setTick(t => t + 1), 80);
return () => clearInterval(id);
}, [active]);
const LOOP = 300;
const t = tick % LOOP;
// Blueprint grid dots
const gridDots = [];
for (let gx = 0; gx < 9; gx++) {
for (let gy = 0; gy < 7; gy++) {
gridDots.push({ x: 30 + gx * 44, y: 48 + gy * 42 });
}
}
// Blocks appear sequentially as tick grows
const showCPU = t > 10;
const showBusH = t > 30;
const showRAM = t > 50;
const showALU = t > 70;
const showBusV = t > 90;
const showIO = t > 110;
const showDisk = t > 130;
const showLabels = t > 150;
// Animated data pulses along horizontal bus (CPU → RAM)
const hPulses = [0, 0.33, 0.66].map(offset => {
const phase = ((t * 0.012) + offset) % 1;
return { x: 152 + phase * 120, y: 180 };
});
// Animated data pulses along vertical bus (BUS → I/O)
const vPulses = [0, 0.5].map(offset => {
const phase = ((t * 0.01) + offset) % 1;
return { x: 212, y: 195 + phase * 80 };
});
// Courses cycle at bottom
const courses = ['ALGORITHMS', 'DATA STRUCTURES', 'SYSTEMS DESIGN', 'COMPUTER ARCH.', 'DISCRETE MATH', 'COMPILERS'];
const courseIdx = Math.floor(t / 30) % courses.length;
// Degree progress (fills over the loop)
const progress = Math.min(100, Math.round((t / 180) * 100));
const blockStyle = (show) => ({
opacity: show ? 1 : 0,
transition: show ? 'opacity 0.6s ease' : 'none',
});
return (
);
}
const VISUAL_MAP = {
pipeline: PipelineVisual,
depositions: DepositionsVisual,
accreditation: AccreditationVisual,
origins: OriginsVisual,
university: UniversityVisual,
};
window.VISUAL_MAP = VISUAL_MAP;