// Now Playing section + Path (orbit) section combined - English only
function SiteNow() {
const T = window.TOKENS;
const C = window.SITE_CONTENT;
const cur = C.current;
return (
โ{cur.label}
{cur.title[0]}{" "}
{cur.title[1]}
{cur.activeBadge}
{cur.role}
{cur.company}
{cur.where}
{cur.since}
{cur.blurb}
{cur.quickFacts.map(f => (
{f}
))}
);
}
// PATH - orbit + popover detail
function SitePath() {
const T = window.TOKENS;
const C = window.SITE_CONTENT;
const p = C.path;
const [hovered, setHovered] = React.useState(null);
const [selected, setSelected] = React.useState(null);
// Bigger bubbles, tighter orbit. weight 5 -> 180px, weight 2 -> 108px.
const positions = React.useMemo(() => {
const total = C.experiences.length;
const items = C.experiences.map((e, i) => {
const angle = (i / total) * Math.PI * 2 + (i % 3) * 0.18;
const baseR = 360 - e.weight * 14 + (i % 3) * 30;
const size = 84 + e.weight * 24; // weight 5 -> 204, weight 2 -> 132
return { angle, r: baseR, size, i };
});
const SQUASH = 0.62;
const PAD = 18;
const dist = (a, b) => {
const ax = Math.cos(a.angle) * a.r, ay = Math.sin(a.angle) * a.r * SQUASH;
const bx = Math.cos(b.angle) * b.r, by = Math.sin(b.angle) * b.r * SQUASH;
return Math.hypot(ax - bx, ay - by);
};
for (let pass = 0; pass < 60; pass++) {
let moved = false;
for (let a = 0; a < items.length; a++) {
for (let b = a + 1; b < items.length; b++) {
const need = (items[a].size + items[b].size) / 2 + PAD;
if (dist(items[a], items[b]) < need) {
const target = items[a].r >= items[b].r ? items[a] : items[b];
target.r += 8;
moved = true;
}
}
}
if (!moved) break;
}
return items.map(it => ({
x: Math.cos(it.angle) * it.r,
y: Math.sin(it.angle) * it.r * SQUASH,
size: it.size,
}));
}, []);
const active = selected || hovered;
const activeExp = active ? C.experiences.find(x => x.id === active) : null;
// Compute container size from max bubble extent
const maxExtent = React.useMemo(() => {
let mx = 0, my = 0;
positions.forEach(p => {
mx = Math.max(mx, Math.abs(p.x) + p.size / 2);
my = Math.max(my, Math.abs(p.y) + p.size / 2);
});
return { width: mx * 2 + 80, height: my * 2 + 80 };
}, [positions]);
return (