// ================================================================ // Home screen — Sai Krishna Durisala Portfolio // ================================================================ const { AGENTS, SUGGESTIONS, HOME_ACTIVITY, TIMELINE } = window.LUMEN_DATA; // Typewriter placeholder — cycles through suggestion phrases const useTypingPlaceholder = (texts) => { const [display, setDisplay] = React.useState(''); React.useEffect(() => { const s = { textIdx: 0, charIdx: 0, phase: 'typing' }; let timerId; const tick = () => { const text = texts[s.textIdx]; let delay; if (s.phase === 'typing') { s.charIdx++; setDisplay(text.slice(0, s.charIdx)); if (s.charIdx >= text.length) { s.phase = 'pausing'; delay = 1800; } else { delay = 52 + Math.random() * 38; // natural variation } } else if (s.phase === 'pausing') { s.phase = 'deleting'; delay = 40; } else if (s.phase === 'deleting') { if (s.charIdx > 0) { s.charIdx--; setDisplay(text.slice(0, s.charIdx)); delay = 26; } else { s.textIdx = (s.textIdx + 1) % texts.length; s.phase = 'typing'; delay = 480; } } timerId = setTimeout(tick, delay); }; timerId = setTimeout(tick, 1000); // start after 1s return () => clearTimeout(timerId); }, []); return display; }; // Scroll-triggered animation hook — observes [data-animate] elements const useScrollAnimate = () => { React.useEffect(() => { const els = document.querySelectorAll('[data-animate]'); if (!els.length) return; const observer = new IntersectionObserver( (entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); // animate once } }); }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' } ); els.forEach(el => { const delay = el.dataset.delay; if (delay) el.style.transitionDelay = `${delay}ms`; observer.observe(el); }); return () => observer.disconnect(); }, []); }; const HomeScreen = ({ onSendPrompt, agents }) => { const [draft, setDraft] = React.useState(''); const typingText = useTypingPlaceholder(SUGGESTIONS.map(s => s.label)); useScrollAnimate(); const handleSend = () => { onSendPrompt(draft, null); setDraft(''); }; return (
{/* ── Hero ── fills viewport; suggestions live here so body starts below fold ── */}
{/* Decorative background — blobs + flowing curves */}