/* global React */ const { useState, useEffect, useRef } = React; // ---------- Icons ---------- const IconSun = () => ( ); const IconMoon = () => ( ); const IconArrow = ({ size = 14 }) => ( ); const IconArrowUpRight = ({ size = 14 }) => ( ); // ---------- Hooks ---------- function useActiveSection(ids) { const [active, setActive] = useState(ids[0]); useEffect(() => { const obs = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); }); }, { rootMargin: "-40% 0px -55% 0px", threshold: 0 } ); ids.forEach((id) => { const el = document.getElementById(id); if (el) obs.observe(el); }); return () => obs.disconnect(); }, [ids.join(",")]); return active; } function useReveal() { useEffect(() => { const els = document.querySelectorAll(".reveal"); const obs = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); obs.unobserve(e.target); } }); }, { threshold: 0.12 } ); els.forEach((el) => obs.observe(el)); return () => obs.disconnect(); }, []); } function useScrolled() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); return scrolled; } // ---------- Header ---------- function Header({ active, theme, onToggleTheme, name }) { const scrolled = useScrolled(); const links = [ { id: "about", label: "About" }, { id: "stack", label: "Stack" }, { id: "projects", label: "Projects" }, { id: "experience", label: "Experience" }, { id: "contact", label: "Contact" } ]; const logo = theme === "dark" ? "assets/whitelogo.svg" : "assets/blacklogo.svg"; return (
Logo {name}
); } // ---------- Hero variants ---------- function HeroQuiet({ data }) { return (
01 Portfolio — {data.year} · {data.status}

{data.name.toUpperCase()}

{data.role}
{data.about.lead}
See selected work
); } function HeroGrid({ data }) { const rows = [ { num: "01", key: "Name", val: data.name }, { num: "02", key: "Role", val: data.role }, { num: "03", key: "Stack", val: "TypeScript · React · Vue · Next.js · Django · PostgreSQL" }, { num: "04", key: "Location", val: data.about.side[0].value }, { num: "05", key: "Status", val: data.status }, { num: "06", key: "Year", val: data.year } ]; return (
Index 01 — 06 · Portfolio {data.year}

{data.name.toUpperCase()}

{data.role}
{rows.map((r) => (
{r.num}
{r.key}
{r.val}
))}
{data.about.lead}
See selected work
); } function HeroMarquee({ data }) { const text = data.name.toUpperCase(); return (
01 Portfolio — {data.year}
{data.role}
{data.about.lead}
See selected work
); } function Hero({ variant, data }) { if (variant === "grid") return ; if (variant === "marquee") return ; return ; } // ---------- About ---------- function About({ data }) { return (
About — 01
{data.about.side.map((s, i) => (
{s.label} {s.value}
))}

{data.about.lead}

); } // ---------- Stack ---------- function Stack({ data }) { return (
Stack — 02

The tools
I trust.

{data.stack.map((s, i) => (
{String(i + 1).padStart(2, "0")}
{s.name}
{s.kind}
))}
); } // ---------- Projects ---------- function Projects({ data }) { return (
Projects — 03

Selected
work.

{String(data.projects.length).padStart(2, "0")} pieces
{data.projects.map((p) => (
{!p.image && {p.placeholder}}
{p.num}

{p.name}

View

{p.desc}

{p.tags.map((t) => {t})}
))}
); } // ---------- Experience ---------- function Experience({ data }) { return (
Experience — 04

A short
history.

{data.experience.map((e) => (
{e.logo && {e.org}}
{e.num}

{e.role}

{e.org}
{e.period}
{e.desc && (
    {Array.isArray(e.desc) ? e.desc.map((item, i) => (
  • {item}
    • )) :
  • {e.desc}
    • }
)}
))}
); } // ---------- Contact ---------- function Contact({ data }) { return (
Contact — 05

Let's
talk.

Email {data.contact.email} {data.contact.links.map((l) => ( {l.platform} {l.handle} ))}
); } // ---------- Footer ---------- function Footer({ data }) { return ( ); } Object.assign(window, { Header, Hero, About, Stack, Projects, Experience, Contact, Footer, useActiveSection, useReveal });