// Experience, Skills, Projects, Certifications, Contact — balanced compact function Experience() { const D = window.DATA; const [expanded, setExpanded] = React.useState(-1); return (
Experience {D.experience.length} ROLES · 6 YRS
{D.experience.map((job, i) => { const isOpen = expanded === i; return (
setExpanded(isOpen ? -1 : i)} style={{ cursor: 'pointer', display: 'grid', gridTemplateColumns: '110px 1fr auto', gap: 18, alignItems: 'baseline', }} >
{job.period.split('—')[0].trim()} · {job.duration} {job.current && (
● CURRENT
)}
{job.role}
{job.company} {' · '}{job.location} · {job.type}

{job.highlights[0]}

{job.tags.map(t => ( {t} ))}
+
MORE SCOPE
    {job.highlights.slice(1).map((h, j) => (
  • → {h}
    • ))}
); })}
EDUCATION
{D.education.school}
{D.education.degree}
{D.education.period}
); } function Skills() { const D = window.DATA; const categories = Object.keys(D.skills); return (
Toolbelt {categories.length} CATEGORIES
{categories.map((cat, i) => (
{String(i + 1).padStart(2, '0')} {cat.toUpperCase()}
{D.skills[cat].map(s => ( {s} ))}
))}
); } function Projects({ onOpenProject }) { const D = window.DATA; return (
Selected Projects CLICK ROW FOR DOSSIER
{D.projects.map((p, i) => (
onOpenProject(p)} style={{ borderBottom: '1px solid var(--line)', padding: '10px 10px', cursor: 'pointer', transition: 'background 0.15s', display: 'grid', gridTemplateColumns: '34px 1fr 200px 110px 24px', gap: 14, alignItems: 'center', }} onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--paper-tint)'; e.currentTarget.querySelector('.proj-arrow').style.transform = 'translateX(4px)'; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.querySelector('.proj-arrow').style.transform = 'translateX(0)'; }} >
{String(i + 1).padStart(2, '0')}
{p.name}
{p.client}
{p.systems.slice(0, 3).map(s => ( {s} ))}
{p.value}
{p.year} · {p.scope}
→
))}
// MORE AVAILABLE ON REQUEST — NDA APPLIES TO CLIENT-SPECIFIC DRAWINGS
); } function Certifications() { const D = window.DATA; return (
Certifications
{D.certifications.map((c, i) => (
✓
#{c.id}
{c.name}
{c.issuer}
ISSUED
{c.date}
{c.expires && (
EXPIRES
{c.expires}
)}
))}
); } function Contact() { const D = window.DATA; return (
// 06 · LET'S TALK

Need a low-voltage partner that reads the plans before pricing them?

GCs, integrators, and owners — Calidad does design-build, bid spec, and service work across the U.S. Send me the drawings, I'll send back an honest scope.

Send email → Schedule a call
EMAIL
{D.email}
LINKEDIN
{D.linkedin}
BASED
Rizal, PH · Remote U.S.
RESPONSE
Within 24h
© 2026 Edanuele Corleto Drawn in HTML · Rev C · {new Date().toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
); } function ScrollSpy({ theme, onToggleTheme }) { const sections = [ { id: 'about', label: 'About' }, { id: 'experience', label: 'Experience' }, { id: 'skills', label: 'Skills' }, { id: 'projects', label: 'Projects' }, { id: 'contact', label: 'Contact' }, ]; const [visible, setVisible] = React.useState(false); const [active, setActive] = React.useState('about'); const [open, setOpen] = React.useState(false); React.useEffect(() => { const onScroll = () => { setVisible(window.scrollY > 500); let current = sections[0].id; for (const s of sections) { const el = document.getElementById(s.id); if (el && el.getBoundingClientRect().top < 200) current = s.id; } setActive(current); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const activeLabel = sections.find(s => s.id === active)?.label || 'About'; return (
setOpen(true)} onMouseLeave={() => setOpen(false)} style={{ background: 'var(--bg)', border: '1px solid var(--line-strong)', borderRadius: 999, boxShadow: '0 6px 20px rgba(0,0,0,0.08)', padding: '7px 4px 7px 16px', display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink)', cursor: 'pointer', }} > {activeLabel}
{sections.map(s => ( {s.label} ))}
···
); } function HobbyTicker() { const facts = [ "// titanium embedded in both wrists — basically half iron man, half wolverine", "// builds things with AI for fun, not just for work", "// certified cat person", "// lucky husband to an amazing wife", "// flies FPV drones — simulation only, walls are expensive", "// MMORPG is the only correct genre of game", "// first touched a computer at age 5 and never recovered", ]; const [idx, setIdx] = React.useState(0); const [visible, setVisible] = React.useState(true); React.useEffect(() => { const cycle = setInterval(() => { setVisible(false); setTimeout(() => { setIdx(i => (i + 1) % facts.length); setVisible(true); }, 500); }, 3000); return () => clearInterval(cycle); }, []); return (
{facts[idx]}
); } function Builds() { const D = window.DATA; const builds = D.builds || []; const [activeScreenshot, setActiveScreenshot] = React.useState({}); const [lightbox, setLightbox] = React.useState(null); // { shots, name, index, position } | null const touch = React.useRef(null); const prevShot = (i, len) => setActiveScreenshot(prev => ({ ...prev, [i]: Math.max((prev[i] || 0) - 1, 0) })); const nextShot = (i, len) => setActiveScreenshot(prev => ({ ...prev, [i]: Math.min((prev[i] || 0) + 1, len - 1) })); const lbPrev = () => setLightbox(lb => lb ? { ...lb, index: Math.max(0, lb.index - 1) } : lb); const lbNext = () => setLightbox(lb => lb ? { ...lb, index: Math.min(lb.shots.length - 1, lb.index + 1) } : lb); // Touch swipe: past a ~40px horizontal drag, fire onLeft (swipe left) or onRight const swipe = (onLeft, onRight) => ({ onTouchStart: e => { touch.current = e.touches[0].clientX; }, onTouchEnd: e => { if (touch.current == null) return; const dx = e.changedTouches[0].clientX - touch.current; touch.current = null; if (dx <= -40) onLeft(); else if (dx >= 40) onRight(); }, }); React.useEffect(() => { if (!lightbox) return; document.body.classList.add('modal-open'); const onKey = e => { if (e.key === 'Escape') setLightbox(null); else if (e.key === 'ArrowRight') lbNext(); else if (e.key === 'ArrowLeft') lbPrev(); }; window.addEventListener('keydown', onKey); return () => { document.body.classList.remove('modal-open'); window.removeEventListener('keydown', onKey); }; }, [lightbox]); if (!builds.length) return null; return (
Side Builds BUILT FOR FUN

Things I build outside of work. Security pays the bills — this is what I do when I'm curious about something and just want to ship it.

{builds.map((b, i) => { const activeIdx = activeScreenshot[i] || 0; const shots = b.screenshots || []; const hasPrev = activeIdx > 0; const hasNext = activeIdx < shots.length - 1; return (
{ e.currentTarget.style.borderColor = 'var(--line-strong)'; e.currentTarget.style.boxShadow = '0 6px 24px rgba(0,0,0,0.06)'; }} onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.boxShadow = 'none'; }} > {/* Screenshot area */}
1 ? swipe(() => nextShot(i, shots.length), () => prevShot(i, shots.length)) : {})} > {shots.length > 0 ? ( {b.name} setLightbox({ shots, name: b.name, index: activeIdx, position: b.shotPosition || 'top' })} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: b.shotPosition || 'top', display: 'block', cursor: 'zoom-in', animation: 'fadeIn 0.25s ease' }} /> ) : (
🦆
)} {/* Expand hint */} {shots.length > 0 && (
⤢
)} {/* Status badge */}
{b.status === 'Live' ? '● LIVE' : '■ PRIVATE'}
{/* Arrow nav — only when multiple shots */} {shots.length > 1 && ( <> {/* Dot indicators */}
{shots.map((_, si) => (
setActiveScreenshot(prev => ({ ...prev, [i]: si }))} style={{ width: si === activeIdx ? 16 : 5, height: 5, borderRadius: 999, background: si === activeIdx ? 'white' : 'rgba(255,255,255,0.45)', cursor: 'pointer', transition: 'all 0.25s ease', boxShadow: '0 1px 3px rgba(0,0,0,0.2)', }} /> ))}
)}
{/* Content */}
{b.tagline}

