Merge pull request #75

feature/no-ref/inprove-cover-intro
botmaster · Jan 18, 2024 · f4e0086 · f4e0086
2 parents bcfe3aa + 55e5773
commit f4e0086
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 95 deletions.
diff --git a/components/CoverComponent.vue b/components/CoverComponent.vue
@@ -29,7 +29,6 @@ const { t } = useI18n();
 // Effects setup
 const root = ref<HTMLElement | null>(null);
 const coverBg = ref<HTMLElement | null>(null);
-const coverImg = ref<HTMLElement | null>(null);
 const coverDimmer = ref<HTMLElement | null>(null);
 const coverUptitle = ref<HTMLElement | null>(null);
 const coverTitle = ref<HTMLElement | null>(null);
@@ -51,7 +50,7 @@ function initEffects() {
     const tlIntro = gsap.timeline({
       defaults: {
         ease: 'expo.out',
-        duration: 3,
+        duration: 1.4,
         force3D: true,
         immediateRender: true,
       },
@@ -74,14 +73,14 @@ function initEffects() {
       0.1,
     );
 
-    /* tlIntro.to(
+    tlIntro.to(
       self.selector('.line-mask'),
       {
         startAt: {
           y: 310,
         },
         y: 0,
-        stagger: 0.3,
+        stagger: 0.15,
       },
       0,
     );
@@ -90,13 +89,27 @@ function initEffects() {
       self.selector('.line-mask > *'),
       {
         startAt: {
-          y: 50,
+          y: 60,
         },
         y: 0,
-        stagger: 0.5,
+        stagger: 0.25,
       },
       0,
-    ); */
+    );
+
+    tlIntro.to(
+      shortcuts.value?.children as HTMLCollection,
+      {
+        startAt: {
+          x: 15,
+          opacity: 0,
+        },
+        x: 0,
+        opacity: 1,
+        stagger: 0.2,
+      },
+      '>-0.8',
+    );
 
     tlIntro.to(
       iconScroll.value,
@@ -110,7 +123,7 @@ function initEffects() {
           opacity: 0,
         },
       },
-      '-=1.5',
+      '>-0.8',
     );
 
     // Scrub Timeline
@@ -154,30 +167,6 @@ function initEffects() {
       '<',
     );
 
-    /* tl.to(
-      bubbles.value,
-      {
-        autoAlpha: 0,
-      },
-      '<',
-    ); */
-
-    /* tl.to(
-      coverBg.value,
-      {
-        autoAlpha: 0,
-      },
-      '<',
-    ); */
-
-    tl.to(
-      coverImg.value,
-      {
-        autoAlpha: 0,
-      },
-      '<',
-    );
-
     tl.to(
       coverUptitle.value,
       {
@@ -252,7 +241,6 @@ onBeforeUnmount(() => {
 <template>
   <div ref="root" class="cover">
     <div ref="coverBg" class="cover__background" />
-    <div ref="coverImg" class="cover__bg-image" />
     <div ref="bubblesContainer" class="cover__bubbles" />
     <div ref="coverDimmer" class="cover__dimmer" />
     <div class="cover__content">
@@ -298,7 +286,7 @@ onBeforeUnmount(() => {
             rel="noopener"
           >
             <Icon class="mr-1 " name="mdi:file-document" size="1.2em" />
-            <span class=" leading-none">CV <span class="text-xs no-underline">(PDF, 46Ko)</span></span>
+            <span class="leading-none">CV <span class="text-xs no-underline">(PDF, 46Ko)</span></span>
           </a>
         </p>
       </div>
@@ -323,26 +311,13 @@ onBeforeUnmount(() => {
 
 <style scoped lang="scss">
 .cover {
-  @apply relative invisible flex items-end overflow-hidden py-12 md:py-32 text-polarnight-nord-0 dark:text-white;
+  @apply relative opacity-0 flex items-end overflow-hidden py-12 md:py-32 text-polarnight-nord-0 dark:text-white;
 
   &__background {
-    @apply absolute inset-0 block w-full h-full bg-body-background z-0;
+    @apply absolute inset-0 block w-full h-full bg-transparent z-0;
     background-image: linear-gradient(to right top, #88c0d0, #84c4d2, #7fc7d4, #7bcbd5, #77ced5, #74d1d5, #72d3d4, #70d6d3, #6fd9d1, #6edccf, #6fdfcc, #71e2c9);
   }
 
-  &__bg-image {
-    @apply absolute inset-0 w-full h-full bg-center bg-no-repeat bg-cover z-10 origin-top;
-    background-image: url("/images/pascal-achard/20102017-DSC06728_ufitab_c_scale_w_1024.jpg");
-
-    @media screen and (min-width: 1024px) {
-      background-image: url("/images/pascal-achard/20102017-DSC06728_ufitab_c_scale_w_1936.jpg");
-    }
-
-    @media screen and (min-width: 1280px) {
-      background-image: url("/images/pascal-achard/20102017-DSC06728_ufitab_c_scale_w_2560.jpg");
-    }
-  }
-
   &__bubbles {
     @apply absolute inset-0 z-[20] block w-full h-full overflow-hidden blur-2xl mix-blend-plus-lighter dark:mix-blend-luminosity;
   }

diff --git a/components/content/prose/ProseH2.vue b/components/content/prose/ProseH2.vue
@@ -18,7 +18,7 @@ const slotContent = computed(() => {
 </script>
 
 <template>
-  <h2 :id="id" ref="root" class="heading fouc-hidden">
+  <h2 :id="id" ref="root" class="heading">
     <span class="sr-only">{{ slotContent }}</span>
     <a
       v-if="id && generate"
@@ -36,7 +36,7 @@ const slotContent = computed(() => {
 
 <style lang="scss" scoped>
 .heading {
-  @apply overflow-x-visible overflow-y-clip;
+  @apply overflow-x-visible overflow-y-clip opacity-0;
 
   will-change: transform;
 

diff --git a/components/content/prose/ProseH3.vue b/components/content/prose/ProseH3.vue
@@ -18,7 +18,7 @@ const slotContent = computed(() => {
 </script>
 
 <template>
-  <h3 :id="id" ref="root" class="heading fouc-hidden">
+  <h3 :id="id" ref="root" class="heading">
     <span class="sr-only">{{ slotContent }}</span>
     <a
       v-if="id && generate"
@@ -36,7 +36,7 @@ const slotContent = computed(() => {
 
 <style lang="scss" scoped>
 .heading {
-  @apply overflow-x-visible overflow-y-clip;
+  @apply overflow-x-visible overflow-y-clip opacity-0;
 
   will-change: transform;
 

diff --git a/composables/useProseHeadingEffect.ts b/composables/useProseHeadingEffect.ts
@@ -48,7 +48,7 @@ export function useProseHeadingEffect() {
       tl.set(
         root.value,
         {
-          visibility: 'visible',
+          opacity: 1,
         },
         0,
       );

diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/i18n": "^8.0.0",
-    "@nuxtjs/sitemap": "^5.0.4",
+    "@nuxtjs/sitemap": "^5.0.5",
     "@nuxtjs/tailwindcss": "^6.10.4",
     "@types/node": "^20.11.5",
     "@types/splitting": "^1.0.5",
@@ -46,7 +46,7 @@
     "nuxt-headlessui": "^1.1.5",
     "nuxt-icon": "^0.6.8",
     "nuxt-simple-robots": "4.0.0-rc.11",
-    "sass": "^1.69.7",
+    "sass": "^1.70.0",
     "typescript": "^5.3.3",
     "uuid": "^9.0.1",
     "vite-svg-loader": "^5.1.0",

diff --git a/pages/index.vue b/pages/index.vue
@@ -70,11 +70,10 @@ onUnmounted(() => {
     <div class="page-index__cover">
       <AppLoader class="!absolute inset-0 z-0 m-auto text-[58px]" />
       <CoverComponent
-        v-if="data"
-        :title="data.coverTitle"
-        :subtitle="data.coverSubtitle ?? ''"
-        :uptitle="data.coverUpTitle ?? ''"
-        :info="data.coverInfo"
+        :title="data?.coverTitle"
+        :subtitle="data?.coverSubtitle ?? ''"
+        :uptitle="data?.coverUpTitle ?? ''"
+        :info="data?.coverInfo"
         scroll-to-target="[data-scrollTarget]"
       />
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -48,7 +48,7 @@ export function useProseHeadingEffect() { @@
           tl.set(
             root.value,
             {
-              visibility: 'visible',
+              opacity: 1,
             },
 ,
           );
@@ Expand Down @@