fix: improve upon coloring sections

src/components/landing-page.tsx

@@ -51,7 +51,7 @@ function NewSection({
   after?: ReactElement;
 }) {
   return (<section id={id} className="bg-background">
-    <div className="container mx-auto px-4 gap-6 flex flex-col">
+    <div className="container mx-auto px-4 gap-8 flex flex-col">
       {children}
       {after}
     </div>

src/hooks/color-sections.tsx

@@ -9,6 +9,13 @@ export const linksOrder: Array<Sections> = [
   "contact",
 ]
 
+/**
+ * Those links need to be reverted to account for the smallest section at the bottom.
+ * This way the intersection still pops the event at correct time, but now
+ * we account for 'contact' too!
+ */
+const reversedLinks = linksOrder.toReversed();
+
 export function useColorSections(parent: React.RefObject<HTMLDivElement | null>) {
   const previous = useRef<Sections>(linksOrder[0])
 
@@ -17,8 +24,8 @@ export function useColorSections(parent: React.RefObject<HTMLDivElement | null>)
 
     const options = {
       root: null,
-      rootMargin: "-10px",
-      threshold: 0.5, // Adjust the visibility threshold as needed
+      rootMargin: "80px 0px 0px 0px", // Top 60% of viewport should matter
+      threshold: 0.4, // Adjust the visibility threshold as needed
     };
 
 
@@ -33,15 +40,23 @@ export function useColorSections(parent: React.RefObject<HTMLDivElement | null>)
       return acc;
     }, {} as Record<Sections, HTMLAnchorElement>);
 
-    console.log(links)
 
     // Set of currently intersecting sections by ID.
     let intersecting: Set<string> = new Set;
 
+    function setCurrentUnderline(id: typeof linksOrder[number]) {
+      subs[previous.current]?.classList.remove('scale-x-100');
+      links[previous.current]?.classList.remove('text-primary');
+      previous.current = id;
+
+      subs[previous.current]?.classList.add('scale-x-100');
+      links[previous.current]?.classList.add('text-primary');
+    }
+
     const observer = new IntersectionObserver((entries) => {
       // Update intersection set based on diff.
-      let startedIntersecting: Set<string> = new Set;
-      let stoppedIntersecting: Set<string> = new Set;
+      const startedIntersecting: Set<string> = new Set;
+      const stoppedIntersecting: Set<string> = new Set;
       for (const entry of entries) {
         if (entry.isIntersecting) {
           startedIntersecting.add(entry.target.id);
@@ -51,19 +66,13 @@ export function useColorSections(parent: React.RefObject<HTMLDivElement | null>)
       }
       intersecting = intersecting.difference(stoppedIntersecting);
       intersecting = intersecting.union(startedIntersecting);
-      console.log(intersecting);
 
-      // Act upon intersection set to find the highest intersecting section -
+      // Act upon intersection set to find the lowest intersecting section -
       // that's our 'active' section.
-      for (const id of linksOrder) {
+      for (const id of reversedLinks) {
         if (intersecting.has(id)) {
-          console.log("best: " + id);
-          subs[previous.current]?.classList.remove('scale-x-100');
-          links[previous.current]?.classList.remove('text-primary');
-          previous.current = id;
-
-          subs[previous.current]?.classList.add('scale-x-100');
-          links[previous.current]?.classList.add('text-primary');
+          console.log("intersecting", id);
+          setCurrentUnderline(id);
           break;
         }
       }
@@ -80,4 +89,14 @@ export function useColorSections(parent: React.RefObject<HTMLDivElement | null>)
     };
   }, [parent]);
 
+  // Initialize the colors once
+  useLayoutEffect(() => {
+    const sub = document.querySelector('[data-sub="' + linksOrder[0] + '"]');
+    const link = document.querySelector('[href="#' + linksOrder[0] + '"]');
+    if (sub && link) {
+      sub.classList.add('scale-x-100');
+      link.classList.add('text-primary');
+    }
+  }, []);
+
 }