host/paulnicoue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add form section

Browse source
This commit is contained in:
Paul Nicoué 2023-01-20 18:08:51 +01:00
parent c6705914e0
commit 2a4cf52465
33 changed files with 1031 additions and 311 deletions
Download patch file Download diff file Expand all files Collapse all files

55
pages/index.vue
View file

@ -1,11 +1,8 @@
<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>
<HeroTitle class="hero-title" />
<ContactSection class="contact-section" />
</main>
</template>
@ -25,41 +22,35 @@
<style lang="scss" scoped>
// --------------------------------------------------
// INDEX STYLE
// LAYOUT
// --------------------------------------------------
main {
padding: 4rem 2rem;
}
width: 100%;
padding: 2rem;
display: grid;
grid:
'hero-title' auto
'contact-section' auto
/ 1fr;
place-content: start center;
place-items: start center;
row-gap: 4rem;
.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;
.hero-title {
grid-area: hero-title;
}
&__separator {
width: 0;
height: 1px;
margin: 0.5rem auto;
background-color: var(--accent-color);
animation: expand-width 400ms ease-in-out 200ms forwards;
.contact-section {
grid-area: contact-section;
}
&__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;
@media screen and (min-width: $tablet-media-query) {
padding: 2rem 4rem;
}
@media screen and (min-width: $desktop-media-query) {
padding: 2rem 6rem;
}
}