feat: improved GSAP performance

src/content/blog/using-mdx.mdx

@@ -20,7 +20,7 @@ When you open this page in the browser, you should see the clickable button belo
 
 
 
-import HeaderLink from '../../ui/components/organisms/header/components/headerLink/HeaderLink.astro';
+import HeaderLink from '../../ui/components/atoms/headerLink/HeaderLink.astro';
 
 <HeaderLink href="#" onclick="alert('clicked!')">
   Embedded component in MDX

src/pages/index.astro

@@ -3,7 +3,7 @@ import BaseLayout from '@components/templates/baseLayout/BaseLayout.astro';
 import Welcome from '@components/molecules/welcome/Welcome.astro';
 import Testimonials from '@components/molecules/testimonials/Testimonials.astro';
 
-// todo: acabar welcome (tilt)
+// todo: add testimonial
 // todo: reveal on enter viewport
 // todo: view transitions
 // todo: add vitest
@@ -12,10 +12,4 @@ import Testimonials from '@components/molecules/testimonials/Testimonials.astro'
 <BaseLayout title="" description="">
 <Welcome />
 <Testimonials />
-  <p>
-    This template comes with a few integrations already configured in your
-    <code>astro.config.mjs</code> file. You can customize your setup with
-    <a href="https://astro.build/integrations">Astro Integrations</a> to add tools like
-    Tailwind, React, or Vue to your project.
-  </p>
 </BaseLayout>

src/ui/components/atoms/ReactScriptProvider.tsx

@@ -1,11 +1,13 @@
 import { useEffect } from 'react';
 import { toggleMenu } from '@components/organisms/header/utils/toggleMenu';
 import { scrollDirection } from '@components/organisms/header/utils/scrollDirection';
