Merge pull request #267 from dwightjack/entry-animation

Entry animation

src/components/Avatar.astro

@@ -18,7 +18,6 @@ import marcoImg from '../assets/images/marco.jpg';
   @layer components {
     .c-avatar {
       display: block;
-      pointer-events: none;
       clip-path: polygon(
         95% 50%,
         82% 82%,
@@ -29,13 +28,25 @@ import marcoImg from '../assets/images/marco.jpg';
         50% 5%,
         82% 18%
       );
-      will-change: clip-path;
+      will-change: clip-path, scale;
+      transition: scale 250ms cubic-bezier(0.17, 0.77, 0.28, 0.94);
     }
 
     .c-avatar > img {
       display: block;
       block-size: auto;
       inline-size: 100%;
+      transition: scale 250ms cubic-bezier(0.17, 0.77, 0.28, 0.94);
+    }
+
+    @media (--pointer-mouse) and (prefers-reduced-motion: no-preference) {
+      .c-avatar:hover {
+        scale: 1.1;
+      }
+
+      .c-avatar:hover > img {
+        scale: 0.95;
+      }
     }
   }
 </style>
@@ -81,7 +92,6 @@ import marcoImg from '../assets/images/marco.jpg';
     const keyframes: { clipPath: string; offset: number }[] = [
       { clipPath: toPath(points), offset: 0 },
     ];
-    const avatars = document.querySelectorAll('.c-avatar');
 
     while (keyframes.length !== 10) {
       keyframes.push({
@@ -91,11 +101,20 @@ import marcoImg from '../assets/images/marco.jpg';
     }
     keyframes.push({ clipPath: keyframes[0].clipPath, offset: 1 });
 
+    const avatars = document.querySelectorAll('.c-avatar');
     for (const avatar of avatars) {
-      avatar.animate(keyframes, {
+      const animation = avatar.animate(keyframes, {
         duration: 20000,
         iterations: Infinity,
       });
+
+      avatar.addEventListener('mouseenter', () => {
+        animation.updatePlaybackRate(14);
+      });
+
+      avatar.addEventListener('mouseleave', () => {
+        animation.updatePlaybackRate(1);
+      });
     }
   }
 </script>

src/components/PageSection.astro

@@ -22,6 +22,32 @@ const { prefix = 'me', subtitle, title } = Astro.props;
 </section>
 <style>
   @layer components {
+    @keyframes heading-parallax-in {
+      from {
+        transform: translateY(7rem);
+      }
+
+      to {
+        transform: translateY(0);
+      }
+    }
+
+    @property --mask-size {
+      syntax: '<percentage>';
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @keyframes reveal {
+      from {
+        --mask-size: 0%;
+      }
+
+      to {
+        --mask-size: 5%;
+      }
+    }
+
     .c-page-section {
       display: flex;
       flex-direction: column;
@@ -37,6 +63,20 @@ const { prefix = 'me', subtitle, title } = Astro.props;
       @media (--viewport-desktop) {
         padding-inline-start: 2.85vw;
       }
+
+      @media (prefers-reduced-motion: no-preference) {
+        @supports (animation-timeline: view()) {
+          animation: linear reveal both;
+          mask: repeating-linear-gradient(
+            45deg,
+            #000 0 var(--mask-size),
+            #0000 var(--mask-size) 5%
+          );
+          view-timeline: --pagesection block;
+          animation-timeline: --pagesection;
+          animation-range: entry 5% entry 45%;
+        }
+      }
     }
 
     .c-page-section__header {
@@ -45,8 +85,16 @@ const { prefix = 'me', subtitle, title } = Astro.props;
 
       @media (--viewport-tablet-landscape) {
         position: sticky;
-        inset-block-start: var(--space-4);
         text-align: start;
+        inset-block-start: var(--space-4);
+      }
+
+      @media (--viewport-tablet-landscape) and (prefers-reduced-motion: no-preference) {
+        @supports (animation-timeline: view()) {
+          animation: linear heading-parallax-in both;
+          animation-timeline: --pagesection;
+          animation-range: entry 0% exit 100%;
+        }
       }
     }
 

src/content/jobs/aquest.md

@@ -6,4 +6,4 @@ title: Senior Frontend Developer
 href: http://www.aquest.it/
 ---
 
-Senior Developer, Frontend / Developer Experience Ops and Technical Evangelist for Single Page Applications Architecture.
+Senior Developer, Frontend / Developer Experience Ops, Single Page Applications Architecture.

src/content/jobs/merpay_mercari.md

@@ -5,4 +5,4 @@ title: Senior Frontend Engineer
 href: https://www.merpay.com/
 ---
 
-Enabling team member, UI developer, accessibility enthusiast
+Client Architect, UI developer, Product development