The rest of the site stays fully open. This just keeps the company-specific context that the old site surfaced when you landed on a tailored route.
Hover a node to preview its neighborhood. Click to pin it. Double-click the empty canvas to reset the view.
`; return; } const neighbors = Array.from(adjacency.get(node) || []); neighbors.sort((a, b) => (b.radius || 0) - (a.radius || 0)); const chips = neighbors.slice(0, 18).map((neighbor) => ` ${neighbor.id} `).join(""); const clickHint = focusedNode === node ? "Click again to unpin." : "Click to pin this node."; detailsEl.innerHTML = `${clickHint}
`; } let transform = { x: 0, y: 0, k: 1 }; let dragging = false; let dragStart = { x: 0, y: 0 }; let hoveredNode = null; let focusedNode = null; let alpha = 0.01; let warmingUp = true; let frame = 0; function clampZoom() { transform.k = Math.max(0.45, Math.min(2.6, transform.k)); } function zoomAtPoint(scaleAmount, pointX = width / 2, pointY = height / 2) { transform.x = pointX - (pointX - transform.x) * scaleAmount; transform.y = pointY - (pointY - transform.y) * scaleAmount; transform.k *= scaleAmount; clampZoom(); } function panBy(dx, dy) { transform.x += dx; transform.y += dy; } function update() { if (warmingUp) { alpha += 0.1; if (alpha >= 0.5) { alpha = 1; warmingUp = false; } } else if (alpha > 0.005) { alpha *= 0.993; } links.forEach((link) => { const dx = link.target.x - link.source.x; const dy = link.target.y - link.source.y; const distance = Math.sqrt(dx * dx + dy * dy) || 1; const force = (distance - 150) * 0.001 * alpha; const fx = (dx / distance) * force; const fy = (dy / distance) * force; link.source.vx += fx; link.source.vy += fy; link.target.vx -= fx; link.target.vy -= fy; }); for (let i = 0; i < nodes.length; i += 1) { for (let j = i + 1; j < nodes.length; j += 1) { const left = nodes[i]; const right = nodes[j]; const dx = right.x - left.x; const dy = right.y - left.y; const distance = Math.sqrt(dx * dx + dy * dy) || 1; const minDistance = Math.max(left.radius, left.textWidth / 2) + Math.max(right.radius, right.textWidth / 2) + 30; if (distance < minDistance) { const force = (minDistance - distance) * 0.3 * alpha; const fx = (dx / distance) * force; const fy = (dy / distance) * force; left.vx -= fx; left.vy -= fy; right.vx += fx; right.vy += fy; } } } const centerX = width / 2; const centerY = height / 2; nodes.forEach((node) => { node.vx += (centerX - node.x) * 0.005 * alpha; node.vy += (centerY - node.y) * 0.005 * alpha; node.vx *= 0.98; node.vy *= 0.98; node.x += node.vx; node.y += node.vy; }); } function draw() { ctx.save(); ctx.clearRect(0, 0, width, height); ctx.translate(transform.x, transform.y); ctx.scale(transform.k, transform.k); const activeNode = focusedNode || hoveredNode; const connectedNodes = new Set(); if (activeNode) { connectedNodes.add(activeNode); links.forEach((link) => { if (link.source === activeNode) connectedNodes.add(link.target); if (link.target === activeNode) connectedNodes.add(link.source); }); } renderNodeDetails(activeNode, focusedNode); links.forEach((link) => { const isActive = activeNode && (link.source === activeNode || link.target === activeNode); ctx.beginPath(); ctx.moveTo(link.source.x, link.source.y); ctx.lineTo(link.target.x, link.target.y); ctx.strokeStyle = isActive ? "rgba(110,231,244,0.85)" : "rgba(237,233,224,0.18)"; ctx.globalAlpha = isActive ? 0.9 : 0.35; ctx.stroke(); }); ctx.globalAlpha = 1; nodes.forEach((node) => { const isActive = activeNode === node; const isConnected = connectedNodes.has(node); ctx.beginPath(); ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2); ctx.fillStyle = node.type === "skill" ? "#6EE7F4" : "#D8B26E"; ctx.globalAlpha = activeNode && !isConnected ? 0.22 : 1; ctx.fill(); if (isActive) { ctx.strokeStyle = "#EDE9E0"; ctx.lineWidth = 2; ctx.stroke(); } }); ctx.globalAlpha = 1; nodes.forEach((node) => { const shouldShow = activeNode ? connectedNodes.has(node) : true; if (!shouldShow) return; ctx.fillStyle = "#EDE9E0"; ctx.font = '10px "JetBrains Mono"'; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(node.id, node.x, node.y + node.radius + 10); }); ctx.restore(); } function animate() { if (alpha > 0.005) update(); draw(); frame = requestAnimationFrame(animate); } function toWorldPosition(event) { const rect = canvas.getBoundingClientRect(); return { x: (event.clientX - rect.left - transform.x) / transform.k, y: (event.clientY - rect.top - transform.y) / transform.k, }; } function findNode(event) { const point = toWorldPosition(event); return nodes.find((node) => Math.sqrt((point.x - node.x) ** 2 + (point.y - node.y) ** 2) < node.radius) || null; } function handleMouseDown(event) { const clickedNode = findNode(event); if (clickedNode) { focusedNode = focusedNode === clickedNode ? null : clickedNode; return; } dragging = true; canvas.style.cursor = "grabbing"; dragStart = { x: event.clientX - transform.x, y: event.clientY - transform.y }; } function handleMouseUp() { dragging = false; canvas.style.cursor = "grab"; } function handleMouseMove(event) { if (dragging) { transform.x = event.clientX - dragStart.x; transform.y = event.clientY - dragStart.y; return; } hoveredNode = findNode(event); } function handleWheel(event) { event.preventDefault(); const rect = canvas.getBoundingClientRect(); const mouseX = event.clientX - rect.left; const mouseY = event.clientY - rect.top; if (event.deltaY < 0) { zoomAtPoint(1.1, mouseX, mouseY); } else { zoomAtPoint(1 / 1.1, mouseX, mouseY); } } function handleDoubleClick(event) { if (findNode(event)) return; transform = { x: 0, y: 0, k: 1 }; } function handleResize() { width = canvas.clientWidth; height = canvas.clientHeight; canvas.width = width; canvas.height = height; } function handleKeyDown(event) { if (event.key === "Escape") focusedNode = null; } controlsRef.current = { zoomIn: () => zoomAtPoint(1.12), zoomOut: () => zoomAtPoint(1 / 1.12), panLeft: () => panBy(36, 0), panRight: () => panBy(-36, 0), panUp: () => panBy(0, 36), panDown: () => panBy(0, -36), reset: () => { transform = { x: 0, y: 0, k: 1 }; focusedNode = null; }, }; animate(); canvas.addEventListener("mousedown", handleMouseDown); canvas.addEventListener("mouseup", handleMouseUp); canvas.addEventListener("mouseleave", handleMouseUp); canvas.addEventListener("mousemove", handleMouseMove); canvas.addEventListener("wheel", handleWheel, { passive: false }); canvas.addEventListener("dblclick", handleDoubleClick); window.addEventListener("resize", handleResize); window.addEventListener("keydown", handleKeyDown); return () => { cancelAnimationFrame(frame); controlsRef.current = { zoomIn: null, zoomOut: null, panLeft: null, panRight: null, panUp: null, panDown: null, reset: null, }; canvas.removeEventListener("mousedown", handleMouseDown); canvas.removeEventListener("mouseup", handleMouseUp); canvas.removeEventListener("mouseleave", handleMouseUp); canvas.removeEventListener("mousemove", handleMouseMove); canvas.removeEventListener("wheel", handleWheel); canvas.removeEventListener("dblclick", handleDoubleClick); window.removeEventListener("resize", handleResize); window.removeEventListener("keydown", handleKeyDown); }; }, [skillsData]); return (