diff --git a/src/components/AchievementCard.jsx b/src/components/AchievementCard.jsx index 89f1b77..bcea277 100644 --- a/src/components/AchievementCard.jsx +++ b/src/components/AchievementCard.jsx @@ -6,6 +6,16 @@ const AchievementCard = ({ title, description, year, isLeft, index }) => { const [isHovered, setIsHovered] = useState(false); useEffect(() => { + // Check if it's mobile + const isMobile = window.innerWidth < 768; + + if (isMobile) { + // On mobile, make cards visible immediately without animations + setIsVisible(true); + return; + } + + // Desktop animations const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index d0f3425..33fa643 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -11,7 +11,19 @@ const Timeline = () => { const [scrollProgress, setScrollProgress] = useState(0); useEffect(() => { - // Scroll progress for timeline line animation + // Check if it's mobile + const isMobile = window.innerWidth < 768; + + if (isMobile) { + // On mobile, make everything visible immediately without animations + const allIndices = achievementsData.map((_, index) => index); + setVisibleDots(new Set(allIndices)); + setVisibleLines(new Set(allIndices)); + setScrollProgress(1); + return; // Exit early for mobile + } + + // Desktop scroll animations const handleScroll = () => { if (containerRef.current) { const container = containerRef.current; @@ -47,11 +59,11 @@ const Timeline = () => { entry.target.getAttribute("data-timeline-index") || "0", ); - // Add staggered effect + // Add minimal staggered effect setTimeout(() => { setVisibleDots((prev) => new Set([...prev, index])); setVisibleLines((prev) => new Set([...prev, index])); - }, index * 200); + }, index * 50); } }); }, @@ -147,6 +159,9 @@ const Timeline = () => { }} /> + {/* Mobile Timeline Line - Continuous */} +
+ {/* Timeline Items */}
{achievementsData @@ -218,7 +233,7 @@ const Timeline = () => { {/* Year Badge */}
{ {/* Mobile Layout */}
- {/* Mobile Timeline Line */} -
-
- - {/* Mobile Dot */} -
-
+ {/* Mobile Dot - Static, no animation */} +
+
{/* Mobile Card */}