// Personal — radial mind-map. Center "me / CORE", six branches with sub-leaves.
// Map rotates gently with cursor parallax. Click a branch chip to zoom into its detail.
const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React;
const BRANCHES = [
{
id: "origins", n: "01", label: "Origins",
blurb: "Places that shaped me.",
leaves: [
{ name: "Millburn, NJ", cap: "Hometown · Millburn High School · cross country + track. Where the trading habit started." },
{ name: "Europe", cap: "First FinTech internship abroad. First time acclimating to a culture not my own." },
{ name: "+", cap: "Another place — to be added.", placeholder: true },
],
},
{
id: "people", n: "02", label: "People",
blurb: "Formative figures.",
leaves: [
{ name: "Parents", cap: "They broke the delusion that asking for help was an admission of inferiority. The humility lesson came from them." },
{ name: "Cross country teammates", cap: "The first real taste of camaraderie. Strenuous practice, mutual respect, friendships forged in shared difficulty." },
{ name: "+", cap: "Another figure — to be added.", placeholder: true },
],
},
{
id: "reading", n: "03", label: "Reading",
blurb: "Authors and books I return to.",
leaves: [
{ name: "Marcus Aurelius", cap: "Meditations. The Stoic spine." },
{ name: "Friedrich Nietzsche", cap: "Beyond Good and Evil · Thus Spoke Zarathustra. Where ‘invent yourself' comes from." },
{ name: "Edwin Lefèvre", cap: "Reminiscences of a Stock Operator. The trader's canon — patience, discipline, accepting outcomes." },
],
bench: ["Robert Greene — Mastery", "Daniel Kahneman — Thinking Fast and Slow", "David Goggins — Can't Hurt Me", "John Cochrane — Asset Pricing"],
},
{
id: "habits", n: "04", label: "Habits",
blurb: "Small recurring rituals.",
leaves: [
{ name: "Long-distance running", cap: "First sport where the results of effort were tangible. No shortcuts to physical labor." },
{ name: "Reading biographies", cap: "Primary-source human experience, mined for anything useful." },
{ name: "Writing", cap: "Essays, worldview drafts, manuscript pages. Not a hobby — a tool." },
],
},
{
id: "curiosities", n: "05", label: "Curiosities",
blurb: "Current rabbit holes.",
leaves: [
{ name: "Markets in motion", cap: "Valuation, market dynamics, the social physics of investing." },
{ name: "Forensic accounting", cap: "Beneish M-Score, footnote archaeology, earnings-quality detection." },
{ name: "Local-first AI", cap: "Real models running on my own metal. Jarvis is the artifact." },
],
},
{
id: "convictions", n: "06", label: "Convictions",
blurb: "Beliefs, briefly.",
leaves: [
{ name: '"The greatest limits are those self-imposed."', cap: "Held without exception. The first lock is always inside." },
{ name: '"You don\'t find yourself. You invent yourself."', cap: "Nietzsche, by way of years of stubborn evidence." },
{ name: "De omnibus dubitandum est", cap: "‘To have conviction, I must first doubt endlessly.' Inscribed on the kill-file." },
],
bench: [
'"Self-interest is the driver of every human action."',
'"The only true constant is change."',
'"Conviction without risk management is just a story."',
],
},
];
window.BRANCHES = BRANCHES;
function Personal({ initialDetail, onNavigate, fromHome }) {
const [zoomed, setZoomed] = useStateP(initialDetail || null);
const [hover, setHover] = useStateP(null);
const [hoverLeaf, setHoverLeaf] = useStateP(null);
const [cursor, setCursor] = useStateP({ x: 0, y: 0 });
const [coreScreen, setCoreScreen] = useStateP({ x: "50%", y: "50%" });
const mapRef = useRefP(null);
const rootRef = useRefP(null);
useEffectP(() => { setZoomed(initialDetail || null); }, [initialDetail]);
// Measure the actual "me" core screen position so the entry animation's
// mask center and the rays' origin both anchor to it exactly.
useEffectP(() => {
if (!fromHome || zoomed) return;
let raf = 0;
const measure = () => {
const el = document.querySelector("[data-personal-core]");
if (!el) { raf = requestAnimationFrame(measure); return; }
const r = el.getBoundingClientRect();
const cx = (r.left + r.right) / 2;
const cy = (r.top + r.bottom) / 2;
setCoreScreen({ x: `${cx}px`, y: `${cy}px` });
};
raf = requestAnimationFrame(measure);
return () => cancelAnimationFrame(raf);
}, [fromHome, zoomed]);
const open = (id) => { setZoomed(id); onNavigate({ world: "personal", detail: id }); };
const close = () => { setZoomed(null); onNavigate({ world: "personal" }); };
// cursor parallax for whole map
useEffectP(() => {
if (zoomed) return;
const el = mapRef.current;
if (!el) return;
const onMove = (e) => {
const r = el.getBoundingClientRect();
const x = ((e.clientX - r.left) / r.width - 0.5) * 2;
const y = ((e.clientY - r.top) / r.height - 0.5) * 2;
setCursor({ x, y });
};
el.addEventListener("mousemove", onMove);
return () => el.removeEventListener("mousemove", onMove);
}, [zoomed]);
// build positions
const CX = 600, CY = 380, R1 = 220, R2 = 360;
const branches = BRANCHES.map((b, i) => {
const angle = (-Math.PI / 2) + (i / BRANCHES.length) * Math.PI * 2;
return {
...b,
angle,
x: CX + Math.cos(angle) * R1,
y: CY + Math.sin(angle) * R1,
leaves: b.leaves.map((leaf, j) => {
const aSpread = 0.45;
const a = angle + ((b.leaves.length === 1 ? 0 : (j / (b.leaves.length - 1)) - 0.5)) * aSpread;
return { ...leaf, x: CX + Math.cos(a) * R2, y: CY + Math.sin(a) * R2, a };
}),
};
});
const zoomedBranch = zoomed ? branches.find(b => b.id === zoomed) : null;
return (
{fromHome && (
{/* Spark dot at origin */}
{/* Six rays radiating outward */}
{Array.from({ length: 6 }).map((_, i) => (
))}
)}
{/* header */}
// WORLD 04 — PERSONAL
The mind-map
A radial constellation. Center is me. Six branches reach out — origins, people,
reading, habits, curiosities, convictions. Hover the leaves; click a branch to zoom.