// ui_kits/portfolio/home.jsx // HeroIntro split-panel cinematic reveal + existing editorial home. const { useState, useEffect } = React; // Module-level flag: play once per page load, reset on refresh let _introPlayed = false; // ============================================================ // useScramble — chars cycle randomly then settle on target // ============================================================ function useScramble(target, duration, startDelay) { const CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#@%&'; const [text, setText] = useState(() => target.split('').map((ch) => /[A-Z]/.test(ch) ? '·' : ch).join('') ); useEffect(() => { let raf,startTime = null; const timeout = setTimeout(() => { const animate = (ts) => { if (!startTime) startTime = ts; const progress = Math.min((ts - startTime) / (duration || 900), 1); const result = target.split('').map((ch, i) => { if (!/[A-Z]/.test(ch)) return ch; const thr = i / Math.max(target.length - 1, 1) * 0.32; const cp = Math.max(0, (progress - thr) / (1 - thr + 0.001)); if (cp >= 0.88) return ch; if (progress < 0.04) return '·'; return CHARS[Math.floor(Math.random() * CHARS.length)]; }).join(''); setText(result); if (progress < 1) raf = requestAnimationFrame(animate);else setText(target); }; raf = requestAnimationFrame(animate); }, startDelay || 120); return () => {clearTimeout(timeout);cancelAnimationFrame(raf);}; }, []); return text; } // ============================================================ // IntroContent — logo + meta strip (rendered in both panels) // ============================================================ function IntroContent({ logo, showMeta }) { return (
{/* EL/ monogram */}
{logo.split('').map((ch, i) => {ch} )}
{/* Meta strip */}
40.4168° N · 3.7038° W × FULL-STACK · RED TEAM × EST. 2019
); } // ============================================================ // IntroPanelInner — module-level so ref is stable across renders // ============================================================ function IntroPanelInner({ anchorTop, logo, showMeta, glitch }) { return (
{/* Glitch cyan/magenta offset layers */} {glitch && <>
EL/
EL/
}
); } // ============================================================ // HeroIntro — cinematic split-panel reveal // ============================================================ function HeroIntro({ onDone }) { const [isSplit, setIsSplit] = useState(false); const [showMeta, setShowMeta] = useState(false); const [count, setCount] = useState(0); const [glitch, setGlitch] = useState(false); const logo = useScramble('EL/', 950, 120); useEffect(() => { // Count 0 → 100 over ~2.3s with ease-out curve let raf,t0 = null; const tick = (ts) => { if (!t0) t0 = ts; const p = Math.min((ts - t0) / 2300, 1); const ep = 1 - Math.pow(1 - p, 2.4); setCount(Math.round(ep * 100)); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); const t1 = setTimeout(() => setShowMeta(true), 1100); const tg1 = setTimeout(() => setGlitch(true), 2300); const tg2 = setTimeout(() => setGlitch(false), 2420); const t2 = setTimeout(() => setIsSplit(true), 2500); const t3 = setTimeout(() => {_introPlayed = true;onDone();}, 3350); return () => { cancelAnimationFrame(raf); clearTimeout(t1);clearTimeout(tg1);clearTimeout(tg2); clearTimeout(t2);clearTimeout(t3); }; }, []); const skip = () => {_introPlayed = true;onDone();}; const TR = isSplit ? 'transform 850ms cubic-bezier(0.86, 0, 0.07, 1)' : 'none'; return (
{/* ── Top panel ── */}
{/* ── Bottom panel ── */}
{/* ── Center hairline ── */}
{/* ── Progress bar ── */}
{/* ── Counter bottom-left ── */}
{String(count).padStart(3, '0')}
{/* ── Skip label ── */}
CLICK TO SKIP
{/* ── Version tag top-right ── */}
v07 · 2026
{/* ── Top-left label ── */}
EDUARDO LÓPEZ
); } // ============================================================ // HeroStatus — top status strip // ============================================================ function HeroStatus({ lang }) { const t = useT(lang); return (
STATUS {t.status_available}
LOCATION MADRID, ES - 40.4168° N · 3.7038° W
FOCUS RED TEAM / FULL-STACK
); } // ============================================================ // FeaturedPost tile // ============================================================ function FeaturedPost({ post, lang, go, index }) { const t = useT(lang); const num = String(index + 1).padStart(2, "0"); return ( {e.preventDefault();go("post", { slug: post.slug });}} className="featured-tile"> {post.cover &&
}
{num} {formatDate(post.date, lang)} {post.category.toUpperCase()}

{tx(post.title, lang)}

{tx(post.excerpt, lang)}

{t.home.readMore} →
); } // ============================================================ // Home — Editorial with cinematic intro // ============================================================ function Home({ lang, go }) { // Start visible if intro already played this page session const [introShown, setIntroShown] = useState(_introPlayed); const t = useT(lang); const featured = POSTS.filter((p) => p.featured).slice(0, 3); return (
{!introShown && setIntroShown(true)} /> } {/* Content fades in after intro panels slide away */}
EST. 2019 / Y07

{t.home.hero1}{" "} {t.home.heroAccent}
{t.home.hero2}

— ROLE
Full-Stack Dev
Offensive Sec
— BASED
Madrid · ES
Remote-friendly
— SINCE
{POSTS.length} posts
2019 → now
{t.home.featuredLabel}

{t.home.featuredTitle}
{featured.map((p, i) => )}
); } Object.assign(window, { Home, HeroStatus, FeaturedPost });