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