/* ============================================================ SECTIONS 1 — Nav, Hero, Disciplinas ============================================================ */ /* ---------- Nav ---------- */ function Nav({ onNav, active }) { const [scrolled, setScrolled] = React.useState(false); const [open, setOpen] = React.useState(false); React.useEffect(() => { const fn = () => setScrolled(window.scrollY > 64); window.addEventListener('scroll', fn, { passive: true }); fn(); return () => window.removeEventListener('scroll', fn); }, []); const links = [ { id: 'disciplinas', label: 'Disciplinas' }, { id: 'sobre', label: 'Sobre mí' }, { id: 'proyectos', label: 'Proyectos' }, { id: 'trayectoria', label: 'Trayectoria' }, { id: 'contacto', label: 'Contacto' }, ]; const onDark = !scrolled; return (
{ e.preventDefault(); onNav('top'); }} style={{ display: 'flex', alignItems: 'center', gap: 11, textDecoration: 'none' }}> Yan Trotta
{open ? (
{links.map((l) => ( { e.preventDefault(); setOpen(false); onNav(l.id); }} style={{ color: 'var(--white)', textDecoration: 'none', fontWeight: 600, fontSize: 15, padding: '12px 0', borderBottom: '1px solid var(--color-border-inverse)' }}>{l.label} ))}
) : null}
); } function NavLink({ label, onClick, onDark, active }) { const [h, setH] = React.useState(false); const accent = active || h; return ( { e.preventDefault(); onClick(); }} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{ position: 'relative', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-medium)', textDecoration: 'none', color: accent ? 'var(--color-accent)' : (onDark ? 'rgba(255,255,255,0.92)' : 'var(--color-text)'), transition: 'color var(--dur-fast)', whiteSpace: 'nowrap' }}> {label} ); } /* ---------- Hero ---------- */ function Hero({ onNav, tweaks }) { const heroImg = 'assets/img/hds-villa-dusk.jpg'; const ov = (tweaks && tweaks.heroOverlay) || 'Medio'; const overlays = { 'Sutil': 'linear-gradient(180deg, rgba(10,21,29,0.48) 0%, rgba(10,21,29,0.06) 32%, rgba(10,21,29,0.14) 60%, rgba(10,21,29,0.70) 100%)', 'Medio': 'linear-gradient(180deg, rgba(10,21,29,0.62) 0%, rgba(10,21,29,0.18) 32%, rgba(10,21,29,0.30) 60%, rgba(10,21,29,0.86) 100%)', 'Intenso': 'linear-gradient(180deg, rgba(10,21,29,0.78) 0%, rgba(10,21,29,0.40) 32%, rgba(10,21,29,0.52) 60%, rgba(10,21,29,0.94) 100%)', }; const showStats = !tweaks || tweaks.mostrarStats !== false; return (

Interior & Set Designer · Project Manager

Yan Trotta

Más de 20 años entre Argentina y España en escenografía para TV, interiorismo, reformas y coordinación de obra. Te comparto aquí una selección de mis trabajos.

{showStats ? (
{[['20+', 'Años de experiencia'], ['ARG · ESP', 'Dos mercados'], ['3', 'Áreas clave'], ['TV · Obra', 'Diseño y ejecución']].map(([n, l]) => (
{n}
{l}
))}
) :
}
); } /* ---------- Disciplinas ---------- */ function Disciplinas({ refMap, onNav }) { return (
{ if (refMap) refMap.current['disciplinas'] = el; }} style={{ background: 'var(--color-bg)', padding: 'clamp(64px, 9vh, 112px) 0' }}>
Tres áreas,
un mismo método} />

Un perfil transversal que une diseño y ejecución: del concepto y el presupuesto a la coordinación de obra y la entrega final.

{DISCIPLINAS.map((d, i) => )}
); } function DisciplinaCard({ d, i, onNav }) { const [h, setH] = React.useState(false); return ( { e.preventDefault(); onNav('proyectos'); }} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{ display: 'flex', flexDirection: 'column', height: '100%', textDecoration: 'none', background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: h ? 'var(--shadow-md)' : 'var(--shadow-xs)', transform: h ? 'translateY(-3px)' : 'none', transition: 'box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out)' }}>
{d.image ? ( {d.label} ) : (
Fotos próximamente
)} {d.n}

{d.label}

{d.desc}

{d.meta}

); } Object.assign(window, { Nav, Hero, Disciplinas });