// Visual placeholders for project cards — abstract technical patterns, no fake AI imagery.
// Each renders into a card; designed to feel like a hardware engineer's portfolio.
const VisualBase = ({ children, label, accent = "230" }) => (
{children}
{label && (
◆ {label}
)}
{/* pipeline stages */}
{["IF", "ID", "RN", "IS", "EX", "WB"].map((s, i) => (
{s}
{i < 5 &&
))}
{/* dispatch lanes */}
// 2-WAY OOO · R10K RENAME
);
const VisCUDA = () => (
{/* grid of threads */}
{Array.from({ length: 12 }).map((_, r) =>
Array.from({ length: 18 }).map((_, c) => {
const intensity = 0.18 + 0.55 * Math.exp(-((r - 6) ** 2 + (c - 9) ** 2) / 25);
return (
// THREADBLOCK ⟨32×32⟩
);
const VisSpectrum = () => (
{/* spectrum bars */}
{Array.from({ length: 56 }).map((_, i) => {
const x = 20 + i * 6.6;
const env = Math.exp(-((i - 28) ** 2) / 320) * 0.9 + 0.05;
const noise = (Math.sin(i * 1.3) + Math.cos(i * 0.7)) * 0.06;
const h = (env + noise) * 160;
return // 5G NR · n78 · 100 MHz
CF 3.5 GHz
);
const VisConstellation = () => (
{/* axes */}
// I/Q · 16-QAM
);
const VisVision = () => (
{/* fake scene grid */}
person · 0.97
chair · 0.91
cup · 0.88
// VAL ACC 98.3%
);
const VisLattice = () => (
{Array.from({ length: 7 }).map((_, r) =>
Array.from({ length: 11 }).map((_, c) => {
const x = 30 + c * 35 + (r % 2 ? 17 : 0);
const y = 30 + r * 28;
if (x > 380) return null;
return (
);
})
)}
);
const VisQubit = () => (
{/* bloch sphere */}
|ψ⟩
);
const VisIoT = () => (
{/* node */}
ESP32
{/* radio waves */}
{[20, 40, 60].map((r, i) => (
))}
{/* sensors */}
);
const VisTrellis = () => (
{Array.from({ length: 8 }).map((_, t) =>
Array.from({ length: 4 }).map((_, s) => {
const x = 40 + t * 45;
const y = 60 + s * 40;
return (
);
})
)}
);
const VisProtocol = () => (
{["RRC", "PDCP", "RLC", "MAC", "PHY"].map((l, i) => (
{l}
REL 9–12
))}
);
const VisGraph = () => (
{Array.from({ length: 18 }).map((_, i) => {
const a = (i / 18) * Math.PI * 2;
const r = 70 + (i % 3) * 16;
return { i, x: 200 + Math.cos(a) * r, y: 120 + Math.sin(a) * r };
}).map((n, _, arr) => (
{arr.slice(0, 6).map((m) => (
))}
);
const VisQR = () => (
{Array.from({ length: 12 }).map((_, r) =>
Array.from({ length: 12 }).map((_, c) => {
const fill = (r + c * 7 + (r * c) % 3) % 3 === 0;
return
))}
);
const VisSensor = () => (
{/* pulse train */}
`${20 + i * 12},${i % 2 ? 80 : 130}`).join(" ")}
fill="none"
stroke="oklch(0.78 0.10 230)"
strokeWidth="1.4"
/>
// PULSE COUNT · 5 m GPS
42.6 L
42.279 N · -83.732 W
);
const VISUALS = {
rtl: VisRTL,
cuda: VisCUDA,
spectrum: VisSpectrum,
constellation: VisConstellation,
vision: VisVision,
lattice: VisLattice,
qubit: VisQubit,
iot: VisIoT,
trellis: VisTrellis,
protocol: VisProtocol,
graph: VisGraph,
qr: VisQR,
sensor: VisSensor,
};
window.VISUALS = VISUALS;