added a leftbar

components/layout/Leftbar.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="fixed hidden lg:block left-3 top-1/2 text-primary-500 space-y-1 z-50">
+    <div @click="scrollToElement('heading')" class="py-2 hover:cursor-pointer">
+      <div class="h-1 rounded-full bg-primary-500 transition-all duration-300 hover:cursor-pointer" :class="route.hash === '#heading' ? 'w-16' : 'w-8'" />
+    </div>
+    <div @click="scrollToElement('about')" class="py-2 hover:cursor-pointer">
+      <div class="h-1 rounded-full bg-primary-500 transition-all duration-300 hover:cursor-pointer" :class="route.hash === '#about' ? 'w-16' : 'w-8'" />
+    </div>
+    <div @click="scrollToElement('skills')" class="py-2 hover:cursor-pointer">
+      <div class="h-1 rounded-full bg-primary-500 transition-all duration-300 hover:cursor-pointer" :class="route.hash === '#skills' ? 'w-16' : 'w-8'" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute()
+</script>

components/slides/Heading.vue

@@ -7,7 +7,7 @@
     >
       <img
         v-animate="{ preset: 'slide-left', delay: 300 }"
-        src="../assets/icons/logo.svg"
+        src="../../assets/icons/logo.svg"
         alt="Logo Xeovalyte"
         width="150"
       />
@@ -31,6 +31,7 @@
       </div>
 
       <Icon
+        @click="scrollToElement('about')"
         size="2em"
         name="ph:arrow-fat-line-down"
         class="absolute bottom-20 basis-full animate-bounce hover:cursor-pointer"

composables/scrollToElement.js

@@ -0,0 +1,4 @@
+export default function (hash) {
+  const element = document.getElementById(hash)
+  element.scrollIntoView({ behavior: 'smooth' })
+}

pages/index.vue

@@ -1,9 +1,29 @@
 <template>
-  <div class="h-screen snap-y snap-mandatory overflow-y-auto overflow-x-hidden bg-dark-200">
-    <Heading />
-    <About />
-    <Skills />
+  <LayoutLeftbar />
+  <div id="observe" class="h-screen snap-y snap-mandatory overflow-y-auto overflow-x-hidden bg-dark-200">
+    <SlidesHeading id="heading" />
+    <SlidesAbout id="about" />
+    <SlidesSkills id="skills" />
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+const router = useRouter()
+
+const callback = (entries, observer) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      router.replace({ hash: '#' + entry.target.id})
+    }
+  })
+}
+
+onMounted(() => {
+  let targets = document.querySelectorAll('section')
+  const observer = new IntersectionObserver(callback, { root: document.querySelector('#observe'), threshold: 0.9 })
+
+  targets.forEach(target => {
+    observer.observe(target)
+  })
+})
+</script>