paulnicoue/components/HeroTitle.vue

<template>

    <h1 class="hero-title">
        <Transition name="fade-in-from-bottom">
            <div class="hero-title__name" v-show="isVisible">Paul Nicoué</div>
        </Transition>
        <Transition name="expand-width">
            <div class="hero-title__separator" aria-hidden="true" v-show="isVisible"></div>
        </Transition>
        <Transition name="fade-in-from-top">
            <div class="hero-title__job" v-show="isVisible">Intégrateur web & développeur full stack</div>
        </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
            'separator' 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;
        }

        &__separator {
            grid-area: separator;
            width: 100%;
            height: 1px;
            background-color: var(--accent-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>