// ───────────────────────────────────────────── // Site sections — Nav, Hero, About, StatusBoard, Career, VisualWork, Contact, Footer // ───────────────────────────────────────────── const { Tape, Polaroid, FilmStripCard, PassportStamp, Sparkline, StickyPill } = window; const useState = React.useState; const useEffect = React.useEffect; // ─────── NAV — sticky-note pills ─────── const Nav = () => { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 30); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); }; // ─────── HERO — collage ─────── const Hero = () => (

jinocarlo abad · san jose, ca

I make
things,{' '} pictures
& reels.

Servers in my closet. Camera on my shoulder. Twenty years figuring it out as I go — building the kind of quiet infrastructure most people never see, and making pictures of the people who do.

{ e.currentTarget.style.transform = 'rotate(-2deg) translateY(-2px)'; e.currentTarget.style.boxShadow = '4px 5px 0 rgba(0,0,0,0.22)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'rotate(-1deg)'; e.currentTarget.style.boxShadow = '3px 3px 0 rgba(0,0,0,0.18)'; }} >say hi → or scroll, no rush
currently:
  • · brewing coffee
  • · wiring a new MCP server
  • · fewer screens, more film
); // ─────── ABOUT — index card ─────── const About = () => (
{/* lined paper */}
{/* red margin line */}
about me —

I'm an infrastructure architect and software engineer with twenty years across the Army's IT corps, clinical EHR rollouts, a self-employed studio, and most recently the County of Santa Clara's communications team.

These days I'm deep in the homelab — running thirty-something services on a self-hosted Proxmox cluster, building MCP servers for semantic search, and tailing my own status board with morning coffee. I document obsessively (107+ decision records and counting).

The rest of the time I'm behind a camera. Stills, motion, the occasional studio set. Same patience, different output.

); // ─────── STATUS BOARD — projects ─────── const SERVICES = [ { num: '001', slug: 'ai-semantic-search', stack: 'pgvector · MCP · CUDA', up: '99.9%', note: 'rag pipelines that actually work' }, { num: '002', slug: 'homelab-platform', stack: 'Proxmox · Traefik · Docker', up: '99.8%', note: '30+ services on bare metal' }, { num: '003', slug: 'zero-trust-net', stack: 'WireGuard · Tailscale', up: '100%', note: 'nobody gets in unless I say so' }, { num: '004', slug: 'ci-cd-backup', stack: 'Forgejo · rclone · PBS', up: '99.7%', note: 'paranoid backups, every six hours' }, ]; const StatusBoard = () => (

03 — what I'm building

currently humming ✓

● all systems happy
~/homelab/status.txt 4 serviceslast check 2m ago
{SERVICES.map((s, i) => (
= 2 ? '1.5px solid #1a1a1a' : 'none', position: 'relative', }}>
{s.num}UP {s.up}
{s.slug}
{s.stack}
-30dnow
"{s.note}"
))}
{[['30+', 'services'], ['3', 'mcps'], ['16', 'tailscale nodes'], ['107+', 'ADRs'], ['34.9TB', 'backups']].map(([n, l], i) => (
{n}
{l}
))}
↑ live status · I tail this myself most mornings :)
); Object.assign(window, { Nav, Hero, About, StatusBoard });