animations

src/App.vue

@@ -130,13 +130,17 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class=" absolute pointer-events-none w-full h-full overflow-clip">
+  <div class=" absolute pointer-events-none w-full h-full overflow-hidden">
+    <transition name="fadeImage" appear>
     <img src="/images/camera-effect.png" class="top-10 right-10 w-full h-full object-cover z-0 scale-110"
          alt="" width="1512" height="1071" role="presentation">
-    <img src="/images/filter.png" class="fixed bottom-0 right-0 w-full h-full object-cover z-50"
+    </transition>
+    <img src="/images/filter.png" class="fixed bottom-0 right-0 w-full object-cover z-50 opacity-70"
          alt="" width="1508" height="1376" role="presentation">
   </div>
+  <transition name="fade" appear>
     <HeaderContainer id="about"></HeaderContainer>
+  </transition>
   <HeroContainer class=" mt-6 sm:mt-14"/>
   <ShowcaseBanner class=" mt-24 sm:mt-36 z-10 relative">
     <BannerCell number="1" label="ANNEE <br> D'EXPERIENCE"/>
@@ -144,7 +148,7 @@ onUnmounted(() => {
     <BannerCell number="+" label="FRONT-END <br> BACK-END"/>
     <BannerCell number="+" label="UI/UX <br> DESIGN"/>
   </ShowcaseBanner>
-  <div class="flex-col flex pt-24 sm:pt-48 pb-28 z-10 relative" id="skills">
+  <div class="flex-col flex pt-24 sm:pt-48 pb-28 z-10 relative bg-black" id="skills">
     <span class="mx-4 text-3xl sm:text-4xl text-center font-medium bg-gradient-to-r from-grey-50
     to-grey-100 bg-clip-text text-transparent px-10 " role="heading">
       {{ $t('skills-list.title.start')}}
@@ -248,4 +252,27 @@ onUnmounted(() => {
 .v-leave-to {
   opacity: 0;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: 1.5s ease-out;
+  transition-delay: 1s !important;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(-80px);
+}
+
+.fadeImage-enter-active,
+.fadeImage-leave-active {
+  transition: 5s ease-out;
+}
+
+.fadeImage-enter-from,
+.fadeImage-leave-to {
+  opacity: 0;
+}
+
 </style>

src/components/HeroContainer.vue

@@ -4,19 +4,28 @@ import RedirectLogo from './../assets/icons/redirect.svg';
 </script>
 <template>
     <div class="flex flex-col justify-center items-center">
+      <transition name="picture" appear>
         <img src="/images/picture.png" height="624" width="624" class="w-24 h-24 sm:w-40 sm:h-40"
              alt="Lucas Delanier">
+      </transition>
         <div class="flex flex-row items-center gap-1">
+          <transition name="welcome" appear>
           <p class="pt-2" role="heading">
             {{ $t('welcome-message')}}
           </p>
+          </transition>
+          <transition name="welcome" appear>
           <p class="hover:scale-150 transition-all ease-in duration-300 hover:rotate-12">
             👋
           </p>
+          </transition>
         </div>
+      <transition name="phrase" appear>
         <h1 class="text-center text-3xl sm:text-5xl font-medium bg-gradient-to-r from-grey-50 to-grey-100 bg-clip-text
-         text-transparent leading-tight pt-5" v-html="$t('catch-phrase')" role="heading">
+         text-transparent leading-tight pt-5 pb-2" v-html="$t('catch-phrase')" role="heading">
         </h1>
+      </transition>
+      <transition name="button" appear>
         <div class="flex scale-90 sm:scale-100 flex-row gap-3 pt-8 flex-wrap items-center justify-center">
           <LinkButton url="https://www.linkedin.com/in/lucas-delanier/">
             {{ $t('social-media.linkedin')}}
@@ -31,5 +40,55 @@ import RedirectLogo from './../assets/icons/redirect.svg';
             <RedirectLogo/>
           </LinkButton>
         </div>
+      </transition>
     </div>
 </template>
+<style scoped>
+
+.picture-enter-active,
+.picture-leave-active {
+  transition: 3s ease-in-out;
+}
+
+.picture-enter-from,
+.picture-leave-to {
+  opacity: 0;
+  transform: scale(0.98) translateY(10px);
+}
+
+.welcome-enter-active,
+.welcome-leave-active {
+  transition: 3s ease-in-out;
+  transition-delay: 2.5s !important;
+}
+
+.welcome-enter-from,
+.welcome-leave-to {
+  opacity: 0;
+  transform: scale(0.98) translateY(10px);
+}
+
+.phrase-enter-active,
+.phrase-leave-active {
+  transition: 2s ease-in-out;
+  transition-delay: 0.5s !important;
+}
+
+.phrase-enter-from,
+.phrase-leave-to {
+  opacity: 0;
+  transform: scale(0.90);
+}
+
+.button-enter-active,
+.button-leave-active {
+  transition: 2s ease-in-out;
+  transition-delay: 0.8s !important;
+}
+
+.button-enter-from,
+.button-leave-to {
+  opacity: 0;
+  transform: translateY(20px) scale(0.9);
+}
+</style>