portfolio/pages/index.vue

30 lines
736 B
Vue
Raw Permalink Normal View History

2023-02-09 20:21:20 +01:00
<template>
2023-02-12 10:59:55 +01:00
<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" />
2023-02-09 20:21:20 +01:00
</div>
</template>
2023-02-12 10:59:55 +01:00
<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>