allow swipe to scroll

.gitea/workflows/deploy.yml

@@ -19,8 +19,7 @@ jobs:
           docker stop website-server || true
           docker rm website-server || true
       - name: Wait for any monitoring services to recognize the stopped container
-        # sleep for 10 seconds to ensure the container is fully stopped
-        run: sleep 10
+        run: sleep 2
       - name: Run Docker container
         run: |
           docker run -d \

src/app/page.tsx

@@ -19,36 +19,65 @@ const slides = [
 ]
 
 export default function Home() {
-  const [current, setCurrent] = useState(0)
-
+  const [current, setCurrent] = useState(0);
+  const [touchStart, setTouchStart] = useState({ x: undefined, y: undefined } as { x: number | undefined, y: number | undefined });
+  const [touchEnd, setTouchEnd] = useState({ x: undefined, y: undefined } as { x: number | undefined, y: number | undefined });
 
   const nextSlide = useCallback(() => {
-    if (current < slides.length - 1) setCurrent(current + 1)
+    if (current < slides.length - 1) setCurrent(current + 1);
   }, [current])
 
   const prevSlide = useCallback(() => {
-    if (current > 0) setCurrent(current - 1)
+    if (current > 0) setCurrent(current - 1);
   }, [current])
 
+  const handleTouchStart = useCallback((e: TouchEvent) => {
+    const firstTouch = e.touches[0];
+    setTouchStart({ x: firstTouch.clientX, y: firstTouch.clientY });
+  }, []);
+
+  const handleTouchEnd = useCallback((e: TouchEvent) => {
+    if (!touchStart.x || !touchStart.y || !touchEnd.x || !touchEnd.y) return;
+
+    const xDiff = touchEnd.x - touchStart.x;
+    const yDiff = touchEnd.y - touchStart.y;
+
+    if (Math.abs(xDiff) < Math.abs(yDiff)) {
+      if (yDiff > 0) prevSlide(); // Swipe down
+      else nextSlide(); // Swipe up
+    }
+    
+    setTouchStart({ x: undefined, y: undefined });
+    setTouchEnd({ x: undefined, y: undefined });
+  }, [touchStart, touchEnd, prevSlide, nextSlide]);
+
+  const handleTouchMove = useCallback((e: TouchEvent) => {
+    setTouchEnd({ x: e.touches[0].clientX, y: e.touches[0].clientY });
+  }, []);
+
+
   useEffect(() => {
     const handleScroll = (e: WheelEvent) => {
-      if (e.deltaY > 0) nextSlide()
-      else prevSlide()
+      if (e.deltaY > 0) nextSlide();
+      else prevSlide();
     }
 
     const handleKey = (e: KeyboardEvent) => {
-      if (e.key === 'ArrowDown') nextSlide()
-      if (e.key === 'ArrowUp') prevSlide()
+      if (e.key === 'ArrowDown') nextSlide();
+      if (e.key === 'ArrowUp') prevSlide();
     }
 
-    window.addEventListener('wheel', handleScroll)
-    window.addEventListener('keydown', handleKey)
+    window.addEventListener('wheel', handleScroll);
+    window.addEventListener('keydown', handleKey);
+    window.addEventListener('touchstart', handleTouchStart);
+    window.addEventListener('touchend', handleTouchEnd);
+    window.addEventListener('touchmove', handleTouchMove);
 
     return () => {
-      window.removeEventListener('wheel', handleScroll)
+      window.removeEventListener('wheel', handleScroll);;
       window.removeEventListener('keydown', handleKey)
     }
-  }, [current, nextSlide, prevSlide])
+  }, [current, nextSlide, prevSlide, handleTouchStart, handleTouchEnd, handleTouchMove])
 
 
   return (
@@ -58,7 +87,7 @@ export default function Home() {
           {slide}
         </Slide>
       ))}
-      <div className={`absolute bottom-4 left-1/2 transform -translate-x-1/2 text-white ${current === slides.length - 1 ? 'hidden' : ''}`}>
+      <div className={`absolute bottom-4 left-1/2 transform -translate-y-8 -translate-x-1/2 text-white ${current === slides.length - 1 ? 'hidden' : ''}`}>
         <ChevronDoubleDownIcon className="w-12 h-12 animate-bounce cursor-pointer" onClick={nextSlide} />
       </div>
     </main>