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

Edit global style and component structure

Browse source
This commit is contained in:
Paul Nicoué 2023-02-02 17:02:53 +01:00
parent 88bac001d8
commit 53e513a55b
15 changed files with 816 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

106
components/HeroTitle.vue
View file

@ -1,14 +1,35 @@
<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>
<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>
@ -18,35 +39,82 @@
// --------------------------------------------------
.hero-title {
min-width: 50vw;
height: 100vh;
height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
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 {
opacity: 0;
grid-area: name;
margin: 0 2rem;
animation: fade-in-from-bottom 400ms ease-in-out 600ms forwards;
}
&__separator {
width: 0;
grid-area: separator;
width: 100%;
height: 1px;
margin: 0.5rem auto;
background-color: var(--accent-color);
animation: expand-width 400ms ease-in-out 200ms forwards;
}
&__job {
opacity: 0;
grid-area: job;
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;
}
}
// 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;
}
}