Controls track scroll

src/components/Controls.tsx

@@ -1,4 +1,5 @@
 import { For, createSignal } from 'solid-js';
+import { createEffect } from 'solid-js';
 
 import { useStore } from '../store/index';
 import styles from './Controls.module.css';
@@ -7,39 +8,46 @@ import gridIcon from '../assets/icons/grid.svg'
 
 export default () => {
   const [store] = useStore();
-  const [selected, setSelected] = createSignal(0);
-  const [blobby, setBlobby] = createSignal([0]);
+  const [selected, setSelected] = createSignal('home');
+  const [blobby, setBlobby] = createSignal(['home']);
   const controls = [
     { name: 'home', icon: homeIcon },
     { name: 'projects', icon: gridIcon },
     { name: 'whatever', icon: homeIcon },
   ]
 
+  const selectChapter = (chapterName: string) => {
+    if (chapterName !== selected()) {
+      setSelected(chapterName)
+      setBlobby(b => [chapterName, ...b])
+      setTimeout(() => {
+        setBlobby(b => [chapterName])
+      }, 500)
+    }
+  }
+
+  createEffect(() => {
+    selectChapter(store.visibleChapter());
+    return store.visibleChapter();
+  }, 'home');
+
   return (
     <>
       <div class={styles.Controls}>
         <div class={styles.gooWrapper}>
-          <For each={controls}>{(control, i) =>
+          <For each={controls}>{(control) =>
             <div 
               class={styles.blob}
               classList={{
-                [styles.selected]: blobby().includes(i())
+                [styles.selected]: blobby().includes(control.name)
               }}
             ></div>
           }</For>
         </div>
         <div class={styles.controlsWrapper}>
-          <For each={controls}>{(control, i) =>
+          <For each={controls}>{(control) =>
             <div 
-              onClick={() => {
-                if (i() !== selected()) {
-                  setSelected(i())
-                  setBlobby(b => [i(), ...b])
-                  setTimeout(() => {
-                    setBlobby(b => [i()])
-                  }, 500)
-                }
-              }}
+              onClick={() => selectChapter(control.name)}
               class={styles.control}
             >
               <img 

src/components/Hero.tsx

@@ -6,17 +6,16 @@ import styles from './Hero.module.css';
 
 export default () => {
   const [t] = useI18n();
-  const [add] = createViewportObserver();
+  const [observer] = createViewportObserver({threshold: 0.9});
   const [, { setVisibleChapter }] = useStore();
 
   return (
     <header 
-      ref={el => {
-        add(el, (event) => {
-          console.log(event.isIntersecting);
+      use:observer={(event) => { 
+        if (event.isIntersecting) {
           setVisibleChapter('home');
-        });
-      }}
+        }}
+      }
       class={styles.Hero}
     >
       <div>

src/components/Projects/Projects.module.css

@@ -1,4 +1,5 @@
 .Projects {
+  height: 101vh;
   padding: 32px;
   display: flex;
   justify-content: center;

src/components/Projects/Projects.tsx

@@ -5,16 +5,15 @@ import styles from './Projects.module.css';
 
 export default () => {
   const [, { setVisibleChapter }] = useStore();
-  const [add] = createViewportObserver();
+  const [observer] = createViewportObserver({threshold: 0.9});
 
   return (
     <div
-      ref={el => {
-        add(el, (event) => {
-          console.log(event.isIntersecting);
+      use:observer={(event) => {
+        if (event.isIntersecting) {
           setVisibleChapter('projects');
-        });
-      }}
+        }}
+      }
       class={styles.Projects}
     >