Overhaul of About Page

src/app/about/page.js

@@ -1,90 +1,107 @@
-"use client";
+"use client"
-
+import {useRef, useState, useEffect} from "react";
-import { useRef, useState, useEffect } from "react";
 
 export default function About() {
-  // Timeline data
     const timelineData = [
         {
             date: "2018",
             title: "First Contact with Coding",
-      content:
+            content: "I discovered my passion for technology by experimenting with Scratch and creating some simple Games."
-        "I discovered my passion for technology by experimenting with Scratch and creating some simple Games.",
-    },
-    {
-      date: "2020",
-      title: "Exploring Web & Scripting",
-      content:
-        "Started creating small websites and got into JavaScript, CSS, and working with various scripting languages.",
         },
         {
             date: "2022",
-      title: "Diving into Game Development",
+            title: "Exploring Web Development",
-      content:
+            content: "Started creating my first website and got into HTML and CSS."
-        "Tried Unity and C#, building small 2D and 3D prototypes to expand my skill set.",
+        },
+        {
+            date: "2023",
+            title: "Diving into Informatics",
+            content: "Started with Python and basic exploration of 'real' programming."
         },
         {
             date: "2024",
             title: "Full Stack & Beyond",
-      content:
+            content: "Ventured into backend (SQL, Python) and frontend using Javascript"
-        "Ventured into backend (SQL, Python) and continued refining my frontend abilities, always exploring new challenges.",
+        }
-    },
     ];
 
-  // Disable lint for calling hooks in a loop
-  // eslint-disable-next-line react-hooks/rules-of-hooks
     const sectionRefs = timelineData.map(() => useRef(null));
-
+    const aboutMeRef = useRef(null);
     const [currentSection, setCurrentSection] = useState(0);
-
-  // Keep track if the user has reached the last section in the timeline
     const [timelineFinished, setTimelineFinished] = useState(false);
+    const [isManualScroll, setIsManualScroll] = useState(false); // Track user scrolling
+    const scrollContainerRef = useRef(null);
 
-  // Keyboard navigation (left / right arrow keys)
     useEffect(() => {
-    const handleKeyDown = (e) => {
+        setCurrentSection(0); // Reset timeline
-      if (e.key === "ArrowRight") {
+        setTimelineFinished(false);
-        setCurrentSection((prev) => Math.min(prev + 1, timelineData.length - 1));
-      } else if (e.key === "ArrowLeft") {
-        setCurrentSection((prev) => Math.max(prev - 1, 0));
-      }
-    };
 
-    window.addEventListener("keydown", handleKeyDown);
+        // Ensure 'About Me' is visible on reload
-    return () => {
+        setTimeout(() => {
-      window.removeEventListener("keydown", handleKeyDown);
+            aboutMeRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
-    };
+        }, 100);
-  }, [timelineData.length]);
+    }, []);
 
