// Reusable building blocks
const { useState, useEffect, useRef, useMemo } = React;
const Eyebrow = ({ children, accent = false }) => (
);
const SectionHead = ({ eyebrow, title, italic, sub, action }) => {
// title is the rendered string with {italic} as the italic word
const parts = title.split("{italic}");
return (
{eyebrow}
{parts[0]}
{italic}
{parts[1]}
{sub &&
{sub}
}
{action}
);
};
const PillButton = ({ children, href, onClick, variant = "outline", size = "md", arrow = false, target, rel, download }) => {
const sizes = {
sm: { px: 14, py: 7, fs: 12 },
md: { px: 22, py: 12, fs: 13 },
lg: { px: 28, py: 14, fs: 14 },
};
const s = sizes[size];
const baseStyle = {
display: "inline-flex",
alignItems: "center",
gap: 10,
padding: `${s.py}px ${s.px}px`,
fontSize: s.fs,
fontWeight: 500,
borderRadius: 999,
transition: "transform 0.25s ease, color 0.25s, background 0.25s",
whiteSpace: "nowrap",
fontFamily: "Inter",
};
const variants = {
solid: { background: "var(--text)", color: "var(--bg)", border: "1px solid var(--text)" },
outline: { background: "transparent", color: "var(--text)", border: "1px solid var(--stroke-hi)" },
ghost: { background: "var(--surface)", color: "var(--text)", border: "1px solid var(--stroke)" },
};
const Tag = href ? "a" : "button";
return (
(e.currentTarget.style.transform = "scale(1.04)")}
onMouseLeave={(e) => (e.currentTarget.style.transform = "scale(1)")}
>
{children}
{arrow && ↗ }
);
};
const Tag = ({ children, accent = false }) => (
{children}
);
const LiveDot = ({ color = "rgb(74,222,128)" }) => (
onNav("home")} style={{ background: "none", border: "none", padding: 2, marginLeft: 2, marginRight: 4 }}>
{items.map((it) => (
onNav(it.id)}
style={{
padding: "8px 14px",
fontSize: 13,
fontWeight: 500,
borderRadius: 999,
border: "none",
color: active === it.id ? "var(--text)" : "var(--text-dim)",
background: active === it.id ? "oklch(0.30 0.008 240 / 0.6)" : "transparent",
transition: "color 0.2s, background 0.2s",
}}
onMouseEnter={(e) => { if (active !== it.id) { e.currentTarget.style.color = "var(--text)"; e.currentTarget.style.background = "oklch(0.30 0.008 240 / 0.4)"; } }}
onMouseLeave={(e) => { if (active !== it.id) { e.currentTarget.style.color = "var(--text-dim)"; e.currentTarget.style.background = "transparent"; } }}
>
{it.label}
))}
{ e.currentTarget.style.color = "var(--text)"; e.currentTarget.style.background = "oklch(0.30 0.008 240 / 0.4)"; }}
onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-dim)"; e.currentTarget.style.background = "transparent"; }}>GitHub
{ e.currentTarget.style.color = "var(--text)"; e.currentTarget.style.background = "oklch(0.30 0.008 240 / 0.4)"; }}
onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-dim)"; e.currentTarget.style.background = "transparent"; }}>LinkedIn
{ e.currentTarget.style.color = "var(--text)"; e.currentTarget.style.background = "oklch(0.30 0.008 240 / 0.4)"; }}
onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-dim)"; e.currentTarget.style.background = "transparent"; }}>Resume
Say hi
);
};
const ScrollIndicator = () => (
);
// HERO BACKGROUND — original animated waveform/grid (no copyrighted video)
const HeroBackdrop = () => {
const ref = useRef(null);
useEffect(() => {
const c = ref.current;
if (!c) return;
const ctx = c.getContext("2d");
let raf, t = 0;
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const resize = () => {
c.width = c.clientWidth * dpr;
c.height = c.clientHeight * dpr;
};
resize();
window.addEventListener("resize", resize);
const draw = () => {
const w = c.width, h = c.height;
ctx.clearRect(0, 0, w, h);
// grid
ctx.strokeStyle = "rgba(80, 90, 110, 0.10)";
ctx.lineWidth = 1;
const gs = 60 * dpr;
for (let x = 0; x < w; x += gs) {
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke();
}
for (let y = 0; y < h; y += gs) {
ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
}
// multiple sine waves drifting
const waves = [
{ amp: 60, freq: 0.004, speed: 0.6, alpha: 0.35, hue: 230 },
{ amp: 90, freq: 0.0025, speed: 0.4, alpha: 0.22, hue: 240 },
{ amp: 40, freq: 0.008, speed: 1.0, alpha: 0.18, hue: 220 },
];
for (const wv of waves) {
ctx.beginPath();
for (let x = 0; x <= w; x += 4) {
const y = h / 2 + Math.sin(x * wv.freq + t * wv.speed) * wv.amp * dpr
+ Math.sin(x * wv.freq * 2.3 + t * wv.speed * 1.4) * wv.amp * 0.3 * dpr;
if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
}
const grad = ctx.createLinearGradient(0, 0, w, 0);
grad.addColorStop(0, `oklch(0.78 0.10 ${wv.hue} / 0)`);
grad.addColorStop(0.5, `oklch(0.78 0.10 ${wv.hue} / ${wv.alpha})`);
grad.addColorStop(1, `oklch(0.78 0.10 ${wv.hue} / 0)`);
ctx.strokeStyle = grad;
ctx.lineWidth = 1.4 * dpr;
ctx.stroke();
}
t += 0.012;
raf = requestAnimationFrame(draw);
};
draw();
return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); };
}, []);
return (
{/* radial vignette */}
{/* bottom fade */}
);
};
Object.assign(window, { Eyebrow, SectionHead, PillButton, Tag, LiveDot, Logo, Navbar, ScrollIndicator, HeroBackdrop });