components/About.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="flex h-screen snap-center items-center justify-center">
     <div
-      class="my-40 mx-3 flex w-full max-w-xl flex-wrap items-center justify-center gap-5 whitespace-pre-wrap text-lg text-primary-500"
+      class="my-40 flex w-full max-w-xl flex-wrap items-center justify-center gap-5 whitespace-pre-wrap text-lg text-primary-500"
     >
       <h2
         v-animate="{ preset: 'slide-right', duration: 500 }"

components/Heading.vue

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

components/layout/Leftbar.vue

@@ -1,17 +0,0 @@
-<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>

composables/scrollToElement.js

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

pages/index.vue

@@ -1,29 +1,9 @@
 <template>
-  <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 class="h-screen snap-y snap-mandatory overflow-y-auto bg-dark-200">
+    <Heading />
+    <About />
+    <Skills />
   </div>
 </template>
 
-<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>
+<script setup></script>