Added state management

src/assets/icons/grid-fill.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-grid-3x3-gap-fill" viewBox="0 0 16 16">
-  <path d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2z"/>
-</svg>

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>
   )

src/index.tsx

@@ -3,15 +3,18 @@ import { render } from 'solid-js/web';
 
 import { I18nContext } from "@solid-primitives/i18n";
 
+import { StoreProvider } from "./store/index";
 import './index.css';
 import App from './App';
 import localization from './localization';
 
 render(
   () => (
+    <StoreProvider>
     <I18nContext.Provider value={localization}>
       <App />
     </I18nContext.Provider>
+    </StoreProvider>
   ), 
   document.getElementById('root') as HTMLElement
 );

src/localization/en.json

@@ -1,4 +1,4 @@
 {
-  "my_name": "rerererere",
+  "my_name": "Anatoly Kopyl",
   "tagline": "Professional fullstack developer with standards"
 }

src/store/index.tsx

@@ -0,0 +1,31 @@
+import { createSignal, createContext, useContext } from "solid-js";
+import type { Accessor, Setter } from 'solid-js';
+
+type Store = [
+  { visibleChapter: Accessor<string> }, 
+  { setVisibleChapter: Setter<string> }
+]
+
+const StoreContext = createContext<Store>();
+
+export function StoreProvider(props) {
+  const [visibleChapter, setVisibleChapter] = createSignal('home');
+  const store: Store = [
+    {
+      visibleChapter
+    },
+    {
+      setVisibleChapter
+    }
+  ];
+
+  return (
+    <StoreContext.Provider value={store}>
+      {props.children}
+    </StoreContext.Provider>
+  );
+}
+
+export function useStore() { 
+  return useContext(StoreContext); 
+}