Fixed chapter selection on last chapter

src/components/Projects/Projects.tsx

@@ -10,17 +10,23 @@ import Project from './Project';
 import type { Project as ProjectType } from './projectList';
 
 export default () => {
-  const [store, { setVisibleChapter }] = useStore() as Store;
-  const [observer] = createViewportObserver({threshold: 0.5});
+  const [state, setters] = useStore() as Store;
+  const [observer] = createViewportObserver({threshold: 0.1});
+  const chapterName = 'projects'
 
   return (
     <div
       use:observer={(event) => {
         if (event.isIntersecting) {
-          setVisibleChapter('projects');
-        }}
-      }
-      ref={(element) => scrollHereWhenSelected(element, store, 'projects')}
+          console.log(chapterName);
+          if (!state.scrolling()) {
+            setters.setVisibleChapter(chapterName);
+          } else if (state.visibleChapter() === chapterName) {
+            setters.setScrolling(false)
+          }
+        }
+      }}
+      ref={(element) => scrollHereWhenSelected(element, [state, setters], chapterName)}
       class={styles.Projects}
     >
       <For each={projects}>{(project: ProjectType) =>