portfolio/website/app.vue

<template>
  <div class="min-h-screen bg-dark-900 grid grid-cols-12">
    <Sidebar class="col-span-2" />
    <Content id="content" class="col-span-8 col-start-4" />
  </div>
</template>

<script setup>
const router = useRouter()

useSeoMeta({
  title: 'Timo Boomers / Xeovalyte',
  description: 'This is the portfolio of Timo Boomers, also known as Xeovalyte',
})

const callback = (entries)  => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      router.replace({ hash: '#' + entry.target.id})
    }
  })
}

onMounted(() => {
  const content = document.getElementById('content')

  const observer = new IntersectionObserver(callback, { root: document.querySelector('#observe'),threshold: 0.6 })

  Object.values(content.children).forEach(child => {
    observer.observe(child);
  })
})
</script>