portfolio/website/app.vue
2023-11-28 16:15:51 +01:00

41 lines
1.0 KiB
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>