/* global React */
const { useState: useState2, useEffect: useEffect2, useRef: useRef2 } = React;
// ────────────────────────────────────────────────────────────────────
// HERO variants — no portrait photo. Multi-pastel friendly.
// ────────────────────────────────────────────────────────────────────
// Personal, slightly playful blurbs for the "currently doing" panel.
const NOW_ITEMS = [
"staring at saliency maps until they confess",
"trying to convince a model that biology has rules",
"tuning a GNN on a stubborn spatial-omics graph",
"rewriting a sentence in the camera-ready for the 9th time",
"looking up RNA secondary structure with too many tabs open",
];
// Render the bio paragraph with keyword highlighting. Each keyword gets one of
// the section palette colors so the page feels visually unified.
const BIO_PARTS = [
{ t: "Deep learning", c: "#d8b4fe" }, // purple
{ t: " for " },
{ t: "biomedicine", c: "#86efac" }, // mint
{ t: ". Currently working on " },
{ t: "siRNA therapeutic design", c: "#fda4af" }, // rose
{ t: ", " },
{ t: "saliency-based interpretability", c: "#fcd34d" }, // amber
{ t: ", and " },
{ t: "graph neural networks for spatial omics", c: "#93c5fd" }, // blue
{ t: ". I build methods that bridge ML with biological domain knowledge \u2014 " },
{ t: "biology-informed regularization", c: "#86efac" }, // mint
{ t: " for RNA therapeutics, and " },
{ t: "spatiotemporal models", c: "#f0abfc" }, // fuchsia
{ t: " for real-time clinical applications." },
];
const BioText = () => (
<>
{BIO_PARTS.map((p, i) => p.c
? {p.t}
: {p.t})}
);
const HeroLive = ({ data, accent }) => {
const [tick, setTick] = useState2(0);
useEffect2(() => {
const id = setInterval(() => setTick(t => (t + 1) % NOW_ITEMS.length), 3400);
return () => clearInterval(id);
}, []);
const dateStr = (new Date()).toLocaleDateString("en-US", { month: "short", day: "2-digit", year: "numeric" }).toLowerCase();
return (
orlando · {dateStr}
Hi, I’m Shadi(Zahra) Khodagholi.
I poke at biology with neural nets,
and at neural nets with biology.
[ now ]
{NOW_ITEMS.map((t, i) => (
▸ {t}
))}
{data.research_areas.map((r, i) => (
{r.tag}{r.note}
))}
);
};
const HeroBig = ({ data, accent }) => (
Shadi Khodagholi (Zahra)
A computer engineer who took a wrong turn into biology — and stayed. PhD at UCF. Today: siRNA, saliency, and graph neural nets — with a growing pull toward neuroscience.
open to collaboration — especially anything where ML meets the brain. drop a line.
);
// "Cycler" hero — replaces the old typewriter. The old "I work on…" line was
// too AI-pitch-y; this one reads like a human introducing herself, with the
// rotating part doing real work (showing range across CS / bio / neuro).
const HeroCycler = ({ data, accent }) => {
const phrases = [
{ a: "I taught a model to read", b: "RNA" },
{ a: "I taught a model to read", b: "ultrasound" },
{ a: "I taught a model to read", b: "spatial omics" },
{ a: "Mostly I just want to know", b: "why it predicts that" },
];
const [i, setI] = useState2(0);
useEffect2(() => {
const id = setInterval(() => setI(x => (x + 1) % phrases.length), 3200);
return () => clearInterval(id);
}, []);
const cur = phrases[i];
return (
phd_student · ucf
{cur.a}{" "}
{cur.b}
.
{data.research_areas.map((r, idx) => (
{r.tag}{r.note}
))}
);
};
// BioSidecar — a small lab-notebook panel about Shadi. Rotating "currently"
// lines, an animated helix, and a heat-mapped "what I'm chasing" matrix.
const BioSidecar = ({ accent }) => {
const [tick, setTick] = useState2(0);
useEffect2(() => {
const id = setInterval(() => setTick(t => (t + 1) % 4), 2800);
return () => clearInterval(id);
}, []);
// Personal "currently" cards — small first-person facts, rotating.
// Each has a label, a value, a confidence bar, and a sequence-y motif so
// the panel still reads as comp-bio.
const CARDS = [
{ id: "now/01", label: "obsessing over", val: "siRNA off-target effects", seq: "GUUACGAUCGAUACG", conf: 0.78 },
{ id: "now/02", label: "reading", val: "Krishnaswamy lab papers", seq: "CGAACGGAUUACGAU", conf: 0.65 },
{ id: "now/03", label: "training", val: "a stubborn GNN on omics", seq: "AUGCAUGCGAUACGA", conf: 0.92 },
{ id: "now/04", label: "writing", val: "the camera-ready, again", seq: "UACGGAUACGAUCGA", conf: 0.55 },
];
const cur = CARDS[tick];
// 4×10 heatmap labeled with research themes — gives the panel a real signal
// about what Shadi works on, not just decoration.
const ROW_LABELS = ["rna ", "graph", "neuro", "imag."];
const heat = [];
for (let r = 0; r < 4; r++) {
const row = [];
for (let c = 0; c < 10; c++) {
const v = (Math.sin((r * 7 + c * 1.7) + tick * 0.6) + 1) / 2;
row.push(v);
}
heat.push(row);
}
const N = 60;
const pathA = Array.from({length: N}).map((_, i) => {
const x = (i / (N-1)) * 200;
const y = 45 + Math.sin((i / (N-1)) * Math.PI * 4) * 22;
return (i === 0 ? "M" : "L") + x.toFixed(2) + "," + y.toFixed(2);
}).join(" ");
const pathB = Array.from({length: N}).map((_, i) => {
const x = (i / (N-1)) * 200;
const y = 45 - Math.sin((i / (N-1)) * Math.PI * 4) * 22;
return (i === 0 ? "M" : "L") + x.toFixed(2) + "," + y.toFixed(2);
}).join(" ");
return (
);
};
const HeroLinks = ({ data }) => (