feat: replace CSS for GSAP animation

package.json

@@ -43,10 +43,10 @@
     "@fontsource-variable/literata": "^5.0.19",
     "@fontsource/zilla-slab": "^5.0.8",
     "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.17",
-    "astro": "^4.0.5",
+    "@types/react-dom": "^18.2.18",
+    "astro": "^4.0.6",
     "astro-imagetools": "^0.9.0",
-    "gsap": "^3.12.3",
+    "gsap": "^3.12.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.0",
@@ -58,9 +58,9 @@
     "@types/eslint": "^8.44.9",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-astro": "^0.30.0",
+    "eslint-plugin-astro": "^0.31.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",

src/pages/index.astro

@@ -1,16 +1,17 @@
 ---
 import BaseLayout from '@components/templates/baseLayout/BaseLayout.astro';
-// todo: add CIs
+import Welcome from '@components/molecules/welcome/Welcome.astro';
+import Testimonials from '@components/molecules/testimonials/Testimonials.astro';
+
+// todo: acabar welcome (tilt)
+// todo: reveal on enter viewport
+// todo: view transitions
 // todo: add vitest
+// todo: add CIs
 ---
-
 <BaseLayout title="" description="">
-  <h1>Hello, Astronaut!</h1>
-  <p>
-    Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
-    template serves as a lightweight, minimally-styled starting point for anyone looking to
-    build a personal website, blog, or portfolio with Astro.
-  </p>
+<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

src/ui/components/atoms/ReactScriptProvider.tsx

@@ -5,9 +5,7 @@ import { scrollDirection } from '@components/organisms/header/utils/scrollDirect
 const ReactScriptProvider = () => {
   useEffect(() => {
     toggleMenu();
-    scrollDirection({
-      target: 'header',
-    });
+    scrollDirection();
   }, []);
 
   return null;

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

@@ -0,0 +1,3 @@
+---
+
+---

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

@@ -0,0 +1,56 @@
+@layer welcome {
+    .welcome {
+        display: grid;
+        grid-template-areas: 'LeftGreeting WelcomeImage RightGreeting';
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+    .welcome__image{
+            grid-area: WelcomeImage;
+            align-self: center;
+            justify-self: center;
+            width: 100%;
+            max-width: 400px;
+            height: auto;
+        }
+
+    .welcome__text__body {
+        align-self: center;
+        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);
+            }
+        }
+    }
+    .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);
+        }
+    }
+}

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

@@ -0,0 +1,10 @@
+---
+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>
+</section>

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

@@ -0,0 +1,56 @@
+@layer welcome {
+    .welcome {
+        display: grid;
+        grid-template-areas: 'LeftGreeting WelcomeImage RightGreeting';
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+    .welcome__image{
+            grid-area: WelcomeImage;
+            align-self: center;
+            justify-self: center;
+            width: 100%;
+            max-width: 400px;
+            height: auto;
+        }
+
+    .welcome__text__body {
+        align-self: center;
+        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);
+            }
+        }
+    }
+    .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);
+        }
+    }
+}

src/ui/components/organisms/header/components/headerLink/HeaderLink.astro

@@ -8,7 +8,7 @@ const { pathname } = Astro.url;
 const isCurrentPage = href === pathname || href === pathname.replace(/\/$/, '');
 ---
 
-<a href={href} class:list={[classNames, { '--is-current-page': isCurrentPage }]} {...props}>
+<a href={href} class:list={[`clickable ${classNames}`, { '--is-current-page': isCurrentPage }]} {...props}>
     <slot />
 </a>
 

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

@@ -10,16 +10,11 @@
         z-index: 20;
 
         svg {
-            transition: fill 3s;
+            transition: scale .2s;
         }
 
-        &.--is-menu-open {
-            top: 3rem;
-            transition-delay: 0.5s;
-
-            svg {
-                fill: var(--white);
-            }
+        &.--is-scrolling:not(.--is-menu-open) svg{
+            scale: .85;
         }
     }
 }

