Bugfixes

src/app/about/page.js

@@ -82,9 +82,11 @@ export default function About() {
         setCurrentSection(0);
         setTimelineFinished(false);
         setTimeout(() => {
+            sectionRefs.current[0]?.scrollIntoView({behavior: "auto", inline: "start"});
             window.scrollTo({top: 0, behavior: "smooth"});
         }, 100);
     }, []);
+
     useEffect(() => {
         let scrollListener;
 
@@ -105,13 +107,18 @@ export default function About() {
             }
         };
     }, [timelineFinished]);
+    const [isNavigating, setIsNavigating] = useState(false);
     const handleButtonClick = (direction) => {
+        if (isNavigating) return;
+        setIsNavigating(true);
         setCurrentSection((prev) => {
             const newSection = Math.max(0, Math.min(prev + direction, timelineData.length - 1));
-            setTimelineFinished(newSection === timelineData.length - 1);
             sectionRefs.current[newSection]?.scrollIntoView({behavior: "smooth", inline: "start"});
             return newSection;
         });
+        setTimeout(() => {
+            setIsNavigating(false);
+        }, 600);
     };
     useEffect(() => {
         const observer = new IntersectionObserver(
@@ -121,13 +128,10 @@ export default function About() {
                     if (entry.isIntersecting && index !== -1) {
                         setCurrentSection(index);
                     }
-                    if (
-                        entry.isIntersecting &&
-                        index === timelineData.length - 1 &&
-                        entry.intersectionRatio >= 0.8
-                    ) {
+                    if (entry.isIntersecting && index === timelineData.length - 1) {
                         setTimelineFinished(true);
                     }
+
                 });
             },
             {threshold: 0.6}
@@ -137,6 +141,9 @@ export default function About() {
         });
         return () => observer.disconnect();
     }, [timelineData.length]);
+    useEffect(() => {
+        setTimelineFinished(currentSection === timelineData.length - 1);
+    }, [currentSection, timelineData.length]);
     return (
         // Ändern Sie den äußeren Container-Style
         <div style={{

src/app/globals.css

@@ -235,11 +235,13 @@ body {
 
 .projectCard {
     max-width: 800px;
+    width: 100%;
     padding: 2rem;
     border-radius: 10px;
     border: 2px solid #3d003d;
     background-color: rgba(20, 0, 20, 0.4);
     transition: opacity 0.3s ease;
+    box-sizing: border-box;
 }
 
 .projectImage {
@@ -247,6 +249,9 @@ body {
     margin: 1.5rem 0;
     border: 4px solid #3d003d;
     animation: pulseBorder 1.5s infinite alternate ease-in-out;
+    max-width: 100%;
+    height: auto;
+    object-fit: contain;
 }
 
 .projectNavigation {
@@ -480,3 +485,39 @@ main {
     }
 }
 
+
+@media (max-width: 768px) {
+    .projectCard {
+        padding: 1.5rem 1rem;
+    }
+
+    .projectImage {
+        width: 100%;
+        height: auto;
+    }
+
+    .projectTitle {
+        font-size: 1.5rem;
+    }
+
+    .projectDescription {
+        font-size: 1rem;
+    }
+
+    .learnMoreButton {
+        font-size: 1rem;
+        padding: 0.75rem 1.5rem;
+    }
+
+    .arrowButton {
+        padding: 0.5rem 1rem;
+        font-size: 1.25rem;
+    }
+
+    .projectNavigation {
+        flex-direction: row;
+        gap: 1rem;
+        justify-content: center;
+        margin-top: 1.5rem;
+    }
+}

src/app/page.js

@@ -16,11 +16,9 @@ export default function Home() {
             fadeTimeout = setTimeout(() => {
                 setTitle(prev => prev === "Fretux" ? "Frederik Spirgi" : "Fretux");
                 setPhase("fadeIn");
-
                 fadeTimeout = setTimeout(() => setPhase("normal"), 500);
             }, 500);
         }, 3000);
-
         return () => {
             clearInterval(interval);
             clearTimeout(fadeTimeout);