121 lines
2.8 KiB
Vue
121 lines
2.8 KiB
Vue
<template>
|
|
|
|
<h1 class="hero-title">
|
|
<Transition name="fade-in-from-bottom">
|
|
<span class="hero-title__name" v-show="isVisible">Paul Nicoué</span>
|
|
</Transition>
|
|
<Transition name="expand-width">
|
|
<span class="hero-title__divider" aria-hidden="true" v-show="isVisible"></span>
|
|
</Transition>
|
|
<Transition name="fade-in-from-top">
|
|
<span class="hero-title__job" v-show="isVisible">Intégrateur & développeur web</span>
|
|
</Transition>
|
|
</h1>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
// --------------------------------------------------
|
|
// DATA
|
|
// --------------------------------------------------
|
|
|
|
const isVisible = ref(false);
|
|
|
|
// --------------------------------------------------
|
|
// PROGRAM
|
|
// --------------------------------------------------
|
|
|
|
onMounted(() => {
|
|
isVisible.value = true;
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
// --------------------------------------------------
|
|
// STYLE
|
|
// --------------------------------------------------
|
|
|
|
.hero-title {
|
|
width: 100%;
|
|
display: grid;
|
|
grid:
|
|
'name' auto
|
|
'divider' auto
|
|
'job' auto
|
|
/ minmax(50%, auto);
|
|
place-content: center;
|
|
place-items: center;
|
|
gap: 0.5rem;
|
|
text-align: center;
|
|
|
|
&__name {
|
|
grid-area: name;
|
|
margin: 0 2rem;
|
|
}
|
|
|
|
&__divider {
|
|
grid-area: divider;
|
|
width: 100%;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, var(--primary-color), var(--primary-accent-color-light), var(--primary-color));
|
|
}
|
|
|
|
&__job {
|
|
grid-area: job;
|
|
font-size: var(--h2-font-size);
|
|
font-weight: var(--light-font-weight);
|
|
margin: 0 2rem;
|
|
}
|
|
}
|
|
|
|
// Transition components
|
|
|
|
.fade-in-from-bottom {
|
|
|
|
&-enter-from,
|
|
&-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(0.25rem);
|
|
}
|
|
|
|
&-enter-active,
|
|
&-leave-active {
|
|
transition:
|
|
opacity 400ms ease-in-out 600ms,
|
|
transform 400ms ease-in-out 600ms;
|
|
}
|
|
}
|
|
|
|
.fade-in-from-top {
|
|
|
|
&-enter-from,
|
|
&-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-0.25rem);
|
|
}
|
|
|
|
&-enter-active,
|
|
&-leave-active {
|
|
transition:
|
|
opacity 400ms ease-in-out 600ms,
|
|
transform 400ms ease-in-out 600ms;
|
|
}
|
|
}
|
|
|
|
.expand-width {
|
|
|
|
&-enter-from,
|
|
&-leave-to {
|
|
width: 0;
|
|
}
|
|
|
|
&-enter-active,
|
|
&-leave-active {
|
|
transition: width 400ms ease-in-out 200ms;
|
|
}
|
|
}
|
|
|
|
</style>
|