paulnicoue/pages/index.vue

<template>

    <main>
        <div class="title">
            <h1 class="title__name">Paul Nicoué</h1>
            <div class="title__separator" aria-hidden="true"></div>
            <h2 class="title__job">Intégrateur web & développeur full stack</h2>
        </div>
    </main>

</template>

<script setup>

    // --------------------------------------------------
    // HEAD
    // --------------------------------------------------

    definePageMeta({
        pageTitleChunk: null
    })

</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // INDEX STYLE
    // --------------------------------------------------

    main {
        padding: 4rem 2rem;
    }

    .title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 50vw;
        text-align: center;

        &__name {
            opacity: 0;
            margin: 0 2rem;
            animation: fade-in-from-bottom 400ms ease-in-out 600ms forwards;
        }

        &__separator {
            width: 0;
            height: 1px;
            margin: 0.5rem auto;
            background-color: var(--accent-color);
            animation: expand-width 400ms ease-in-out 200ms forwards;
        }

        &__job {
            opacity: 0;
            font-size: var(--h2-font-size);
            font-weight: var(--light-font-weight);
            margin: 0 2rem;
            animation: fade-in-from-top 400ms ease-in-out 600ms forwards;
        }
    }

</style>