// v70 — Gradient Mesh (Stripe-like, con grain + counters + gradient borders) const V70Mesh = ({ data, lang, setLang = () => {} }) => { const { useState, useEffect, useRef } = React; const t = (es, en) => lang === 'es' ? es : en; // Animated counters const [counts, setCounts] = useState({ projects: 0, years: 0, stack: 0 }); const targets = { projects: data.projects.length, years: new Date().getFullYear() - 2019, stack: data.stack.flatMap(s => s.items).length }; const hasAnimated = useRef(false); useEffect(() => { const observer = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting && !hasAnimated.current) { hasAnimated.current = true; const duration = 1800; const steps = 60; const interval = duration / steps; let step = 0; const timer = setInterval(() => { step++; const progress = step / steps; const ease = 1 - Math.pow(1 - progress, 3); setCounts({ projects: Math.round(targets.projects * ease), years: Math.round(targets.years * ease), stack: Math.round(targets.stack * ease), }); if (step >= steps) clearInterval(timer); }, interval); } }); }, { threshold: 0.3 }); const el = document.getElementById('mesh-stats'); if (el) observer.observe(el); return () => observer.disconnect(); }, []); return (
{/* Grain */}
{/* Mesh orbs */}
{/* Nav */} {/* Hero */}
Portfolio — {new Date().getFullYear()}

{data.name}

{t(data.role_es, data.role_en)}

{t(data.tagline_es, data.tagline_en)}

{/* Stats */}
{[ { num: counts.projects, label: t('Proyectos', 'Projects'), suffix: '+' }, { num: counts.years, label: t('Años de exp.', 'Years exp.'), suffix: '+' }, { num: counts.stack, label: t('Tecnologías', 'Technologies'), suffix: '' }, ].map((stat, i) => (
{stat.num}{stat.suffix}
{stat.label}
))}
{/* About + Stack */}
{t('Sobre Mí', 'About')}

{t('Hola, soy', 'Hi, I\'m')} {data.name.split(' ')[0]}

{(lang === 'es' ? data.about_es : data.about_en).map((p, i) => (

{p}

))}
Stack

{t('Tecnologías', 'Technologies')}

{data.stack.map(g => (
{t(g.group_es, g.group_en)}
{g.items.map(item => {item})}
))}
{/* Projects */}
{t('Portafolio', 'Portfolio')}

{t('Proyectos', 'Projects')}

{data.projects.map((p, i) => (
{t(p.kind_es, p.kind_en)} {p.year}

{t(p.name_es, p.name_en)}

{t(p.short_es, p.short_en)}

{p.tags.map(tag => {tag})}
))}
{/* Footer / CTA */}
); }; window.V70Mesh = V70Mesh;