src/ui/components/organisms/header/components/menu/menu.css

@@ -17,7 +17,6 @@
     line-height: 70%;
     position: relative;
     top: 150%;
-    transition: letter-spacing 0.75s cubic-bezier(0.075, 0.82, 0.165, 1);
   }
 
   .navigation__menu {
@@ -104,6 +103,7 @@
     font-size: clamp(2rem, 5rem, 5rem);
     text-transform: uppercase;
     position: relative;
+    display: inline-block;
 
     &:after {
       background-color: currentColor;
@@ -112,7 +112,7 @@
       margin: 0 auto;
       left: 0;
       right: 0;
-      bottom: 8px;
+      bottom: -1.25rem;
       transform: scaleX(0);
       transition: all 0.2s ease;
       position: absolute;

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

@@ -1,7 +1,7 @@
 ---
 import './menuButton.css';
 ---
-<button class="header__menu-button">
+<button class="header__menu-button clickable">
     <span class="header__menu-button__outline outline-1" />
     <span class="header__menu-button__outline outline-2" />
     <span class="header__menu-text">Menu</span>

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

@@ -1,5 +1,6 @@
 @layer header.menuOverlay {
   .header__menu-overlay__wrapper {
+  display: none;
     height: 100dvh;
     inset: -1rem 0 0 0;
     position: absolute;

src/ui/components/organisms/header/header.css

@@ -5,13 +5,21 @@
         position: fixed;
         transition: all .3s;
         width: 100%;
-        z-index: 100;
+        z-index: 1000;
 
-        &.--is-scrolling::after {
+        &.--is-scrolling{
+            box-shadow: 0 0.125rem 0.375rem var(--neutral-light-2);
+
+            &::after {
             clip-path: polygon(0 0, 100% 0, 100% 120%, 0 120%);
         }
     }
 
+    .header__wrapper {
+        position: relative;
+        height: 100%;
+    }
+
     .header__backdrop {
         --extended-by: var(--header-height);
         --cutoff: calc(100% - var(--extended-by));
@@ -28,9 +36,4 @@
                 transparent var(--cutoff)
         );
     }
-
-    .header__wrapper {
-        position: relative;
-        height: 100%;
-    }
 }

src/ui/components/organisms/header/utils/scrollDirection/scrollDirection.ts

@@ -3,28 +3,28 @@ enum ScrollDirection {
   UP = 'UP',
   DOWN = 'DOWN',
 }
-
-interface ScrollDirectionOptions {
-  target: string;
-}
-
-export function scrollDirection(options: ScrollDirectionOptions): void {
+export function scrollDirection(): void {
   let lastScrollTop = 0;
   let scrollDirection: ScrollDirection = ScrollDirection.NONE;
 
   const handleScroll = () => {
-    const { target } = options;
-    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    const HEADER = document.querySelector('header');
+    const LOGO = document.querySelector('.site__logo');
+    const scrollTop = document.documentElement.scrollTop ?? document.body.scrollTop;
 
     if (scrollTop > lastScrollTop) scrollDirection = ScrollDirection.DOWN;
     else scrollDirection = ScrollDirection.UP;
 
     lastScrollTop = scrollTop;
 
-    const selector = document.querySelector(target);
-    if (selector) {
-      if (scrollTop === 0) selector.classList.remove('--is-scrolling');
-      else if (scrollDirection === ScrollDirection.DOWN) selector.classList.add('--is-scrolling');
+    if (!HEADER || !LOGO) return;
+
+    if (scrollTop === 0) {
+      HEADER.classList.remove('--is-scrolling');
+      LOGO.classList.remove('--is-scrolling');
+    } else if (scrollDirection === ScrollDirection.DOWN) {
+      HEADER.classList.add('--is-scrolling');
+      LOGO.classList.add('--is-scrolling');
     }
   };