{/* image area */}

{/* corner ticks */} {[ { top: 10, left: 10 }, { top: 10, right: 10 }, { bottom: 10, left: 10 }, { bottom: 10, right: 10 }, ].map((pos, i) => (

))} {/* avatar silhouette */}

▸ DROP PORTRAIT.PNG
1024 × 1280 · TRANSPARENT BG

{/* scanline */}

{/* HUD strip */}

◆ ID.0xA17B ● VERIFIED

); } /* ===== Project Graph — field hubs + project leaves ===== */ const DOMAIN_HEX = { AI: "#00f5ff", ML: "#00f5ff", Web: "#9d00ff", Cyber: "#ff2bd6", DevOps: "#ffc857", Cloud: "#7dd3fc", Agentic: "#5eead4", }; const DOMAIN_COLORS = DOMAIN_HEX; function ProjectGraph({ data, onSelect }) { const wrapRef = useRefH(null); const [size, setSize] = useStateH({ w: 1200, h: 720 }); const [hover, setHover] = useStateH(null); // { kind, id } const [tick, setTick] = useStateH(0); const [isMobile, setIsMobile] = useStateH(window.innerWidth <= 720); useEffectH(() => { function measure() { if (!wrapRef.current) return; const r = wrapRef.current.getBoundingClientRect(); setSize({ w: r.width, h: r.height }); setIsMobile(window.innerWidth <= 720); } measure(); window.addEventListener("resize", measure); return () => window.removeEventListener("resize", measure); }, []); useEffectH(() => { let raf, t = 0; function loop() { t += 0.02; setTick(t); raf = requestAnimationFrame(loop); } raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); const fields = window.PROJECT_FIELDS; // hub positions: arranged on a ring around the canvas center const hubs = useMemo(() => { const cx = size.w / 2, cy = size.h / 2; const rx = Math.min(size.w * 0.32, 360); const ry = Math.min(size.h * 0.34, 250); return fields.map((f) => ({ ...f, px: cx + Math.cos(f.angle) * rx, py: cy + Math.sin(f.angle) * ry, })); }, [size]); const hubIdx = Object.fromEntries(hubs.map((h) => [h.id, h])); // project positions: seed by field-average, then relax with min-distance constraint const projects = useMemo(() => { const cx = size.w / 2, cy = size.h / 2; // seed const placed = data.projects.map((p, i) => { const fs = (p.fields || []).map((fid) => hubIdx[fid]).filter(Boolean); if (!fs.length) return { ...p, px: cx, py: cy }; let x = 0, y = 0; fs.forEach((f) => { x += f.px; y += f.py; }); x /= fs.length; y /= fs.length; // singleton-field projects: push OUTWARD (away from center) to the edges if (fs.length === 1) { const dx = x - cx, dy = y - cy; const len = Math.sqrt(dx * dx + dy * dy) || 1; const push = 110; x += (dx / len) * push; y += (dy / len) * push; } else { // multi-field: pull a touch inward so the overlap reads x = x * 0.82 + cx * 0.18; y = y * 0.82 + cy * 0.18; } // small deterministic jitter so co-located projects break ties const seed = (i * 9301 + 49297) % 233280 / 233280; const seed2 = (i * 7919 + 12553) % 233280 / 233280; x += (seed - 0.5) * 24; y += (seed2 - 0.5) * 24; return { ...p, px: x, py: y }; }); // min-distance relaxation: nodes vs nodes, and nodes vs hubs const NODE_R = 92; // min center-to-center between projects (node + label below) const HUB_R = 132; // min center-to-center to a hub (hubs are big) const PAD_X = 48, PAD_Y = 40; for (let pass = 0; pass < 60; pass++) { let moved = 0; // node↔node for (let a = 0; a < placed.length; a++) { for (let b = a + 1; b < placed.length; b++) { const A = placed[a], B = placed[b]; let dx = B.px - A.px, dy = B.py - A.py; let d = Math.sqrt(dx * dx + dy * dy); if (d < 0.001) { dx = (a - b) || 1; dy = 1; d = 1; } if (d < NODE_R) { const push = (NODE_R - d) / 2; const ux = dx / d, uy = dy / d; A.px -= ux * push; A.py -= uy * push; B.px += ux * push; B.py += uy * push; moved++; } } } // node↔hub for (let a = 0; a < placed.length; a++) { for (const h of hubs) { const A = placed[a]; let dx = A.px - h.px, dy = A.py - h.py; let d = Math.sqrt(dx * dx + dy * dy); if (d < 0.001) { dx = 1; dy = 1; d = 1; } if (d < HUB_R) { const push = (HUB_R - d); const ux = dx / d, uy = dy / d; A.px += ux * push; A.py += uy * push; moved++; } } } // bounds for (const A of placed) { if (A.px < PAD_X) A.px = PAD_X; if (A.px > size.w - PAD_X) A.px = size.w - PAD_X; if (A.py < PAD_Y) A.py = PAD_Y; if (A.py > size.h - PAD_Y) A.py = size.h - PAD_Y; } if (moved === 0) break; } return placed; }, [data.projects, hubs, size]); function isHubHover(id) { return hover && hover.kind === "hub" && hover.id === id; } function isProjHover(id) { return hover && hover.kind === "proj" && hover.id === id; } // when hovering a hub: highlight that hub + all its projects // when hovering a project: highlight project + its fields const highlight = useMemo(() => { const hubs = new Set(), projs = new Set(); if (!hover) return { hubs, projs }; if (hover.kind === "hub") { hubs.add(hover.id); projects.forEach((p) => { if ((p.fields || []).includes(hover.id)) projs.add(p.id); }); } else { projs.add(hover.id); const p = projects.find((x) => x.id === hover.id); (p?.fields || []).forEach((f) => hubs.add(f)); } return { hubs, projs }; }, [hover, projects]); /* ── Mobile: stacked card layout grouped by field ── */ if (isMobile) { const fieldsList = window.PROJECT_FIELDS; return (

{fieldsList.map((f) => { const items = data.projects.filter((p) => (p.fields || []).includes(f.id)); if (!items.length) return null; const color = f.color; return (

◆ {f.label}

{items.map((p) => { const isHover = hover && hover.id === p.id; return (

setHover({ kind: "proj", id: p.id })} onMouseLeave={() => setHover(null)} onClick={() => onSelect(p)}>

◆ {p.domain.toUpperCase()} · {p.tag.toUpperCase()} {p.year}

{p.name}

{p.tagline}

); })}

); } /* ── Desktop: SVG graph layout ── */ return (

{/* hubs */} {hubs.map((h) => { const isHover = isHubHover(h.id); const inHL = highlight.hubs.has(h.id); const dim = hover && !inHL; const pulse = 1 + Math.sin(tick * 0.9 + h.angle) * 0.03; return (

setHover({ kind: "hub", id: h.id })} onMouseLeave={() => setHover(null)}>

FIELD

{h.label}

· {projects.filter((p) => (p.fields || []).includes(h.id)).length} ·

); })} {/* project leaves */} {projects.map((p) => { const isHover = isProjHover(p.id); const inHL = highlight.projs.has(p.id); const dim = hover && !inHL; const primary = (p.fields || [])[0]; const color = (hubIdx[primary] && hubIdx[primary].color) || "#00f5ff"; const overlap = (p.fields || []).length > 1; return (

setHover({ kind: "proj", id: p.id })} onMouseLeave={() => setHover(null)} onClick={() => onSelect(p)}>

{p.id.slice(1)} {overlap && ( )}

{p.name}

{p.year} · {p.tag}

); })} {/* legend */}

{fields.map((f) => ( {f.label} ))}

); } /* ===== Project Modal ===== */ function ProjectModal({ project, onClose }) { const open = !!project; if (!project) { return

; } const color = DOMAIN_HEX[project.domain]; return (

e.stopPropagation()} style={{ overflow: "auto" }}> {/* header */}

◆ {project.id.toUpperCase()} / {project.domain.toUpperCase()} · {project.year} · {project.tag.toUpperCase()}

{project.name}

{project.tagline}

{/* bento body */}

{/* description */}

▸ ABSTRACT

{project.description}

▸ KEY FEATURES

0{i + 1} {f}

{/* stack */}

▸ TECH STACK

{project.stack.map((s) => ( {s} ))}

{/* links */}

▸ ENDPOINTS

github.com/al/{project.id}↗ {project.id}.aloysiuslim.dev↗

); } Object.assign(window, { Hero, ProjectGraph, ProjectModal, DOMAIN_HEX, DOMAIN_COLORS });

Aloysius Lim.

{project.name}