// Ricardo Vargas — Portfolio
const TALLY = '#E30613';
const useIsMobile = () => {
const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768);
React.useEffect(() => {
const handler = () => setIsMobile(window.innerWidth < 768);
window.addEventListener('resize', handler);
return () => window.removeEventListener('resize', handler);
}, []);
return isMobile;
};
const Hamburger = ({ open }) => (
);
const Portfolio = () => {
const [lang, setLang] = React.useState('en');
const [tab, setTab] = React.useState('live');
const [openProject, setOpenProject] = React.useState(null);
const [menuOpen, setMenuOpen] = React.useState(false);
const isMobile = useIsMobile();
const t = window.COPY[lang];
const projects = window.PROJECTS[tab];
const sectionLabel = tab === 'commercial' ? t.nav.commercial : t.nav.live;
React.useEffect(() => {
if (openProject) window.scrollTo({ top: 0, behavior: 'instant' });
}, [openProject]);
React.useEffect(() => {
document.body.style.overflow = menuOpen ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [menuOpen]);
const handleTab = (newTab) => {
setOpenProject(null);
setTab(newTab);
setMenuOpen(false);
};
return (
{/* Sticky header */}
{isMobile ? (
) : (
)}
{/* Mobile menu overlay */}
{isMobile && menuOpen && (
setMenuOpen(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(10,10,11,0.97)', backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', zIndex: 9, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 40 }}>
handleTab('live')}>{t.nav.live.toUpperCase()}
handleTab('commercial')}>{t.nav.commercial.toUpperCase()}
{ setOpenProject(null); setMenuOpen(false); }} style={{ color: 'rgba(255,255,255,0.55)', fontSize: 13, letterSpacing: '0.22em', fontWeight: 500, textDecoration: 'none' }}>{t.nav.contact.toUpperCase()}
)}
{openProject ?
setOpenProject(null)} /> :
<>
{/* Meta row */}
{t.workLabel} — {sectionLabel.toUpperCase()}
{String(projects.length).padStart(2, '0')} {lang === 'en' ? 'PROJECTS' : 'PROYECTOS'}
{projects.length === 0 ? : }
}
{hero.length > 0 &&
{hero.map((p) => onOpen(p)} />)}
}
{rest.length > 0 &&
{rest.map((p) => onOpen(p)} />)}
}
{t.recLabel}
{t.comingSoon}
{t.comingSoonSub}
;
// ─── Tile ────────────────────────────────────────────────────
const Tile = ({ p, t, large, onClick }) => {
const [hover, setHover] = React.useState(false);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
onClick={onClick}
style={{
position: 'relative', aspectRatio: '16/9',
overflow: 'hidden', cursor: 'pointer', background: '#000'
}}>
{p.client.toUpperCase()} — {p.year}
{p.title}
{p.year}
{/* Back link */}
{/* Title block */}
{project.client.toUpperCase()} · {project.year}
{project.title}
{project.credits[0]?.role[lang]}: {project.credits[0]?.name}
|
{project.credits[1]?.role[lang]}: {project.credits[1]?.name}
{/* Hero video player */}
{/* Credits + Gear */}
{project.title}
{lang === 'en' ? 'Shot on' : 'Filmado en'} {project.gear.cameras[0]} {lang === 'en' ? 'using' : 'usando'} {project.gear.lenses[0]} {lang === 'en' ? 'and' : 'y'} {project.gear.lenses[1]}.
{project.credits.map((c, i) =>
{c.role[lang]}: {c.name}
)}
{/* Camera + lens detail blocks */}
{/* More frames carousel */}
{t.moreFrames.toUpperCase()}
{label.toUpperCase()}
{items.map((it, i) =>
{it}
)}
;
// ─── Video player ─────────────────────────────────────────────
const VideoPlayer = ({ src, title, vimeoId, vimeoHash }) => {
if (vimeoId) {
const url = `https://player.vimeo.com/video/${vimeoId}?h=${vimeoHash}&autoplay=0&title=0&byline=0&portrait=0`;
return (
);
}
const [playing, setPlaying] = React.useState(false);
return (
setPlaying(!playing)}>
{images.map((src, i) =>
)}
{/* Arrows */}
{/* Counter */}
{String(idx + 1).padStart(2, '0')} / {String(images.length).padStart(2, '0')}
{/* Thumbs */}
{images.map((src, i) =>
)}
);
};
const arrowStyle = (side) => ({
position: 'absolute', top: '50%', transform: 'translateY(-50%)',
[side]: 12,
width: 40, height: 40, borderRadius: '50%',
background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(6px)',
border: '1px solid rgba(255,255,255,0.3)',
color: '#fff', cursor: 'pointer',
display: 'flex', alignItems: 'center', justifyContent: 'center',
transition: 'background 200ms'
});
const ArrowSvg = ({ dir }) =>
;
// ─── Nav button + lang ───────────────────────────────────────
const NavSeg = ({ active, onClick, children }) =>
;
const LangToggle = ({ lang, setLang }) =>
·
;
// ─── Contact ─────────────────────────────────────────────────
const Contact = ({ lang, t }) => {
const isMobile = useIsMobile();
const [name, setName] = React.useState('');
const [email, setEmail] = React.useState('');
const [msg, setMsg] = React.useState('');
const [status, setStatus] = React.useState('idle');
const [honey, setHoney] = React.useState('');
const [lastSubmit, setLastSubmit] = React.useState(null);
const [turnstileToken, setTurnstileToken] = React.useState('');
const turnstileRef = React.useRef(null);
const widgetIdRef = React.useRef(null);
React.useEffect(() => {
const tryRender = () => {
if (window.turnstile && turnstileRef.current && widgetIdRef.current === null) {
widgetIdRef.current = window.turnstile.render(turnstileRef.current, {
sitekey: '0x4AAAAAADJD0zDbWlNCGMBv',
theme: 'dark',
callback: (token) => setTurnstileToken(token),
'expired-callback': () => setTurnstileToken(''),
'error-callback': () => setTurnstileToken(''),
});
}
};
tryRender();
if (!window.turnstile) {
const id = setInterval(() => { if (window.turnstile) { clearInterval(id); tryRender(); } }, 100);
return () => clearInterval(id);
}
}, []);
const labels = lang === 'en' ?
{ name: 'Name', email: 'Email', project: 'Tell me about your project', send: 'Send inquiry', sent: 'Thanks — I\'ll be in touch.', error: 'Something went wrong. Try again.', or: 'Or email directly', based: 'Based', social: 'Social', mty: 'Cartago, CR', work: 'Working nationwide' } :
{ name: 'Nombre', email: 'Correo', project: 'Cuéntame sobre tu proyecto', send: 'Enviar mensaje', sent: 'Gracias — pronto te contacto.', error: 'Algo salió mal. Intenta de nuevo.', or: 'O escribe directamente', based: 'Sede', social: 'Redes', mty: 'Cartago, CR', work: 'Trabajando nacionalmente' };
const handleSubmit = async (e) => {
e.preventDefault();
if (honey) { setStatus('sent'); return; }
if (!turnstileToken) return;
if (lastSubmit && Date.now() - lastSubmit < 60_000) { setStatus('ratelimit'); return; }
if (!name.trim() || !email.trim() || !msg.trim()) return;
if (name.length > 200 || email.length > 320 || msg.length > 5000) { setStatus('error'); return; }
setStatus('sending');
try {
const res = await fetch('https://formspree.io/f/xjglwkrw', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
body: JSON.stringify({ name, email, message: msg, 'cf-turnstile-response': turnstileToken }),
});
if (res.ok) { setStatus('sent'); setLastSubmit(Date.now()); } else { setStatus('error'); }
} catch { setStatus('error'); }
};
const sent = status === 'sent';
const sending = status === 'sending';
const ratelimited = status === 'ratelimit';
return (
);
};
const FormField = ({ label, value, onChange, disabled, type = 'text', multiline }) => {
const [focus, setFocus] = React.useState(false);
const Tag = multiline ? 'textarea' : 'input';
return (
);
};
window.Portfolio = Portfolio;