Added state management

src/components/Controls.tsx

@@ -1,16 +1,18 @@
 import { For, createSignal } from 'solid-js';
 
+import { useStore } from '../store/index';
 import styles from './Controls.module.css';
 import homeIcon from '../assets/icons/home.svg'
 import gridIcon from '../assets/icons/grid.svg'
 
 export default () => {
+  const [store] = useStore();
   const [selected, setSelected] = createSignal(0);
   const [blobby, setBlobby] = createSignal([0]);
   const controls = [
-    { icon: homeIcon },
-    { icon: gridIcon },
-    { icon: homeIcon },
+    { name: 'home', icon: homeIcon },
+    { name: 'projects', icon: gridIcon },
+    { name: 'whatever', icon: homeIcon },
   ]
 
   return (

src/components/Hero.tsx

@@ -1,12 +1,24 @@
 import { useI18n } from "@solid-primitives/i18n";
+import { createViewportObserver } from '@solid-primitives/intersection-observer';
 
+import { useStore } from '../store/index';
 import styles from './Hero.module.css';
 
 export default () => {
   const [t] = useI18n();
+  const [add] = createViewportObserver();
+  const [, { setVisibleChapter }] = useStore();
 
   return (
-    <header class={styles.Hero}>
+    <header 
+      ref={el => {
+        add(el, (event) => {
+          console.log(event.isIntersecting);
+          setVisibleChapter('home');
+        });
+      }}
+      class={styles.Hero}
+    >
       <div>
         <h1 class={styles.gradientText}>
           {t('my_name')}

src/components/Projects/Projects.module.css

@@ -0,0 +1,7 @@
+.Projects {
+  padding: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}

src/components/Projects/Projects.tsx

@@ -1,8 +1,22 @@
+import { createViewportObserver } from '@solid-primitives/intersection-observer';
+
+import { useStore } from '../../store/index';
 import styles from './Projects.module.css';
 
 export default () => {
+  const [, { setVisibleChapter }] = useStore();
+  const [add] = createViewportObserver();
+
   return (
-    <div class={styles.Projects}>
+    <div 
+      ref={el => {
+        add(el, (event) => {
+          console.log(event.isIntersecting);
+          setVisibleChapter('projects');
+        });
+      }}
+      class={styles.Projects}
+    >
       
     </div>
   )