{b.description}

{b.platform.map(t => ( {t} ))}
); })}
{/* Lightbox — click a build screenshot to enlarge; swipe on mobile, arrows/keys on desktop */} {lightbox && (
setLightbox(null)} {...(lightbox.shots.length > 1 ? swipe(lbNext, lbPrev) : {})} style={{ position: 'fixed', inset: 0, zIndex: 300, background: 'rgba(10,14,10,0.92)', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '48px 20px', animation: 'fadeIn 0.2s ease', }} > {lightbox.name} e.stopPropagation()} style={{ maxWidth: 'min(900px, 94vw)', maxHeight: '86vh', width: 'auto', height: 'auto', objectFit: 'contain', borderRadius: 14, boxShadow: '0 30px 80px rgba(0,0,0,0.5)', animation: 'fadeIn 0.2s ease', }} /> {lightbox.shots.length > 1 && ( <>
e.stopPropagation()} style={{ position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, }}>
{lightbox.shots.map((_, si) => (
setLightbox(lb => ({ ...lb, index: si }))} style={{ width: si === lightbox.index ? 20 : 6, height: 6, borderRadius: 999, background: si === lightbox.index ? 'white' : 'rgba(255,255,255,0.4)', cursor: 'pointer', transition: 'all 0.25s ease', }} /> ))}
{String(lightbox.index + 1).padStart(2, '0')} / {String(lightbox.shots.length).padStart(2, '0')} · SWIPE OR ← →
)}
)}
); } Object.assign(window, { Experience, Skills, Projects, Certifications, Contact, ScrollSpy, HobbyTicker, Builds });