portfolio/website/app.vue

<template>
  <div class="min-h-screen bg-dark-900 grid grid-cols-12">
    <MobileNav class="xl:hidden col-span-12" />
    <Sidebar class="col-span-2 hidden xl:flex" />
    <Content id="content" class="col-span-10 col-start-2 xl:col-span-8 xl: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',
  profileFirstName: 'Timo',
  profileGender: 'male',
  profileLastName: 'Boomers',
  profileUsername: 'Xeovalyte',
  author: 'Timo Boomers',
  creator: 'Timo Boomers'
})

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>