// Main app — sidebar + sections const { useState, useEffect, useRef, useMemo } = React; function App() { const defaults = window.__TWEAK_DEFAULTS || { lang: "ja", theme: "light", accent: "blue" }; const [tweaks, setTweak] = useTweaks(defaults); const [activeId, setActiveId] = useState("hero"); const [showTweaks, setShowTweaks] = useState(false); const lang = tweaks.lang || "ja"; const theme = tweaks.theme || "light"; const t = window.CONTENT[lang]; // Apply theme to useEffect(() => { document.documentElement.setAttribute("data-theme", theme); }, [theme]); // Apply accent color useEffect(() => { const root = document.documentElement; const map = { blue: { a: "#1f4e8c", a2: "#2d6cb8", soft: "#e7eef9" }, teal: { a: "#0e6e6b", a2: "#149491", soft: "#e0f2f1" }, slate: { a: "#1e2a3a", a2: "#374a63", soft: "#e8ecf2" }, navy: { a: "#0f2a52", a2: "#1f4480", soft: "#e3eaf6" }, }; const c = map[tweaks.accent] || map.blue; root.style.setProperty("--accent", c.a); root.style.setProperty("--accent-2", c.a2); if (theme === "light") root.style.setProperty("--accent-soft", c.soft); }, [tweaks.accent, theme]); // Scroll spy useEffect(() => { const ids = t.nav.map(n => n.id); const handler = () => { const scrollY = window.scrollY + 200; let current = ids[0]; for (const id of ids) { const el = document.getElementById(id); if (el && el.offsetTop <= scrollY) current = id; } setActiveId(current); }; handler(); window.addEventListener("scroll", handler, { passive: true }); return () => window.removeEventListener("scroll", handler); }, [lang]); // Tweaks panel host protocol useEffect(() => { const onMsg = (e) => { if (!e.data) return; if (e.data.type === "__activate_edit_mode") setShowTweaks(true); if (e.data.type === "__deactivate_edit_mode") setShowTweaks(false); }; window.addEventListener("message", onMsg); window.parent.postMessage({ type: "__edit_mode_available" }, "*"); return () => window.removeEventListener("message", onMsg); }, []); const onNavClick = (e, id) => { e.preventDefault(); const el = document.getElementById(id); if (!el) return; window.scrollTo({ top: id === "hero" ? 0 : el.offsetTop - 20, behavior: "smooth" }); }; return (
{showTweaks && ( setShowTweaks(false)} initialPosition={{ right: 20, bottom: 20 }} width={300} > setTweak("lang", v)} /> setTweak("theme", v)} /> setTweak("accent", v)} /> )} ); } // ---------- Sidebar ---------- function Sidebar({ t, activeId, onNavClick, lang, theme, setTweak }) { return ( ); } // ---------- Hero ---------- function Hero({ t }) { return (
{t.hero.eyebrow}

{t.hero.catch1}
{t.hero.catch2}

{t.hero.sub}

{t.hero.meta.map((m, i) => (
{m.k}
{m.v}
))}
{t.hero.scroll}
); } // ---------- Section header helper ---------- function SectionHead({ num, en, title }) { return (
{num}
{en}

{title}

); } // ---------- About ---------- function About({ t }) { const s = t.sections.about; return (
{s.body.map((p, i) => (

「$1」') }} /> ))}

); } // ---------- Strengths ---------- function Strengths({ t }) { const s = t.sections.strengths; return (
{s.items.map((it, i) => (
0{i+1}

{it.h}

{it.p}

))}
); } // ---------- Achievements ---------- function Achievements({ t }) { const s = t.sections.achievements; return (
{s.stats.map((st, i) => (
{st.num}{st.unit && {st.unit}}
{st.label}
{st.sub}
))}

{s.extra}

); } // ---------- Skills ---------- function Skills({ t }) { const s = t.sections.skills; return (
{s.cols.map((col, i) => (

{col.h}

    {col.items.map((it, j) => (
  • {it.t} {it.b && {it.b}}
    • ))}
))}
); } // ---------- Career ---------- function Career({ t }) { const s = t.sections.career; return (
{s.rows.map((r, i) => (
{r.year}

{r.h}

{r.p}

{r.tag && ★ {r.tag}}
))}
); } // ---------- Research ---------- function Research({ t }) { const s = t.sections.research; return (
{s.body.map((p, i) =>

{p}

)}
); } // ---------- Leadership ---------- function Leadership({ t }) { const s = t.sections.leadership; return (
{s.cards.map((c, i) => (

{c.h}{c.tag}

{c.p}

))}
); } // ---------- Activities ---------- function Activities({ t }) { const s = t.sections.activities; return (
{s.items.map((it, i) => (
{it.t}
{it.f}
))}
); } // ---------- Vision ---------- function Vision({ t }) { const s = t.sections.vision; return (

{s.quote}

{s.body.map((p, i) =>

{p}

)}
); } // ---------- Works ---------- function Works({ t }) { const s = t.sections.works; return (

{s.intro}

{s.count}
{s.items.map((w, i) => ( ))}
); } function WorkCard({ work, viewLabel }) { const [loaded, setLoaded] = useState(false); const [inView, setInView] = useState(false); const ref = useRef(null); useEffect(() => { if (!ref.current) return; const obs = new IntersectionObserver((entries) => { entries.forEach(en => { if (en.isIntersecting) { setInView(true); obs.disconnect(); } }); }, { rootMargin: "200px" }); obs.observe(ref.current); return () => obs.disconnect(); }, []); const urlDisplay = work.url.replace(/^https?:\/\//, ""); return (
{inView && (