// React Components for Gopikrishna Chegoni's Portfolio — Simplified, Prioritized & Recruiter-Focused const { useState, useEffect, useRef, useMemo } = React; // Native SVG Icon Registry const SVG_ICONS = { ExternalLink: (p) => ( ), CheckCircle: (p) => ( ), ArrowLeft: (p) => ( ), ArrowUpRight: (p) => ( ), ChevronDown: (p) => ( ), ChevronUp: (p) => ( ), Menu: (p) => ( ), Github: (p) => ( ), Linkedin: (p) => ( ), GitFork: (p) => ( ), Mail: (p) => ( ), Code: (p) => ( ), Close: (p) => ( ), Search: (p) => ( ), FileText: (p) => ( ), Terminal: (p) => ( ), Cpu: (p) => ( ), Layers: (p) => ( ), Activity: (p) => ( ), Sparkles: (p) => ( ), Play: (p) => ( ) }; const Icon = ({ name, size = 18, className = "", style = {} }) => { const IconComponent = SVG_ICONS[name] || SVG_ICONS['Code']; return ; }; // Scroll Reveal with IntersectionObserver const ScrollReveal = ({ children, className = "" }) => { const ref = useRef(null); const [isVisible, setIsVisible] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true); observer.unobserve(el); } }, { threshold: 0.05, rootMargin: '0px 0px -30px 0px' } ); observer.observe(el); return () => observer.disconnect(); }, []); return (
{children}
); }; // Animated Number Counter const AnimatedCounter = ({ value, duration = 1200, className = "" }) => { const ref = useRef(null); const [displayValue, setDisplayValue] = useState(value); const hasAnimated = useRef(false); const parsed = useMemo(() => { if (typeof value !== 'string' && typeof value !== 'number') return null; const str = String(value).trim(); const match = str.match(/^([^0-9.]*)([0-9]+(?:\.[0-9]+)?)(.*)$/); if (!match) return null; const [, prefix, numStr, suffix] = match; const num = parseFloat(numStr); if (isNaN(num)) return null; const hasDecimal = numStr.includes('.'); const decimals = hasDecimal ? numStr.split('.')[1].length : 0; return { prefix, targetNum: num, decimals, suffix }; }, [value]); useEffect(() => { if (!parsed) return; const el = ref.current; if (!el) return; const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (prefersReduced) { setDisplayValue(value); return; } const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting && !hasAnimated.current) { hasAnimated.current = true; observer.unobserve(el); const startTime = performance.now(); const { prefix, targetNum, decimals, suffix } = parsed; const animate = (currentTime) => { const elapsed = currentTime - startTime; const progress = Math.min(1, elapsed / duration); const easeProgress = 1 - Math.pow(1 - progress, 3); const currentNum = easeProgress * targetNum; const formattedNum = decimals > 0 ? currentNum.toFixed(decimals) : Math.round(currentNum); setDisplayValue(`${prefix}${formattedNum}${suffix}`); if (progress < 1) { requestAnimationFrame(animate); } else { setDisplayValue(value); } }; requestAnimationFrame(animate); } }, { threshold: 0.15 } ); observer.observe(el); return () => observer.disconnect(); }, [parsed, value, duration]); if (!parsed) { return {value}; } return ( {hasAnimated.current ? displayValue : (displayValue || `${parsed.prefix}0${parsed.suffix}`)} ); }; // Desktop-Only Custom Cursor (Disabled on Touch / Coarse Pointers) const CustomCursor = () => { const [pos, setPos] = useState({ x: -100, y: -100 }); const [isVisible, setIsVisible] = useState(false); const [isFinePointer, setIsFinePointer] = useState(false); useEffect(() => { const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0; const hasFinePointer = window.matchMedia && window.matchMedia('(pointer: fine)').matches; if (isTouch || !hasFinePointer) { setIsFinePointer(false); return; } setIsFinePointer(true); const handleMouseMove = (e) => { setPos({ x: e.clientX, y: e.clientY }); if (!isVisible) setIsVisible(true); }; const handleMouseLeave = () => setIsVisible(false); window.addEventListener('mousemove', handleMouseMove, { passive: true }); document.addEventListener('mouseleave', handleMouseLeave); return () => { window.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseleave', handleMouseLeave); }; }, [isVisible]); if (!isFinePointer || !isVisible) return null; return (
); }; // Scroll Progress Bar at Top of Viewport const ScrollProgressBar = () => { const [progress, setProgress] = useState(0); useEffect(() => { const handleScroll = () => { const totalScroll = document.documentElement.scrollHeight - window.innerHeight; if (totalScroll > 0) { const currentProgress = (window.scrollY / totalScroll) * 100; setProgress(Math.min(100, Math.max(0, currentProgress))); } }; window.addEventListener('scroll', handleScroll, { passive: true }); return () => window.removeEventListener('scroll', handleScroll); }, []); return
; }; // 🎨 GIANT HIDDEN ARTWORK / PRINTED ART POSTER MARGINS: Massive cropped words spanning the viewport behind content const PosterArtworkMargins = () => { const [scrollY, setScrollY] = useState(0); const [isWideScreen, setIsWideScreen] = useState(false); const rafRef = useRef(null); const targetScrollRef = useRef(0); const currentScrollRef = useRef(0); // 5 Iconic Words Anchoring Key Sections Down the Page const posterAnchors = useMemo(() => [ { id: "think", left: "THI", right: "NK", full: "THINK", top: 280, parallaxFactor: 0.14 }, { id: "build", left: "BU", right: "ILD", full: "BUILD", top: 1650, parallaxFactor: 0.16 }, { id: "break", left: "BRE", right: "AK", full: "BREAK", top: 2950, parallaxFactor: 0.18 }, { id: "learn", left: "LEA", right: "RN", full: "LEARN", top: 4150, parallaxFactor: 0.15 }, { id: "ship", left: "SH", right: "IP", full: "SHIP", top: 5350, parallaxFactor: 0.16 }, { id: "repeat", left: "REP", right: "EAT", full: "REPEAT", top: 6250, parallaxFactor: 0.14 }, ], []); useEffect(() => { const checkWidth = () => { setIsWideScreen(window.innerWidth >= 1200); }; checkWidth(); const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const handleScroll = () => { targetScrollRef.current = window.scrollY || window.pageYOffset; }; let isRunning = true; const animateScroll = () => { if (!isRunning) return; if (!prefersReducedMotion) { currentScrollRef.current += (targetScrollRef.current - currentScrollRef.current) * 0.1; setScrollY(currentScrollRef.current); } else { setScrollY(targetScrollRef.current); } rafRef.current = requestAnimationFrame(animateScroll); }; window.addEventListener('resize', checkWidth, { passive: true }); window.addEventListener('scroll', handleScroll, { passive: true }); rafRef.current = requestAnimationFrame(animateScroll); return () => { isRunning = false; if (rafRef.current) cancelAnimationFrame(rafRef.current); window.removeEventListener('resize', checkWidth); window.removeEventListener('scroll', handleScroll); }; }, []); if (!isWideScreen) return null; return (