portfolio/components/slides/Heading.vue
Xeovalyte d6e81e47f4
Some checks failed
Build
Deploy
migrated actions
2023-04-02 17:41:30 +02:00

45 lines
1.1 KiB
Vue

<template>
<section
class="relative flex h-screen snap-center items-center justify-center"
>
<div
class="flex flex-wrap items-center justify-center gap-5 text-center text-primary-500"
>
<img
v-animate="{ preset: 'slide-left', delay: 300 }"
src="../../assets/icons/logo.svg"
alt="Logo Xeovalyte"
width="150"
/>
<div class="space-y-2">
<h1
v-animate="{ preset: 'slide-up', delay: 450 }"
class="sm:text-7xl text-6xl font-bold"
>
Xeovalyte
</h1>
<div
v-animate="{ preset: 'slide-right', delay: 600 }"
class="h-1 w-full rounded-full bg-primary-500"
/>
<h3
v-animate="{ preset: 'slide-down', delay: 750 }"
class="text-4xl font-bold"
>
Timo Boomers
</h3>
</div>
<Icon
@click="scrollToElement('about')"
size="2em"
name="ph:arrow-fat-line-down"
class="absolute bottom-20 basis-full animate-bounce hover:cursor-pointer"
/>
</div>
</section>
</template>
<script setup>
</script>