// Section components // ---------- Hooks ---------- const useReveal = () => { React.useEffect(()=>{ const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries)=>{ entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); },{ threshold:.12 }); els.forEach(el=>io.observe(el)); return ()=>io.disconnect(); },[]); }; // Parallax: applies translateY based on scroll relative to element center. // speed > 0 moves slower than scroll (background feel); negative moves opposite. const useParallax = (speed = 0.2) => { const ref = React.useRef(null); React.useEffect(()=>{ const el = ref.current; if (!el) return; let raf = 0; const update = ()=>{ const r = el.getBoundingClientRect(); const center = r.top + r.height/2; const offset = (center - window.innerHeight/2) * -speed; el.style.transform = `translate3d(0, ${offset.toFixed(1)}px, 0)`; }; const onScroll = ()=>{ cancelAnimationFrame(raf); raf = requestAnimationFrame(update); }; update(); window.addEventListener('scroll', onScroll, { passive:true }); window.addEventListener('resize', onScroll); return ()=>{ window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); cancelAnimationFrame(raf); }; },[speed]); return ref; }; const useCounter = (target, durationMs = 1800) => { const ref = React.useRef(null); const [val, setVal] = React.useState(0); React.useEffect(()=>{ const el = ref.current; if (!el) return; let started = false; const io = new IntersectionObserver(([e])=>{ if (e.isIntersecting && !started){ started = true; const start = performance.now(); const tick = (now)=>{ const t = Math.min(1, (now-start)/durationMs); const eased = 1 - Math.pow(1-t, 3); setVal(Math.round(eased*target)); if (t<1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); } },{ threshold:.4 }); io.observe(el); return ()=>io.disconnect(); },[target, durationMs]); return [ref, val]; }; // ---------- Cursor ---------- const Cursor = () => { const dotRef = React.useRef(null); const ringRef = React.useRef(null); React.useEffect(()=>{ let x=window.innerWidth/2, y=window.innerHeight/2, rx=x, ry=y; const onMove = (e)=>{ x = e.clientX; y = e.clientY; if (dotRef.current){ dotRef.current.style.left = x+'px'; dotRef.current.style.top = y+'px'; } const t = e.target; if (t && t.closest && t.closest('a,button,.reel-card,.tilt,[data-magnet]')) document.body.classList.add('cursor-active'); else document.body.classList.remove('cursor-active'); }; const tick = ()=>{ rx += (x-rx)*.18; ry += (y-ry)*.18; if (ringRef.current){ ringRef.current.style.left = rx+'px'; ringRef.current.style.top = ry+'px'; } requestAnimationFrame(tick); }; requestAnimationFrame(tick); window.addEventListener('mousemove', onMove); return ()=>window.removeEventListener('mousemove', onMove); },[]); return (<>
); }; // ---------- Nav ---------- const Nav = () => { const { lang, setLang, t } = React.useContext(LanguageContext); return ( ); }; // ---------- Hero ---------- const Hero = () => { const { t } = React.useContext(LanguageContext); const [time, setTime] = React.useState(''); React.useEffect(()=>{ const tFunc = ()=> setTime(new Date().toLocaleTimeString('en-GB',{hour:'2-digit',minute:'2-digit',second:'2-digit',timeZone:'Asia/Tashkent'}) + ' TOSHKENT'); tFunc(); const id = setInterval(tFunc,1000); return ()=>clearInterval(id); },[]); return (
{/* Mesh background */}
{/* 3D-ish floating element */}
{/* Top meta row */}
[ Portfolio ’26 ] — Vol. 04
{time}
{/* Available pill */}
{t('hero_status')}
{/* Massive wordmark */}

CREZ

{/* Tagline */}
{t('hero_sub')}
{/* Scroll indicator */}
{t('hero_scroll')}
); }; // ---------- About ---------- const About = () => { const { t } = React.useContext(LanguageContext); return (
{t('about_eyebrow')}

{t('about_body')}

Muhammadamin
SELF · 2026◉ LIVE
CREZ_PORTRAIT.MOV
{/* Marquee statement */}
{Array.from({length:2}).map((_,k)=>(
ANIMATSIYA· 3D· BREND· FILM· VFX·
))}
); }; // ---------- Stats ---------- const Stat = ({ n, suffix, label, delay=0 }) => { const [ref, val] = useCounter(n); return (
{val}{suffix}
{label}
); }; const Stats = () => { const { t } = React.useContext(LanguageContext); return (
{t('stats_eyebrow')}
); }; // ---------- Skills ---------- const SkillCard = ({ name, level, kind, idx }) => { const ref = React.useRef(null); const onMove = (e)=>{ const r = ref.current.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width - .5; const y = (e.clientY - r.top) / r.height - .5; ref.current.style.transform = `translateY(-6px) rotateX(${ -y*8 }deg) rotateY(${ x*8 }deg)`; }; const onLeave = ()=>{ if (ref.current) ref.current.style.transform = ''; }; return (
{kind}
0{idx+1}
{name}
MAHORAT{level}%
); }; const Skills = () => { const { t } = React.useContext(LanguageContext); return (
{t('skills_eyebrow')}

); }; // ---------- Work / Bento ---------- const VideoTile = ({ src, title, client, year, category, span = '', large = false }) => (