feat: ensure countdown clock disappears and resumes slideshow

Add onComplete callback to CountdownPieClock and handle completion state.

#VERCEL_SKIP

Co-authored-by: Darcy Liu <34801810+codejedi-ai@users.noreply.github.com>

Author: vercel[bot]

app/components/Hero.tsx

@@ -17,7 +17,7 @@ export function Hero() {
         <div className="text-center">
 
           <h2 className="text-4xl md:text-6xl font-bold text-white mb-4 glow-text">
-            Hello, my Name is
+            Hello, my name is
             <br />
             <span className="flex items-center justify-center gap-2 mt-2">
               Darcy <Heart className="text-primary-pink animate-pulse" size={32} /> Liu

app/components/WhoAmI.tsx

@@ -2,47 +2,132 @@
 
 import Image from "next/image"
 import { useState, useEffect, useRef, useCallback } from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-
-// Define the slides directly in the component to ensure they're loaded
-const slidesData = [
-  {
-    id: "about1",
-    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/about1.jpg-TbfdbEe1niYCAR6Fqv7JYcqm2zeKO9.jpeg",
-    alt: "Kayaking with a Star Wars Rebel Alliance cap",
-  },
-  {
-    id: "about2",
-    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/about2-X48rWZdpV4Q7RxVbbD5F7xRy5JhQdO.jpeg",
-    alt: "Sailing at the beach with life vest",
-  },
-  {
-    id: "about3",
-    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/about3-9AFwiFVEdtKGJqM9LmWvBQWHcfyyC2.jpeg",
-    alt: "Building a sand castle on the beach",
-  },
-  {
-    id: "about4",
-    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/about4-Vpsom9WTaJ93mBOvtKEjXoCSR1QzC5.jpeg",
-    alt: "Kayaking in a blue Hydro-Force inflatable kayak",
-  },
-]
+import { ChevronLeft, ChevronRight, Pause } from "lucide-react"
+
+interface SlideData {
+  id: string
+  src: string
+  alt: string
+}
+
+// Countdown Pie Clock Component
+function CountdownPieClock({ duration = 5000, onComplete }: { duration?: number; onComplete?: () => void }) {
+  const [progress, setProgress] = useState(100)
+  const startTimeRef = useRef(Date.now())
+  const animationFrameRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    startTimeRef.current = Date.now()
+
+    const updateProgress = () => {
+      const elapsed = Date.now() - startTimeRef.current
+      const remaining = Math.max(0, duration - elapsed)
+      const newProgress = (remaining / duration) * 100
+
+      setProgress(newProgress)
+
+      if (newProgress > 0) {
+        animationFrameRef.current = requestAnimationFrame(updateProgress)
+      } else {
+        // When countdown reaches zero, call the onComplete callback
+        if (onComplete) {
+          onComplete()
+        }
+      }
+    }
+
+    animationFrameRef.current = requestAnimationFrame(updateProgress)
+
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current)
+      }
+    }
+  }, [duration, onComplete])
+
+  // Calculate SVG parameters for the pie/circle
+  const size = 40
+  const strokeWidth = 4
+  const radius = (size - strokeWidth) / 2
+  const circumference = radius * 2 * Math.PI
+  const strokeDashoffset = circumference - (progress / 100) * circumference
+
+  return (
+    <div className="relative flex items-center justify-center">
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="transform -rotate-90">
+        {/* Background circle */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="transparent"
+          stroke="rgba(255,255,255,0.2)"
+          strokeWidth={strokeWidth}
+        />
+        {/* Progress circle */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="transparent"
+          stroke="rgba(0,210,255,0.8)"
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap="round"
+        />
+      </svg>
+      <div className="absolute inset-0 flex items-center justify-center">
+        <Pause className="h-4 w-4 text-white" />
+      </div>
+    </div>
+  )
+}
 
 export default function AboutMe() {
+  const [slidesData, setSlidesData] = useState<SlideData[]>([])
+  const [isLoadingSlides, setIsLoadingSlides] = useState(true)
+  const [slidesError, setSlidesError] = useState<string | null>(null)
   const [currentSlide, setCurrentSlide] = useState(0)
   const [isPaused, setIsPaused] = useState(false)
   const pauseTimerRef = useRef<NodeJS.Timeout | null>(null)
   const slideIntervalRef = useRef<NodeJS.Timeout | null>(null)
+  const pauseDuration = 5000 // 5 seconds pause duration
+
+  // Fetch slides data from API
+  useEffect(() => {
+    async function fetchAboutImages() {
+      try {
+        const response = await fetch("/api/about-images")
+
+        if (!response.ok) {
+          throw new Error("Failed to fetch about images")
+        }
+
+        const data = await response.json()
+        setSlidesData(data.aboutImages)
+      } catch (err) {
+        console.error("Error fetching about images:", err)
+        setSlidesError("Failed to load images. Please try again later.")
+      } finally {
+        setIsLoadingSlides(false)
+      }
+    }
+
+    fetchAboutImages()
+  }, [])
 
   // Function to advance to the next slide
   const nextSlide = useCallback(() => {
+    if (slidesData.length === 0) return
     setCurrentSlide((prev) => (prev + 1) % slidesData.length)
-  }, [])
+  }, [slidesData.length])
 
   // Function to go to the previous slide
   const prevSlide = useCallback(() => {
+    if (slidesData.length === 0) return
     setCurrentSlide((prev) => (prev - 1 + slidesData.length) % slidesData.length)
-  }, [])
+  }, [slidesData.length])
 
   // Function to handle user interaction
   const handleUserInteraction = useCallback((newSlideIndex?: number) => {
@@ -59,10 +144,10 @@ export default function AboutMe() {
       clearTimeout(pauseTimerRef.current)
     }
 
-    // Set a new pause timer to resume after 5 seconds
+    // Set a new pause timer to resume after the pause duration
     pauseTimerRef.current = setTimeout(() => {
       setIsPaused(false)
-    }, 5000)
+    }, pauseDuration)
   }, [])
 
   // Set up automatic slide cycling
