Fix (Project Routing Issue)

Author: HxnDev

src/components/common/PageTransition.jsx

@@ -9,28 +9,40 @@ const PageTransition = ({ children }) => {
   const containerRef = useRef(null);
   const contentRef = useRef(null);
   const { reducedMotion } = useAnimationContext();
+  const previousScrollY = useRef(0);
+
+  // Save scroll position before transition
+  useEffect(() => {
+    previousScrollY.current = window.scrollY;
+  }, [location.pathname]);
 
   // Apply enter animation when the component mounts or location changes
   useEffect(() => {
     if (!containerRef.current || !contentRef.current) return;
 
     // Reset positions
     gsap.set(containerRef.current, { perspective: 1000 });
-    gsap.set(contentRef.current, { opacity: 0, y: 30 });
+    gsap.set(contentRef.current, { opacity: 0 });
 
     // Create timeline for entrance animation
     const timeline = gsap.timeline({
       defaults: {
         duration: reducedMotion ? 0.2 : 0.5,
         ease: 'power2.out',
       },
+      onComplete: () => {
+        // Restore scroll position if needed (for browser back button)
+        if (window.history.scrollRestoration === 'manual' && previousScrollY.current > 0) {
+          window.scrollTo(0, previousScrollY.current);
+        }
+      }
     });
 
     // Simple fade in for reduced motion, more complex animation otherwise
     if (reducedMotion) {
-      timeline.to(contentRef.current, { opacity: 1, y: 0 });
+      timeline.to(contentRef.current, { opacity: 1 });
     } else {
-      timeline.to(contentRef.current, { opacity: 1, y: 0 });
+      timeline.to(contentRef.current, { opacity: 1 });
 
       // Find and animate headings and elements with animate-in class if they exist
       const animateElements = contentRef.current.querySelectorAll('h1, h2, h3, .animate-in');
@@ -56,10 +68,10 @@ const PageTransition = ({ children }) => {
   }, [location.pathname, reducedMotion]);
 
   return (
-    <Box ref={containerRef} sx={{ width: '100%', minHeight: '80vh' }}>
+    <Box ref={containerRef} sx={{ width: '100%', minHeight: '80vh', position: 'relative' }}>
       <Box ref={contentRef}>{children}</Box>
     </Box>
   );
 };
 
-export default PageTransition;
+export default PageTransition;

src/components/projects/ProjectDetail.jsx

@@ -38,14 +38,15 @@ const ProjectDetail = ({ project, onBack }) => {
   // Animate entrance
   useEffect(() => {
     if (!containerRef.current || reducedMotion) return;
-
+  
     const elements = containerRef.current.querySelectorAll('.animate-in');
-
+    
     gsap.fromTo(
       elements,
-      { opacity: 0, y: 30 },
-      { opacity: 1, y: 0, stagger: 0.1, duration: 0.5, ease: 'power3.out' }
+      { opacity: 0 },
+      { opacity: 1, stagger: 0.1, duration: 0.5, ease: 'power3.out' }
     );
+    
   }, [project, reducedMotion]);
 
   if (!project) return null;

src/context/AnimationContext.jsx

@@ -52,8 +52,11 @@ export function AnimationProvider({ children }) {
     let lastScrollTop = window.pageYOffset;
     let lastScrollTime = performance.now();
     let frameId = null;
+    let scrolling = false;
 
     const updateScroll = () => {
+      if (!scrolling) return;
+      
       const currentScrollTop = window.pageYOffset;
       const currentTime = performance.now();
       const timeDelta = currentTime - lastScrollTime;
@@ -77,15 +80,21 @@ export function AnimationProvider({ children }) {
 
       lastScrollTop = currentScrollTop;
       lastScrollTime = currentTime;
+      
+      // Reset the frame ID and scrolling flag
+      frameId = null;
+      scrolling = false;
     };
 
     const handleScroll = () => {
-      // Use requestAnimationFrame for performance
-      if (frameId) {
-        cancelAnimationFrame(frameId);
+      // Mark that we're scrolling but don't do anything else to prevent
+      // interfering with the native scroll
+      scrolling = true;
+      
+      // Use requestAnimationFrame for performance, but only if we don't have one pending
+      if (!frameId) {
+        frameId = requestAnimationFrame(updateScroll);
       }
-
-      frameId = requestAnimationFrame(updateScroll);
     };
 
     // Initial call
@@ -145,4 +154,4 @@ export function AnimationProvider({ children }) {
 }
 
 // eslint-disable-next-line react-refresh/only-export-components
-export const useAnimationContext = () => useContext(AnimationContext);
+export const useAnimationContext = () => useContext(AnimationContext);

src/hooks/useProjectDetail.jsx

@@ -47,13 +47,7 @@ export const useProjectDetail = () => {
   const returnToGallery = () => {
     setViewMode('gallery');
 
-    // Delay clearing the selected project to allow for transition
-    setTimeout(() => {
-      setSelectedProject(null);
-    }, 300);
-
-    // Scroll to top when returning to gallery
-    window.scrollTo({ top: 0, behavior: 'smooth' });
+    setSelectedProject(null);
   };
 
   return {

src/pages/Projects.jsx

@@ -16,7 +16,7 @@ import ProjectDetail from '../components/projects/ProjectDetail';
 import ProjectModal from '../components/projects/ProjectModal';
 
 const Projects = () => {
-  const { _reducedMotion } = useAnimationContext();
+  const { reducedMotion } = useAnimationContext();
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const navigate = useNavigate();
@@ -56,7 +56,7 @@ const Projects = () => {
     (projectId, action = 'page') => {
       if (action === 'reset') {
         resetFilters();
-        navigate('/projects');
+        navigate('/projects', { replace: true });
         return;
       }
 
@@ -78,25 +78,38 @@ const Projects = () => {
     [navigate, location.search, resetFilters, openProjectModal, projectsData, viewProjectDetails]
   );
 
-  // Initialize project data and hooks
+  // Check for direct project link in URL or reset view mode
   useEffect(() => {
-    if (!projectsLoading) {
-      setIsLoading(false);
+    // If we're not on a specific project page, ensure we're in gallery mode
+    if (!location.search && viewMode !== 'gallery') {
+      returnToGallery();
     }
-
+    
     // Check for direct project link in URL
     const urlParams = new URLSearchParams(location.search);
     const projectId = urlParams.get('project');
+    
     if (projectId && projectsData && projectsData.length > 0) {
+      // If we have a project ID in the URL and data is loaded, show the project
       handleViewDetails(projectId);
     }
-  }, [projectsLoading, projectsData, location.search, handleViewDetails]);
+    
+    // Set loading state based on projects data
+    if (!projectsLoading) {
+      setIsLoading(false);
+    }
+  }, [projectsLoading, projectsData, location.search, handleViewDetails, viewMode, returnToGallery]);
 
-  // Handle back to gallery
+  // Handle back to gallery with proper state management
   const handleBackToGallery = () => {
-    // Update URL to remove project parameter
-    navigate('/projects');
+    // First reset state - this is important to do BEFORE navigation
     returnToGallery();
+    
+    // Then update URL (after state is reset)
+    // This prevents the temporary blank page
+    setTimeout(() => {
+      navigate('/projects', { replace: true });
+    }, 0);
   };
 
   return (
@@ -276,4 +289,4 @@ const Projects = () => {
   );
 };
 
-export default Projects;
+export default Projects;