import React, { useRef, useEffect, useState } from 'react'; import { ProjectSceneComponent } from 'ProjectScene'; const projects = [ { id: 1, title: "Rosebud AI", description: "Advanced AI systems for interactive gaming and real-time experiences", tags: ["Machine Learning", "Real-time AI", "Neural Networks"] }, { id: 2, title: "Character Animation", description: "Rigged and animated game character with advanced motion systems", tags: ["Maya", "Motion Capture", "Rigging"] }, { id: 3, title: "Architectural Visualization", description: "Modern building with realistic materials and lighting", tags: ["3ds Max", "V-Ray", "Architecture"] }, { id: 4, title: "Interactive Design", description: "User-centered experiences with responsive 3D elements", tags: ["Three.js", "WebGL", "UX Design"] }, { id: 5, title: "Virtual Worlds", description: "Immersive environments for virtual reality experiences", tags: ["Unity", "VR", "World Building"] } ]; export const Portfolio = ({ currentSection, setCurrentSection }) => { const sectionsRef = useRef([]); const [isScrolling, setIsScrolling] = useState(false); const scrollTimeout = useRef(null); useEffect(() => { const handleWheel = (e) => { e.preventDefault(); if (isScrolling) return; if (e.deltaY > 0 && currentSection < projects.length - 1) { setIsScrolling(true); setCurrentSection(currentSection + 1); } else if (e.deltaY < 0 && currentSection > 0) { setIsScrolling(true); setCurrentSection(currentSection - 1); } }; window.addEventListener('wheel', handleWheel, { passive: false }); return () => window.removeEventListener('wheel', handleWheel); }, [currentSection, isScrolling, projects.length]); useEffect(() => { if (isScrolling) { sectionsRef.current[currentSection]?.scrollIntoView({ behavior: 'smooth' }); // Clear any existing timeout if (scrollTimeout.current) { clearTimeout(scrollTimeout.current); } // Set a new timeout to allow scrolling after animation scrollTimeout.current = setTimeout(() => { setIsScrolling(false); }, 1000); // Match this with your scroll animation duration } return () => { if (scrollTimeout.current) { clearTimeout(scrollTimeout.current); } }; }, [currentSection, isScrolling]); return (

{projects.map((project, index) => (

sectionsRef.current[index] = el} style={{ height: '100vh', scrollSnapAlign: 'start', display: 'flex', position: 'relative' }} >

{project.title}

{project.description}

{project.tags.map((tag, idx) => ( {tag} ))}

))}

); };