} />
);
/* ---------- battery / charge motif ---------- */
/* A column of cell segments that "charge up" — the signature touch. */
function ChargeColumn({ segments = 7, filled = 5, vertical = true, animate = true }) {
const [lit, setLit] = useState(animate ? 0 : filled);
useEffect(() => {
if (!animate) { setLit(filled); return; }
let n = 0;
setLit(0);
const t = setInterval(() => {
n += 1;
setLit(n);
if (n >= filled) clearInterval(t);
}, 130);
return () => clearInterval(t);
}, [filled, animate]);
return (
{Array.from({ length: segments }).map((_, i) => (
))}
);
}
/* thin battery glyph with a fill level */
function BatteryGlyph({ level = 0.72, w = 46 }) {
return (
);
}
/* ---------- reveal-on-scroll ---------- */
function Reveal({ children, as: Tag = "div", className = "", delay = 0, y = 18, ...rest }) {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
let done = false;
const reveal = () => { if (!done) { done = true; setShown(true); } };
// 1) if already within (or near) the viewport on mount, reveal right away
const inView = () => {
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
return r.top < vh * 0.94 && r.bottom > 0;
};
if (inView()) {
const id = requestAnimationFrame(reveal);
return () => cancelAnimationFrame(id);
}
// 2) otherwise observe for scroll-in, with a hard fallback so content
// can never get stuck invisible if IO never fires in this frame.
let obs;
if ("IntersectionObserver" in window) {
obs = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) reveal(); });
}, { threshold: 0.1, rootMargin: "0px 0px -6% 0px" });
obs.observe(el);
}
const onScroll = () => { if (inView()) reveal(); };
window.addEventListener("scroll", onScroll, { passive: true });
const fallback = setTimeout(reveal, 850);
return () => {
if (obs) obs.disconnect();
window.removeEventListener("scroll", onScroll);
clearTimeout(fallback);
};
}, []);
useEffect(() => { if (shown && ref.current) ref.current.classList.add("in"); }, [shown]);
return (
{children}
);
}
/* ---------- small bits ---------- */
function Kicker({ children, num }) {
return (
{num != null && {num}}
{children}
);
}
function Tag({ children, active, onClick, as = "span" }) {
const Comp = as;
return (
{children}
);
}
/* ---------- nav ---------- */
const NAV = [
{ id: "home", label: "Home" },
{ id: "work", label: "Work" },
{ id: "experience", label: "Experience" },
{ id: "interests", label: "Interests" },
];
function Nav({ route, onRoute, person, progress }) {
return (
);
}
Object.assign(window, {
Icon, IconLinkedIn, IconGitHub, IconArrow, IconDownload, IconClose,
ChargeColumn, BatteryGlyph, Reveal, Kicker, Tag, Nav, NAV,
});