Controls turn into tapbar

src/components/Projects/Projects.tsx

@@ -1,13 +1,17 @@
+import { For } from 'solid-js';
 import { createViewportObserver } from '@solid-primitives/intersection-observer';
 
 import { useStore } from '../../store/index';
 import type { Store } from '../../store/index';
 import { scrollHereWhenSelected } from "../../utlis/scroll";
 import styles from './Projects.module.css';
+import projects from './projectList';
+import Project from './Project';
+import type { Project as ProjectType } from './projectList';
 
 export default () => {
   const [store, { setVisibleChapter }] = useStore() as Store;
-  const [observer] = createViewportObserver({threshold: 0.9});
+  const [observer] = createViewportObserver({threshold: 0.5});
 
   return (
     <div
@@ -19,6 +23,11 @@ export default () => {
       ref={(element) => scrollHereWhenSelected(element, store, 'projects')}
       class={styles.Projects}
     >
+      <For each={projects}>{(project: ProjectType) =>
+        <Project
+          project={project}
+        />
+      }</For>
       
     </div>
   )