-  // Scroll the timeline horizontally to the currently selected section
+    // Handle button navigation
-  useEffect(() => {
+    const handleButtonClick = (direction) => {
-    sectionRefs[currentSection].current?.scrollIntoView({
+        setIsManualScroll(false); // Ensure programmatic scrolling happens
-      behavior: "smooth",
+        setCurrentSection((prev) => {
-      inline: "start",
+            const newSection = Math.max(0, Math.min(prev + direction, timelineData.length - 1));
-    });
+            if (newSection === timelineData.length - 1) {
-
-    // If we are on the last section, mark timeline as finished
-    if (currentSection === timelineData.length - 1) {
                 setTimelineFinished(true);
             }
-  }, [currentSection, sectionRefs]);
+            return newSection;
-
+        });
-  // Navigate left or right with on-screen buttons
-  const goLeft = () => {
-    setCurrentSection((prev) => Math.max(prev - 1, 0));
     };
 
-  const goRight = () => {
+    // Scroll to current section (only if not manually scrolling)
-    setCurrentSection((prev) => Math.min(prev + 1, timelineData.length - 1));
+    useEffect(() => {
+        if (!isManualScroll) {
+            sectionRefs[currentSection]?.current?.scrollIntoView({behavior: "smooth", inline: "start"});
+        }
+    }, [currentSection, isManualScroll]);
+    useEffect(() => {
+        const handleScroll = () => {
+            setIsManualScroll(true);
         };
 
+        const scrollContainer = scrollContainerRef.current;
+        if (scrollContainer) {
+            scrollContainer.addEventListener("scroll", handleScroll);
+        }
+
+        return () => {
+            if (scrollContainer) {
+                scrollContainer.removeEventListener("scroll", handleScroll);
+            }
+        };
+    }, []);
+
+    // Intersection Observer to detect when last section is fully visible
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting && entry.target === sectionRefs[timelineData.length - 1].current) {
+                        setTimelineFinished(true);
+                    }
+                });
+            },
+            {threshold: 0.8} // Increased threshold to ensure full visibility before triggering
+        );
+
+        sectionRefs.forEach((ref) => {
+            if (ref.current) observer.observe(ref.current);
+        });
+
+        return () => observer.disconnect();
+    }, [sectionRefs]);
+
     return (
-    <div style={{ width: "100%", overflowX: "hidden" }}>
+        <div style={{width: "100%", overflowX: "hidden"}}>
-
+            {/* About Me Section */}
-      {/* ─────────────────────────────
-          1) Intro / Top Section
-      ────────────────────────────── */}
             <section
+                ref={aboutMeRef}
                 style={{
                     minHeight: "100vh",
                     display: "flex",
@@ -95,27 +112,18 @@ export default function About() {
                     boxSizing: "border-box",
                 }}
             >
-        <h1 style={{ fontSize: "2.5rem", marginBottom: "1rem" }}>About Me</h1>
+                <h1 style={{fontSize: "2.5rem", marginBottom: "1rem"}}>About Me</h1>
-        <p style={{ maxWidth: "600px", textAlign: "center" }}>
+                <p style={{maxWidth: "600px", textAlign: "center"}}>
                     I’m a passionate developer always excited about new challenges.
                     Scroll down to check out my coding journey through the years!
                 </p>
             </section>
 
-      {/* ─────────────────────────────
+            {/* Timeline Section */}
-          2) Timeline Section
+            <section style={{position: "relative", height: "100vh", overflowY: "hidden"}}>
-      ────────────────────────────── */}
-      <section
-        style={{
-          position: "relative",
-          height: "100vh",
-          overflowY: "hidden", // Prevent vertical scroll here
-        }}
-      >
-        {/* Only show the left button if we're not on the first section */}
                 {currentSection > 0 && (
                     <button
-            onClick={goLeft}
+                        onClick={() => handleButtonClick(-1)}
                         style={{
                             position: "absolute",
                             top: "50%",
@@ -133,11 +141,9 @@ export default function About() {
                         &larr;
                     </button>
                 )}
-
-        {/* Only show the right button if we're not on the last section */}
                 {currentSection < timelineData.length - 1 && (
                     <button
-            onClick={goRight}
+                        onClick={() => handleButtonClick(1)}
                         style={{
                             position: "absolute",
                             top: "50%",
@@ -155,9 +161,8 @@ export default function About() {
                         &rarr;
                     </button>
                 )}
-
-        {/* Horizontal scroll area */}
                 <div
+                    ref={scrollContainerRef}
                     style={{
                         display: "flex",
                         overflowX: "auto",
@@ -182,20 +187,14 @@ export default function About() {
                                 boxSizing: "border-box",
                             }}
                         >
-              <h2 style={{ marginBottom: "1rem" }}>{item.title}</h2>
+                            <h2 style={{marginBottom: "1rem"}}>{item.title}</h2>
-              <h3 style={{ marginBottom: "1rem" }}>{item.date}</h3>
+                            <h3 style={{marginBottom: "1rem"}}>{item.date}</h3>
-              <p style={{ maxWidth: "600px", textAlign: "center" }}>
+                            <p style={{maxWidth: "600px", textAlign: "center"}}>{item.content}</p>
-                {item.content}
-              </p>
                         </section>
                     ))}
                 </div>
             </section>
 
-      {/* ─────────────────────────────
-          3) Skills Section
-          Only visible if timelineFinished
-      ────────────────────────────── */}
             {timelineFinished && (
                 <section
                     style={{
@@ -208,8 +207,8 @@ export default function About() {
                         boxSizing: "border-box",
                     }}
                 >
-          <h2 style={{ fontSize: "2rem", marginBottom: "1rem" }}>My Skills</h2>
+                    <h2 style={{fontSize: "2rem", marginBottom: "1rem"}}>My Skills</h2>
-          <p style={{ maxWidth: "600px", textAlign: "center" }}>
+                    <p style={{maxWidth: "600px", textAlign: "center"}}>
                         By completing projects in web development, scripting, and game
                         design, I’ve cultivated a diverse set of skills — spanning
                         JavaScript, Python, C#, and more!