Add form section
This commit is contained in:
parent
c6705914e0
commit
2a4cf52465
33 changed files with 1031 additions and 311 deletions
53
components/HeroTitle.vue
Normal file
53
components/HeroTitle.vue
Normal file
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
|
||||
<div class="hero-title">
|
||||
<h1 class="hero-title__name">Paul Nicoué</h1>
|
||||
<div class="hero-title__separator" aria-hidden="true"></div>
|
||||
<h2 class="hero-title__job">Intégrateur web & développeur full stack</h2>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
// --------------------------------------------------
|
||||
// STYLE
|
||||
// --------------------------------------------------
|
||||
|
||||
.hero-title {
|
||||
min-width: 50vw;
|
||||
height: 100vh;
|
||||
height: 100svh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
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>
|
Loading…
Add table
Add a link
Reference in a new issue