diff --git a/components/home/HomeHero.tsx b/components/home/HomeHero.tsx index 6018836..5f48220 100644 --- a/components/home/HomeHero.tsx +++ b/components/home/HomeHero.tsx @@ -101,6 +101,7 @@ export default function HomeHero() { backgroundPosition: 'center top', backgroundAttachment: 'scroll', zIndex: 2, + minHeight: '100vh', }} >
@@ -200,23 +201,113 @@ export default function HomeHero() {
+
+ Crow +
+ +
+ {/* --- MOBILE FOX --- */} +
+ Fox +
+ + {/* --- DESKTOP FOX --- */} +
+ Fox +
+
+ + {/* Deer Image (Ground Right) */} +
+ {/* --- MOBILE DEER --- */} +
+ Deer +
+ + {/* --- DESKTOP DEER --- */} +
+ Deer +
+
+ + {/* Poyo Image */}
-
+
Poyo
-
+
Poyo
@@ -248,24 +339,51 @@ export default function HomeHero() {
-
-
- Cliff -
-
- Cliff +
+
+
+ Cliff +
+
+ Cliff +
+ + {/* --- THE CAT (Desktop Only) --- */} +
+ Standing Cat +
@@ -293,7 +411,7 @@ export default function HomeHero() { }} /> Deer { console.log('Deer image loaded successfully'); }} + unoptimized />
diff --git a/components/home/HomeVideoStats.tsx b/components/home/HomeVideoStats.tsx index 7ec717a..e11dddd 100644 --- a/components/home/HomeVideoStats.tsx +++ b/components/home/HomeVideoStats.tsx @@ -21,7 +21,7 @@ export default function HomeVideoStats() { }} /> Gust { const { aboutRef } = useContext(SectionReferenceContext); const titleRef = useRef(null); // Reference for title animation const explanationRef = useRef(null); // Reference for explanation animation const containerRef = useRef(null); // Reference for entire container to observe + const [currentFrame, setCurrentFrame] = useState(0); + + // 2. useEffect to set up the animation loop + useEffect(() => { + // Set an interval to update the frame + const intervalId = setInterval(() => { + // Move to the next frame, looping back to 0 at the end + setCurrentFrame((prevFrame) => (prevFrame + 1) % foxFrames.length); + }, 200); // 100ms = 10 frames per second. Adjust this for speed. + + // 3. Cleanup function to stop the interval when the component is removed + return () => clearInterval(intervalId); + }, []); // The empty array [] ensures this effect runs only once + useEffect(() => { // Show content immediately without animations const titleText = titleRef.current; @@ -93,11 +121,17 @@ const HomeAboutText = () => {
{/* Fox image below the about text */} -
+
Fox
diff --git a/pages/_document.tsx b/pages/_document.tsx index f7d5799..6447163 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -7,10 +7,10 @@ export default function Document() { {/* Basic meta tags */} - + /> */} {/* SEO Meta Tags */}