62 lines
1.4 KiB
Vue
62 lines
1.4 KiB
Vue
<template>
|
|
|
|
<main>
|
|
<div class="title">
|
|
<h1 class="title__name">Paul Nicoué</h1>
|
|
<div class="title__separator"></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">
|
|
|
|
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(--emerald);
|
|
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>
|