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-8 flex flex-col">
+    <div className="container mx-auto px-4 gap-6 flex flex-col">
       {children}
       {after}
     </div>

src/globals.css

@@ -156,6 +156,11 @@
   z-index: 10000;
 }
 
+/* Allow to scroll past the last section, needed for fragment-directed navigation. */
+section#contact {
+  min-height: 100vh;
+}
+
 /* Fix scrolling to section by fragment, making sure it shows in the right spot and not behind the navbar. */
 section {
   scroll-margin-top: calc(var(--spacing) * 16 + var(--spacing) * 4);

src/hooks/color-sections.tsx

@@ -9,13 +9,6 @@ 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])
 
@@ -24,8 +17,8 @@ export function useColorSections(parent: React.RefObject<HTMLDivElement | null>)
 
     const options = {
       root: null,
-      rootMargin: "80px 0px 0px 0px", // Top 60% of viewport should matter
-      threshold: 0.4, // Adjust the visibility threshold as needed
+      rootMargin: "-10px",
+      threshold: 0.5, // Adjust the visibility threshold as needed
     };
 
 
@@ -40,23 +33,15 @@ 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.
-      const startedIntersecting: Set<string> = new Set;
-      const stoppedIntersecting: Set<string> = new Set;
+      let startedIntersecting: Set<string> = new Set;
+      let stoppedIntersecting: Set<string> = new Set;
       for (const entry of entries) {
         if (entry.isIntersecting) {
           startedIntersecting.add(entry.target.id);
@@ -66,13 +51,19 @@ 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 lowest intersecting section -
+      // Act upon intersection set to find the highest intersecting section -
       // that's our 'active' section.
-      for (const id of reversedLinks) {
+      for (const id of linksOrder) {
         if (intersecting.has(id)) {
-          console.log("intersecting", id);
-          setCurrentUnderline(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');
           break;
         }
       }
@@ -89,14 +80,4 @@ 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');
-    }
-  }, []);
-
 }