const { Button, Divider, Icon } = window.IsabelBrandSystem_b8d40d;
const { LOCATION, CV_URL } = window;
const ABOUT_CONTENT = window.CONTENT.about;
const SUBTITLE = ABOUT_CONTENT.subtitle;
const INTRO = ABOUT_CONTENT.intro;
const POINTS = ABOUT_CONTENT.points;
const HERO = ABOUT_CONTENT.hero;
const THINGS_HEADING = ABOUT_CONTENT.thingsHeading;
const THINGS_INTRO = ABOUT_CONTENT.thingsIntro;
const THINGS = ABOUT_CONTENT.things;
/* Numbered list of personal facts. Neutral gray rules and small gray
numbers, so the list doesn't compete with the colors that mean something
elsewhere (hero, Work categories). `{count}` in the heading is filled in
from the list's length. */
function Things() {
return (
))}
);
}
/* Each phrase in `headlineAccents` gets a thick underline in the color of
its element in the illustration (water, sun, soil, plant). Underline
rather than text color: yellow text on white fails contrast. */
function HeroHeadline() {
const parts = [];
let rest = HERO.headline;
(HERO.headlineAccents || []).forEach(({ text, accent }) => {
const i = rest.indexOf(text);
if (i < 0) return;
parts.push(rest.slice(0, i));
parts.push(
{text}
);
rest = rest.slice(i + text.length);
});
parts.push(rest);
return <>{parts};
}
/* The illustration plays once; a Replay button appears when it ends (its
last step is the second leaf, #ih-l2). Replaying remounts the inlined SVG,
which restarts its CSS animation. No button under reduced motion, where
the SVG's own rule turns the animation off. */
function HeroArt() {
const [run, setRun] = React.useState(0);
const [done, setDone] = React.useState(false);
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
return (