+import { initializeParallax } from '@components/molecules/welcome/utils/initializeParallax';
 
 const ReactScriptProvider = () => {
   useEffect(() => {
     toggleMenu();
     scrollDirection();
+    initializeParallax();
   }, []);
 
   return null;

src/ui/components/atoms/logo/Logo.astro

@@ -0,0 +1,8 @@
+---
+import logo from 'src/ui/assets/images/svg/logo.svg?raw';
+import './logo.css';
+---
+<a class="site__logo" href="/">
+    <Fragment set:html={logo} />
+</a>
+

src/ui/components/organisms/header/components/logo/logo.css → src/ui/components/atoms/logo/logo.css

@@ -10,7 +10,7 @@
         z-index: 20;
 
         svg {
-            transition: scale .2s;
+            transition: scale 0.2s;
         }
 
         &.--is-scrolling:not(.--is-menu-open) svg{

src/ui/components/organisms/header/components/menu/Menu.astro → src/ui/components/atoms/menu/Menu.astro

@@ -1,6 +1,6 @@
 ---
 import './menu.css';
-import HeaderLink from '@components/organisms/header/components/headerLink/HeaderLink.astro';
+import HeaderLink from 'src/ui/components/atoms/headerLink/HeaderLink.astro';
 ---
 <section class="header__menu" popover role="menu" popovertarget="header-menu" id="header-menu">
     <div class="navigation__menu">

src/ui/components/organisms/header/components/menuButton/MenuButton.astro → src/ui/components/atoms/menuButton/MenuButton.astro

@@ -1,5 +1,5 @@
 ---
-import './menuButton.css';
+import 'src/ui/components/atoms/menuButton/menuButton.css';
 ---
 <button class="header__menu-button clickable">
     <span class="header__menu-button__outline outline-1" />

src/ui/components/organisms/header/components/menuOverlay/MenuOverlay.astro → src/ui/components/atoms/menuOverlay/MenuOverlay.astro

@@ -1,5 +1,5 @@
 ---
-import './menuOverlay.css';
+import '@components/atoms/menuOverlay/menuOverlay.css';
 ---
 <div class="header__menu-overlay__wrapper">
     <svg viewBox="0 0 1000 1000" class="header__menu-overlay">

src/ui/components/organisms/header/components/menuOverlay/menuOverlay.css → src/ui/components/atoms/menuOverlay/menuOverlay.css

@@ -2,10 +2,9 @@
   .header__menu-overlay__wrapper {
   display: none;
     height: 100dvh;
-    inset: -1rem 0 0 0;
+    inset: -.5rem 0 0 0;
     position: absolute;
     transition: all 0.3s;
     width: 100dvw;
-    z-index: -10;
   }
 }

src/ui/components/molecules/testimonials/Testimonials.astro

@@ -1,3 +1,9 @@
 ---
-
+import './testimonials.css';
 ---
+<section class="testimonials__wrapper wrapper">
+    <h3 class="testimonials__title">Testimonials</h3>
+    <p class="testimonials__body">This template comes with a few integrations already configured in your astro.config.mjs file. You can customize your setup with Astro Integrations to add tools like Tailwind, React, or Vue to your project.
+
+    </p>
+</section>

src/ui/components/molecules/testimonials/testimonials.css

@@ -1,56 +1,18 @@
-@layer welcome {
-    .welcome {
-        display: grid;
-        grid-template-areas: 'LeftGreeting WelcomeImage RightGreeting';
-        grid-template-columns: 1fr 1fr 1fr;
+@layer testimonials {
+    .testimonials__wrapper{
+        margin-top: 9rem;
     }
-    .welcome__image{
-            grid-area: WelcomeImage;
-            align-self: center;
-            justify-self: center;
-            width: 100%;
-            max-width: 400px;
-            height: auto;
-        }
-
-    .welcome__text__body {
-        align-self: center;
+    .testimonials__title,
+    .testimonials__body {
         text-align: center;
-        color: var(--neutral-main);
-
-        &.--right {
-            grid-area: RightGreeting;
-            justify-self: start;
-            margin-left: -3rem;
-            z-index: 10;
-        }
-        &.--left {
-            grid-area: LeftGreeting;
-            justify-self: end;
-            margin-right: -1.5rem;
-            z-index: 10;
-            translate: 0 -100px;
-        }
-        @supports (animation-timeline: scroll(root block)) {
-            &.--right {
-                animation: float-up-far 200ms linear;
-                animation-timeline: scroll(root block);
-            }
-            &.--left {
-                animation: float-up-close linear;
-                animation-timeline: scroll(root block);
-            }
-        }
+        margin: 0 auto;
     }
-    .welcome__text__description{
-        grid-area: RightGreeting;
-        padding-inline-start: 1rem;
-        align-self: center;
-        margin-top: 8rem;
-
-        @supports (animation-timeline: scroll(root block)) {
-            animation: float-up-close linear;
-            animation-timeline: scroll(root block);
-        }
+    .testimonials__title{
+        text-transform: uppercase;
+        letter-spacing: .5rem;
+    }
+    .testimonials__body {
+        max-width: var(--grid-small);
+        width: 100%;
     }
 }

src/ui/components/molecules/welcome/Welcome.astro

@@ -3,8 +3,12 @@ import { Picture } from "astro-imagetools/components";
 import './welcome.css';
 ---
 <section class="welcome flex row-wrap">
-    <h2 class="welcome__text__body --left">Hi! I'm</h2>
-    <Picture class="welcome__image" src="/src/ui/assets/images/jpg/bianca-fiore.jpg" alt="Bianca Fiore" />
-    <h2 class="welcome__text__body --right">Bianca</h2>
-    <p class="welcome__text__description --right">Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet</p>
+    <h2 class="welcome__text__title --left">Hi! I'm</h2>
+    <Picture src="/src/ui/assets/images/jpg/bianca-fiore.jpg" alt="Bianca Fiore" attributes={{ img: { class:'welcome__image' }}}/>
+    <h1 class="welcome__text__title --right">Bianca Fiore</h1>
+    <p class="welcome__text__body --right">Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet</p>
 </section>
+
+<script>
+
+</script>

src/ui/components/molecules/welcome/utils/initializeParallax/index.ts

@@ -0,0 +1 @@
+export * from './initializeParallax';

src/ui/components/molecules/welcome/utils/initializeParallax/initializeParallax.ts

@@ -0,0 +1,31 @@
+import { gsap } from 'gsap';
+import type { MouseEvent } from 'react';
+
+interface ParallaxParams {
+  event: globalThis.MouseEvent | MouseEvent;
+  target: string;
+  movement: number;
+}
+
+export function initializeParallax() {
+  const WELCOME = document.querySelector('.welcome') as HTMLElement;
+
+  if (WELCOME instanceof HTMLElement) {
+    WELCOME.addEventListener('mousemove', (event) => {
+      attachParallax({ event, target: '.welcome__image', movement: -30 });
+    });
+  }
+  function attachParallax({ event, target, movement }: ParallaxParams) {
+    if (WELCOME instanceof HTMLElement) {
+      const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = WELCOME;
+      const relativeX = event.pageX - offsetLeft;
+      const relativeY = event.pageY - offsetTop;
+
+      gsap.to(target, {
+        duration: 1,
+        x: ((relativeX - offsetWidth / 2) / offsetWidth) * movement,
+        y: ((relativeY - offsetHeight / 2) / offsetHeight) * movement,
+      });
+    }
+  }
+}

src/ui/components/molecules/welcome/welcome.css

@@ -4,7 +4,7 @@
         grid-template-areas: 'LeftGreeting WelcomeImage RightGreeting';
         grid-template-columns: 1fr 1fr 1fr;
     }
-    .welcome__image{
+    .welcome__image {
             grid-area: WelcomeImage;
             align-self: center;
             justify-self: center;
@@ -13,7 +13,7 @@
             height: auto;
         }
 
-    .welcome__text__body {
+    .welcome__text__title {
         align-self: center;
         text-align: center;
         color: var(--neutral-main);
@@ -42,7 +42,7 @@
             }
         }
     }
-    .welcome__text__description{
+    .welcome__text__body {
         grid-area: RightGreeting;
         padding-inline-start: 1rem;
         align-self: center;

src/ui/components/organisms/header/Header.astro

@@ -1,9 +1,9 @@
 ---
 import './header.css';
-import MenuButton from '@components/organisms/header/components/menuButton/MenuButton.astro';
-import MenuOverlay from '@components/organisms/header/components/menuOverlay/MenuOverlay.astro';
-import Logo from '@components/organisms/header/components/logo/Logo.astro';
-import Menu from '@components/organisms/header/components/menu/Menu.astro';
+import MenuButton from 'src/ui/components/atoms/menuButton/MenuButton.astro';
+import MenuOverlay from 'src/ui/components/atoms/menuOverlay/MenuOverlay.astro';
+import Logo from 'src/ui/components/atoms/logo/Logo.astro';
+import Menu from 'src/ui/components/atoms/menu/Menu.astro';
 ---
 <header>
   <div class="header__backdrop" />