portfolio/components/slides/Heading.vue

45 lines
1.1 KiB
Vue
Raw Permalink Normal View History

2023-02-09 20:21:20 +01:00
<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 }"
2023-02-12 10:59:55 +01:00
src="../../assets/icons/logo.svg"
2023-02-09 20:21:20 +01:00
alt="Logo Xeovalyte"
width="150"
/>
<div class="space-y-2">
<h1
v-animate="{ preset: 'slide-up', delay: 450 }"
2023-02-11 18:22:23 +01:00
class="sm:text-7xl text-6xl font-bold"
2023-02-09 20:21:20 +01:00
>
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
2023-02-12 10:59:55 +01:00
@click="scrollToElement('about')"
2023-02-09 20:21:20 +01:00
size="2em"
name="ph:arrow-fat-line-down"
class="absolute bottom-20 basis-full animate-bounce hover:cursor-pointer"
/>
</div>
</section>
</template>
2023-04-02 17:41:30 +02:00
<script setup>
</script>