@@ -72,8 +157,8 @@ export default function AboutMe() {
       clearInterval(slideIntervalRef.current)
     }
 
-    // Only set up interval if not paused
-    if (!isPaused) {
+    // Only set up interval if not paused and we have slides
+    if (!isPaused && slidesData.length > 0) {
       slideIntervalRef.current = setInterval(() => {
         nextSlide()
       }, 3000) // Change slide every 3 seconds
@@ -88,7 +173,7 @@ export default function AboutMe() {
         clearTimeout(pauseTimerRef.current)
       }
     }
-  }, [isPaused, nextSlide])
+  }, [isPaused, nextSlide, slidesData.length])
 
   const quote =
     '"Let each person examine his own work, and then he can take pride in himself alone, and not compare himself with someone else." -- Galatians 6:4'
@@ -97,7 +182,7 @@ export default function AboutMe() {
     <section id="about" className="py-20 text-white">
       <div className="container mx-auto px-4">
         {/* Header */}
-        <div className="flex items-center justify-between mb-16 p-8 from-gray-900 to-gray-800 rounded-lg shadow-2xl">
+        <div className="flex items-center justify-between mb-16 p-8 from-gray-900 to-gray-800 rounded-lg">
           <div className="max-w-2xl">
             <h2 className="text-5xl font-bold mb-4 text-white">I believe ...</h2>
             <p className="text-gray-300 italic text-lg">{quote}</p>
@@ -117,78 +202,113 @@ export default function AboutMe() {
           {/* Slideshow */}
           <div className="relative">
             <div className="aspect-w-16 aspect-h-9 relative h-[400px] group">
-              {/* Fade transition for images */}
-              {slidesData.map((slide, index) => (
-                <div
-                  key={slide.id}
-                  className={`absolute inset-0 transition-opacity duration-1000 ${
-                    currentSlide === index ? "opacity-100" : "opacity-0"
-                  }`}
-                >
-                  <Image
-                    src={slide.src || "/placeholder.svg"}
-                    alt={slide.alt}
-                    fill
-                    className="object-cover rounded-lg"
-                    priority={index === 0}
-                    sizes="(max-width: 768px) 100vw, 50vw"
-                  />
+              {isLoadingSlides ? (
+                <div className="absolute inset-0 flex items-center justify-center bg-gray-800 rounded-lg">
+                  <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary-cyan"></div>
+                </div>
+              ) : slidesError ? (
+                <div className="absolute inset-0 flex items-center justify-center bg-gray-800 rounded-lg">
+                  <p className="text-primary-pink">{slidesError}</p>
+                </div>
+              ) : slidesData.length === 0 ? (
+                <div className="absolute inset-0 flex items-center justify-center bg-gray-800 rounded-lg">
+                  <p className="text-gray-400">No images available</p>
                 </div>
-              ))}
+              ) : (
+                <>
+                  {/* Fade transition for images */}
+                  {slidesData.map((slide, index) => (
+                    <div
+                      key={slide.id}
+                      className={`absolute inset-0 transition-opacity duration-1000 ${
+                        currentSlide === index ? "opacity-100" : "opacity-0"
+                      }`}
+                    >
+                      <Image
+                        src={slide.src || "/placeholder.svg"}
+                        alt={slide.alt}
+                        fill
+                        className="object-cover rounded-lg"
+                        priority={index === 0}
+                        sizes="(max-width: 768px) 100vw, 50vw"
+                      />
+                    </div>
+                  ))}
 
-              {/* Pause indicator */}
-              {isPaused && (
-                <div className="absolute top-4 right-4 bg-black/50 text-white px-2 py-1 rounded text-sm">Paused</div>
-              )}
+                  {/* Countdown Pie Clock instead of "Paused" text */}
+                  {isPaused && (
+                    <div className="absolute top-4 right-4 bg-black/50 backdrop-blur-sm p-2 rounded-full shadow-lg">
+                      <CountdownPieClock
+                        duration={pauseDuration}
+                        onComplete={() => {
+                          // Ensure the slideshow resumes when the countdown completes
+                          if (pauseTimerRef.current) {
+                            clearTimeout(pauseTimerRef.current)
+                            pauseTimerRef.current = null
+                          }
+                          setIsPaused(false)
+                        }}
+                      />
+                    </div>
+                  )}
 
-              {/* Hover overlay with additional info */}
-              <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
-                <div className="p-4 w-full">
-                  <p className="text-white text-lg font-medium">{slidesData[currentSlide].alt}</p>
-                </div>
-              </div>
+                  {/* Hover overlay with additional info */}
+                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
+                    <div className="p-4 w-full">
+                      <p className="text-white text-lg font-medium">
+                        {slidesData[currentSlide]?.alt || "Image description"}
+                      </p>
+                    </div>
+                  </div>
+                </>
+              )}
             </div>
 
-            {/* Navigation buttons with enhanced styling */}
-            <button
-              onClick={() => {
-                prevSlide()
-                handleUserInteraction()
-              }}
-              className="absolute left-2 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 p-3 rounded-full text-white transition-all duration-300 transform hover:scale-110"
-              aria-label="Previous slide"
-            >
-              <ChevronLeft className="h-6 w-6" />
-            </button>
-            <button
-              onClick={() => {
-                nextSlide()
-                handleUserInteraction()
-              }}
-              className="absolute right-2 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 p-3 rounded-full text-white transition-all duration-300 transform hover:scale-110"
-              aria-label="Next slide"
-            >
-              <ChevronRight className="h-6 w-6" />
-            </button>
-
-            {/* Enhanced indicator dots */}
-            <div className="flex justify-center space-x-3 mt-6">
-              {slidesData.map((_, index) => (
+            {/* Only show navigation controls if we have slides */}
+            {!isLoadingSlides && !slidesError && slidesData.length > 0 && (
+              <>
+                {/* Navigation buttons with enhanced styling */}
                 <button
-                  key={index}
-                  onClick={() => handleUserInteraction(index)}
-                  className={`w-4 h-4 rounded-full transition-all duration-300 ${
-                    currentSlide === index ? "bg-blue-500 scale-110" : "bg-gray-400 hover:bg-gray-300"
-                  }`}
-                  aria-label={`Go to slide ${index + 1}`}
-                />
-              ))}
-            </div>
+                  onClick={() => {
+                    prevSlide()
+                    handleUserInteraction()
+                  }}
+                  className="absolute left-2 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 p-3 rounded-full text-white transition-all duration-300 transform hover:scale-110"
+                  aria-label="Previous slide"
+                >
+                  <ChevronLeft className="h-6 w-6" />
+                </button>
+                <button
+                  onClick={() => {
+                    nextSlide()
+                    handleUserInteraction()
+                  }}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 p-3 rounded-full text-white transition-all duration-300 transform hover:scale-110"
+                  aria-label="Next slide"
+                >
+                  <ChevronRight className="h-6 w-6" />
+                </button>
 
-            {/* Slide counter */}
-            <div className="absolute bottom-4 right-4 bg-black/50 text-white px-2 py-1 rounded text-sm">
-              {currentSlide + 1} / {slidesData.length}
-            </div>
+                {/* Enhanced indicator dots */}
+                <div className="flex justify-center space-x-3 mt-6">
+                  {slidesData.map((_, index) => (
+                    <button
+                      key={index}
+                      onClick={() => handleUserInteraction(index)}
+                      className={`w-4 h-4 rounded-full transition-all duration-300 ${
+                        currentSlide === index ? "bg-blue-500 scale-110" : "bg-gray-400 hover:bg-gray-300"
+                      }`}
+                      aria-label={`Go to slide ${index + 1}`}
+                    />
+                  ))}
+                </div>
+
+                {/* Slide counter */}
+                <div className="absolute bottom-4 right-4 bg-black/50 text-white px-2 py-1 rounded text-sm">
+                  {currentSlide + 1} / {slidesData.length}
+                </div>
+              </>
+            )}
           </div>
 
           {/* Info */}