Aran Roig
9748de4286
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 34s
129 lines
2.6 KiB
Vue
129 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import HeaderLinks from './HeaderLinks.vue';
|
|
import SiteOptions from './site_options/SiteOptions.vue';
|
|
|
|
import { accent } from '~/composables/theme'
|
|
const spritePath = computed(() => {
|
|
return `/sprites/${accent.value}/${accent.value}.gif`
|
|
});
|
|
const hasAnimated = useState('title-animated', () => false)
|
|
|
|
const fullText = "ARANROIG.COM";
|
|
const displayedText = ref("");
|
|
|
|
let index = 0
|
|
let interval = null
|
|
|
|
onMounted(() => {
|
|
if (hasAnimated.value) {
|
|
displayedText.value = fullText
|
|
return
|
|
}
|
|
|
|
interval = setInterval(() => {
|
|
if (index < fullText.length) {
|
|
displayedText.value += fullText[index]
|
|
index++
|
|
} else {
|
|
clearInterval(interval)
|
|
hasAnimated.value = true;
|
|
}
|
|
}, 35) // velocidad de escritura
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
clearInterval(interval)
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="header">
|
|
<div class="header-container website">
|
|
<h1 class="title">{{ displayedText }}</h1>
|
|
<HeaderLinks></HeaderLinks>
|
|
</div>
|
|
<div class="undertable">
|
|
<Sprite :path="spritePath" bottom="-141px" left="-75px"></Sprite>
|
|
</div>
|
|
<div class="header-container">
|
|
<SiteOptions></SiteOptions>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.header {
|
|
position: relative;
|
|
margin-top: 30px;
|
|
user-select: none;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.header-container {
|
|
|
|
&.website {
|
|
z-index: 200;
|
|
@media screen and (max-width: 600px) {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.undertable {
|
|
position: relative;
|
|
left: -200px;
|
|
margin-top: 450px;
|
|
margin-left: -425px;
|
|
margin-bottom: 25px;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
|
|
@media screen and (max-width: 1200px) and (min-width: 900px) {
|
|
left: -50px;
|
|
bottom: 20px;
|
|
margin-top: 350px;
|
|
}
|
|
|
|
@media screen and (max-width: 900px) and (min-width: 600px) {
|
|
left: 70px;
|
|
bottom: 50px;
|
|
margin-top: 250px;
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
left: 150px;
|
|
bottom: 70px;
|
|
margin-top: 250px;
|
|
}
|
|
}
|
|
|
|
.web-links {
|
|
position: relative;
|
|
z-index: 200;
|
|
padding: 10px 20px;
|
|
margin-bottom: -10px;
|
|
left: -30px;
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
.title {
|
|
width: 300px;
|
|
}
|
|
|
|
.title::after {
|
|
content: "_";
|
|
animation: blink 3s infinite;
|
|
animation-timing-function: steps(1, end);
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 50%, 100% {
|
|
opacity: 1;
|
|
}
|
|
25%, 75% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style> |