/* ============================================================================ PAGES.JSX — About, Writing (index + reading), Gallery. Layout/markup only; all words & images come from window.SITE (content.js). ============================================================================ */ const { useState, useEffect, useRef, useCallback } = React; /* ---- tiny inline icon set (kept minimal & monoline) ---- */ const Icon = { mail: (p) => , linkedin: (p) => , github: (p) => , twitter: (p) => , download: (p) => , shuffle: (p) => , arrow: (p) => }; /* ---- Markdown posts ----------------------------------------------------- * * Long writeups live as writing//index.md (+ images/). The parser and * the file are fetched ONLY when a reader opens a markdown post, so the rest * of the site never pays for them. Parsed HTML is cached per slug. */ const MD_PARSER_SRC = "https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js"; let _markedPromise = null; function ensureMarked() { if (window.marked) return Promise.resolve(window.marked); if (_markedPromise) return _markedPromise; _markedPromise = new Promise((resolve, reject) => { const s = document.createElement("script"); s.src = MD_PARSER_SRC;s.async = true; s.onload = () => resolve(window.marked); s.onerror = () => {_markedPromise = null;reject(new Error("markdown parser failed to load"));}; document.head.appendChild(s); }); return _markedPromise; } function stripFrontmatter(md) { if (md.slice(0, 3) === "---") { const end = md.indexOf("\n---", 3); if (end !== -1) {const nl = md.indexOf("\n", end + 1);return nl === -1 ? "" : md.slice(nl + 1);} } return md; } const _postCache = {}; function loadMarkdownPost(slug) { if (_postCache[slug]) return Promise.resolve(_postCache[slug]); const base = "writing/" + slug + "/"; return Promise.all([ ensureMarked(), fetch(base + "index.md").then((r) => {if (!r.ok) throw new Error("post not found");return r.text();})]). then(([marked, raw]) => { // rewrite relative image paths (images/foo.png) to the post's own folder const body = stripFrontmatter(raw).replace(/\]\(images\//g, "](" + base + "images/"); const parse = marked.parse || marked; const html = parse(body). // defer offscreen charts so they don't block the reading experience replace(//g, '
').replace(/<\/table>/g, "
"); _postCache[slug] = html; return html; }); } /* hook: reveal children on scroll — with a guaranteed fallback so content ALWAYS becomes visible even if IntersectionObserver/rAF is throttled. */ function useReveals(dep) { useEffect(() => { // page-level entrance: toggle .entered on the page root const page = document.querySelector(".page-anim:not(.entered)"); if (page) {requestAnimationFrame(() => page.classList.add("entered"));setTimeout(() => page.classList.add("entered"), 80);} const els = Array.from(document.querySelectorAll(".reveal:not(.in)")); const revealAll = () => els.forEach((e) => e.classList.add("in")); if (!("IntersectionObserver" in window)) {revealAll();return;} const io = new IntersectionObserver((entries) => { entries.forEach((en) => {if (en.isIntersecting) {en.target.classList.add("in");io.unobserve(en.target);}}); }, { rootMargin: "0px 0px -8% 0px", threshold: 0.05 }); els.forEach((e, i) => {e.style.transitionDelay = Math.min(i * 70, 420) + "ms";io.observe(e);}); // Fallback: guarantee everything is visible shortly after mount. const t = setTimeout(() => {revealAll();io.disconnect();}, 1400); return () => {clearTimeout(t);io.disconnect();}; }, [dep]); } /* ========================================================================= ABOUT ========================================================================= */ function About({ go }) { const S = window.SITE; useReveals("about"); const c = S.contact; return (

Who I am

Bio§1
{S.bio.map((p, i) =>

{p}

)}

{e.preventDefault();go("writing");}}>You can find my writing here.

{S.currently &&

Currently — {S.currently}

}
Contact§2
{c.email} {c.linkedin && LinkedIn} {c.github && GitHub} {c.twitter && X}
); } /* ========================================================================= WRITING — index ========================================================================= */ function Writing({ go }) { const S = window.SITE; useReveals("writing"); return (

Notes

{S.writing.map((w) => {e.preventDefault();go(`writing/${w.slug}`);}}> {w.title}

{w.blurb}

Read )}
); } /* WRITING — reading view */ function Reading({ slug, go }) { const S = window.SITE; const w = S.writing.find((x) => x.slug === slug); const [mdHtml, setMdHtml] = useState(""); const [mdState, setMdState] = useState("idle"); // idle | loading | ready | error useReveals("read-" + slug); useEffect(() => {window.scrollTo(0, 0);}, [slug]); // markdown-backed posts: fetch + render lazily useEffect(() => { if (!w || !w.md) return; let cancelled = false; setMdState("loading");setMdHtml(""); loadMarkdownPost(w.slug). then((html) => {if (!cancelled) {setMdHtml(html);setMdState("ready");}}). catch(() => {if (!cancelled) setMdState("error");}); return () => {cancelled = true;}; }, [slug]); if (!w) { return (
{e.preventDefault();go("writing");}}>← Writing

Not found

That piece doesn’t exist. {e.preventDefault();go("writing");}}>Back to all writing.

); } return (
{e.preventDefault();go("writing");}}>← Writing

{w.title}

{w.md ? mdState === "ready" ?
: mdState === "error" ?

Couldn’t load this piece. {e.preventDefault();go("writing");}}>Back to all writing.

:

Loading…

:
{w.body.map((p, i) =>

{p}

)}
}
); } /* ========================================================================= GALLERY — one random photo, crossfade between ========================================================================= */ function Gallery() { const S = window.SITE; const photos = S.gallery || []; const [idx, setIdx] = useState(() => photos.length ? Math.floor(Math.random() * photos.length) : 0); const [shown, setShown] = useState(true); const lockRef = useRef(false); const advance = useCallback(() => { if (lockRef.current || photos.length < 2) return; lockRef.current = true; setShown(false); // fade current out setTimeout(() => { setIdx((prev) => { let n = prev; while (n === prev) n = Math.floor(Math.random() * photos.length); return n; }); setShown(true); // fade next in setTimeout(() => {lockRef.current = false;}, 700); }, 360); }, [photos.length]); // keyboard: arrow / space advances useEffect(() => { const onKey = (e) => {if (e.key === "ArrowRight" || e.key === "ArrowLeft" || e.key === " ") {e.preventDefault();advance();}}; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [advance]); useReveals("gallery"); const cur = photos[idx] || {}; return (

Off the clock

{if (e.key === "Enter") {advance();}}}> {cur.alt {e.currentTarget.style.display = 'none';}} />
); } Object.assign(window, { About, Writing, Reading, Gallery, Icon });