// SVG icons for the /uses page. One per group / subhead.
// Animations: defined in index.html via .gp-* keyframes + classes.
const UsesIcon = ({ size = 56, label, children }) => {
const T = window.TOKENS;
return (
);
};
// === /machines top-level (meta) ===
// All-up icon for the /machines group header — server rack w/ staggered LED activity.
const MachinesMeta = (props) => {
const T = window.TOKENS;
const rows = [34, 52, 70, 88, 106];
return (
{rows.map((y, i) => (
))}
);
};
// === /machines subheads ===
// main_machine — tower PC + power LED (2s blink)
const MachinesMain = (props) => {
const T = window.TOKENS;
return (
);
};
// mobile_machine — top-down open laptop + random key flash
const MachinesMobile = (props) => {
const T = window.TOKENS;
const [active, setActive] = React.useState(0);
React.useEffect(() => {
const t = setInterval(() => setActive(Math.floor(Math.random() * 30)), 700);
return () => clearInterval(t);
}, []);
const keys = [];
let idx = 0;
for (let r = 0; r < 3; r++) {
for (let c = 0; c < 10; c++) {
const x = 36 + c * 8;
const y = 78 + r * 9;
keys.push(
);
idx++;
}
}
return (
{keys}
);
};
// peripherals — headphones + sound waves both sides
const Peripherals = (props) => (
);
// === Top-level groups ===
const TerminalAndShell = (props) => {
const T = window.TOKENS;
return (
$ zsh
›
);
};
const CliTools = (props) => {
const T = window.TOKENS;
return (
$ rg "foo"
main.py:42 match
utils.py:9 match
api.py:81 match
);
};
const DevStack = (props) => {
const T = window.TOKENS;
return (
);
};
const AiStack = (props) => {
const T = window.TOKENS;
const L1 = [40, 80, 120];
const L2 = [36, 64, 96, 124];
const L3 = [60, 100];
return (
{L1.flatMap(y1 => L2.map(y2 =>
))}
{L2.flatMap(y1 => L3.map(y2 =>
))}
{L1.map(y => )}
{L2.map(y => )}
{L3.map(y => )}
);
};
const Miscellaneous = (props) => {
const T = window.TOKENS;
return (
);
};
window.UsesIcons = {
machinesMeta: MachinesMeta,
machinesMain: MachinesMain,
machinesMobile: MachinesMobile,
peripherals: Peripherals,
terminalAndShell: TerminalAndShell,
cliTools: CliTools,
devStack: DevStack,
aiStack: AiStack,
miscellaneous: Miscellaneous,
};