import { useEffect, useRef, useMemo, useState } from "react"; import { motion } from "framer-motion"; import { Link } from "react-router-dom"; import { siteConfig } from "@/data/site-config"; import { Button } from "@/components/ui/button"; import { ButtonOutline } from "@/components/ui/button-outline"; import { useThree, Canvas, useFrame } from "@react-three/fiber"; import { OrbitControls, PerspectiveCamera, Text } from "@react-three/drei"; import * as THREE from "three"; // Enhanced particle field with glow and wave effects function ParticlesField({ count = 1800 }) { const mesh = useRef(null); const particlesMaterial = useRef(null); const particles = useMemo(() => { const temp = []; const sphereRadius = 3.0; // Create particles in a more interesting pattern - double sphere with connection trails for (let i = 0; i < count * 0.6; i++) { // Main sphere distribution const radius = sphereRadius * Math.pow(Math.random(), 0.5); // More concentration towards outer shell const theta = 2 * Math.PI * Math.random(); const phi = Math.acos(2 * Math.random() - 1); const x = radius * Math.sin(phi) * Math.cos(theta); const y = radius * Math.sin(phi) * Math.sin(theta); const z = radius * Math.cos(phi); temp.push({ x, y, z, size: 0.03 + Math.random() * 0.05 }); } // Create a secondary cluster for (let i = 0; i < count * 0.4; i++) { const smallRadius = 1.2; const theta = 2 * Math.PI * Math.random(); const phi = Math.acos(2 * Math.random() - 1); const x = smallRadius * Math.sin(phi) * Math.cos(theta); const y = smallRadius * Math.sin(phi) * Math.sin(theta) + 0.5; // Offset slightly const z = smallRadius * Math.cos(phi) - 1.0; // Position in front temp.push({ x, y, z, size: 0.02 + Math.random() * 0.04 }); } return temp; }, [count]); // Generate particle sizes const sizes = useMemo(() => { return new Float32Array(particles.map((p) => p.size)); }, [particles]); // Animation with time useFrame(({ clock }) => { if (mesh.current) { const t = clock.getElapsedTime(); // Complex rotation pattern mesh.current.rotation.x = Math.sin(t * 0.15) * 0.2; mesh.current.rotation.y = Math.cos(t * 0.1) * 0.3; mesh.current.rotation.z = Math.sin(t * 0.05) * 0.1; // Wave-like pulsation through the particles if (particlesMaterial.current) { // Animate color between indigo and purple const r = 0.31 + Math.sin(t * 0.5) * 0.05; const g = 0.27 + Math.sin(t * 0.5) * 0.05; const b = 0.9 + Math.sin(t * 0.5) * 0.1; particlesMaterial.current.color = new THREE.Color(r, g, b); // Animate size and opacity particlesMaterial.current.size = 0.05 * (1 + 0.2 * Math.sin(t * 0.8)); particlesMaterial.current.opacity = 0.7 + 0.3 * Math.sin(t * 0.5); } } }); return ( [p.x, p.y, p.z]))} itemSize={3} /> ); } // Simplified glowing orbs that float around function GlowingOrbs() { // Predefined positions and properties to avoid runtime errors with random values const orbConfigs = useMemo( () => [ { position: [2, 1, -1], scale: 0.15, speed: 0.3, phase: 0, color: "#6366f1", }, { position: [-2, -1, 1], scale: 0.2, speed: 0.5, phase: 2, color: "#818cf8", }, { position: [1, -2, 0], scale: 0.12, speed: 0.4, phase: 4, color: "#4f46e5", }, { position: [-1, 2, 1], scale: 0.18, speed: 0.25, phase: 1, color: "#a5b4fc", }, { position: [0, 1.5, -1.5], scale: 0.14, speed: 0.35, phase: 3, color: "#4338ca", }, ], [] ); return ( {orbConfigs.map((orb, i) => ( ))} ); } function Orb({ position, scale, speed, phase, color }) { const mesh = useRef(null); useFrame(({ clock }) => { const t = clock.getElapsedTime(); if (mesh.current) { // Simplified orbital motion mesh.current.position.x = position[0] + Math.sin(t * speed + phase) * 1.5; mesh.current.position.y = position[1] + Math.cos(t * speed + phase) * 1.5; // Pulse size const pulseFactor = 1 + 0.2 * Math.sin(t * 2 + phase); mesh.current.scale.set( scale * pulseFactor, scale * pulseFactor, scale * pulseFactor ); } }); return ( ); } // Simplified ring effect that's more reliable function GlowingRing() { const ringRef = useRef(null); const geometry = useMemo(() => { // Create a circular ring const curve = new THREE.EllipseCurve( 0, 0, // center 2.5, 2.5, // x radius, y radius 0, Math.PI * 2, // start angle, end angle false, // clockwise 0 // rotation ); // Get points from the curve const points = curve.getPoints(50); return new THREE.BufferGeometry().setFromPoints(points); }, []); useFrame(({ clock }) => { if (ringRef.current) { const t = clock.getElapsedTime(); // Simple rotation ringRef.current.rotation.x = Math.sin(t * 0.2) * 0.3; ringRef.current.rotation.y = Math.sin(t * 0.1) * 0.3; // Pulse scale const scale = 1 + 0.1 * Math.sin(t * 0.5); ringRef.current.scale.set(scale, scale, scale); } }); return ( ); } function HeroCanvas() { const { size, viewport } = useThree(); const aspect = size.width / viewport.width; return ( <> {/* Enhanced Particle System */} {/* Additional Visual Elements */} {/* Let's remove the Environment component as it might be causing issues */} ); } export default function HeroSection() { const canvasRef = useRef(); const [profileImage, setProfileImage] = useState( "20241226_190337.jpg" ); // Handle resize for canvas useEffect(() => { const handleResize = () => { if (canvasRef.current) { // Update canvas size if needed } }; window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); // Animation variants for content const contentVariants = { hidden: { opacity: 0, y: 20 }, visible: (custom) => ({ opacity: 1, y: 0, transition: { duration: 0.7, delay: custom * 0.2, ease: "easeOut", }, }), }; // Animation variants for the pulsing glow effect const glowVariants = { initial: { opacity: 0.7, scale: 1, }, animate: { opacity: [0.7, 0.9, 0.7], scale: [1, 1.05, 1], transition: { duration: 3, repeat: Infinity, repeatType: "reverse" as "reverse", ease: "easeInOut", }, }, }; // Animation for the circular image const imageVariants = { hidden: { opacity: 0, scale: 0.8, rotate: -15, }, visible: { opacity: 1, scale: 1, rotate: 0, transition: { type: "spring", stiffness: 100, damping: 15, delay: 0.5, }, }, hover: { scale: 1.05, rotate: 5, transition: { type: "spring", stiffness: 300, damping: 10, }, }, }; // Floating animations for the image const floatAnimation = { y: [0, -15, 0], transition: { duration: 4, repeat: Infinity, repeatType: "reverse", ease: "easeInOut", }, }; return (

{/* Enhanced Background Canvas with Depth Effect */}

Hi, I'm {siteConfig.name}

{siteConfig.title}

Download Resume

{/* Circular Profile Image with Enhanced Animations */}

{/* Multiple glowing rings */} {/* Main circular container */} {/* Rotating ring */} {/* Inner glowing border */}

{/* Profile Image */}

setProfileImage("/api/placeholder/300/300")} /> {/* Overlay shine effect */}

{/* Enhanced Scroll indicator */} Scroll down

{/* Glowing background effect */}

); } Fix this code