From d7a98175143269596f0c4f25897f049e63d17931 Mon Sep 17 00:00:00 2001
From: aleidk <ale.navarro.parra@gmail.com>
Date: Thu, 14 Mar 2024 17:22:03 -0300
Subject: [PATCH] feat(Style): add animations and effects to landing page

added:

- float like group
- button hover effect
- link hover glow effect
- component zoom effect
---
 src/assets/style/_animations.scss  | 60 ++++++++++++++++++++++++++++++
 src/assets/style/style.scss        |  9 +++++
 src/components/Button/Button.astro | 15 +++++++-
 src/components/Card.astro          |  5 ++-
 src/pages/index.astro              | 10 ++---
 5 files changed, 92 insertions(+), 7 deletions(-)

diff --git a/src/assets/style/_animations.scss b/src/assets/style/_animations.scss
index e69de29..f879a6e 100644
--- a/src/assets/style/_animations.scss
+++ b/src/assets/style/_animations.scss
@@ -0,0 +1,60 @@
+@use './mixins';
+
+@include mixins.responsive using ($screen-size) {
+  .anim-#{$screen-size}-none {
+    animation: none !important;
+  }
+
+  .anim-group-#{$screen-size}-none > * {
+    animation: none !important;
+  }
+}
+
+@keyframes hover {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: translate(0, var(--anim-translation-value));
+  }
+}
+
+$anim-base-offset: -1s;
+
+.anim-idle-hover {
+  --anim-translation-value: var(--prj-spacing-1);
+  --anim-offset: 0s;
+  animation: hover 1.5s ease-in-out var(--anim-offset) infinite alternate;
+}
+
+.anim-idle-hover-group {
+  & > * {
+    @extend .anim-idle-hover;
+  }
+
+  @for $index from 1 through 20 {
+    $anim-offset: $anim-base-offset * $index;
+    & > :nth-child(#{$index}n) {
+      --anim-offset: #{$anim-offset};
+    }
+  }
+}
+
+.anim-hover-zoom {
+  transition: scale 0.2s;
+  &:hover {
+    scale: 1.05;
+  }
+}
+
+.anim-hover-translate {
+  --anim-translation-value: -5px;
+  --anim-shadow-color: var(--prj-accent-bg);
+  transition: translate 0.2s;
+
+  &:hover {
+    translate: var(--anim-translation-value) var(--anim-translation-value);
+    box-shadow: calc(var(--anim-translation-value) * -1)
+      calc(var(--anim-translation-value) * -1) 0px 0px var(--anim-shadow-color);
+  }
+}
diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss
index 0372ce5..d6914fe 100644
--- a/src/assets/style/style.scss
+++ b/src/assets/style/style.scss
@@ -144,3 +144,12 @@ li:not(:last-child) {
 
   padding: var(--prj-spacing-3);
 }
+
+a {
+  transition: text-shadow 0.2s;
+  --anim-shadow-color: var(--prj-accent-bg);
+
+  &:hover {
+    text-shadow: 1px 1px 8px var(--anim-shadow-color);
+  }
+}
diff --git a/src/components/Button/Button.astro b/src/components/Button/Button.astro
index bc83ee4..de2ec69 100644
--- a/src/components/Button/Button.astro
+++ b/src/components/Button/Button.astro
@@ -10,7 +10,7 @@ const { className = '' } = Astro.props;
   <slot />
 </button>
 
-<style>
+<style lang="scss">
   button {
     font-size: 1rem;
     padding: var(--prj-spacing-1) var(--prj-spacing-3);
@@ -23,5 +23,18 @@ const { className = '' } = Astro.props;
     cursor: pointer;
 
     margin-bottom: 0;
+    box-shadow: 0 0 0px 0px var(--prj-accent-bg);
+
+    transition: color 0.2s, background-color 0.2s, translate 0.2s,
+      box-shadow 0.2s;
+
+    &:hover {
+      --anim-translation-value: -5px;
+      background-color: transparent;
+      color: var(--prj-text);
+      translate: var(--anim-translation-value) var(--anim-translation-value);
+      box-shadow: calc(var(--anim-translation-value) * -2)
+        calc(var(--anim-translation-value) * -2) 0px 0px var(--prj-accent-bg);
+    }
   }
 </style>
diff --git a/src/components/Card.astro b/src/components/Card.astro
index 8542eac..be32713 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -1,10 +1,13 @@
 ---
 export interface Props {
   title?: string;
+  className?: string;
 }
+
+const { className } = Astro.props;
 ---
 
-<div class="card vstack">
+<div class:list={['card', 'vstack', className]}>
   <div class="title">
     <slot name="title" />
   </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4a04b12..ff3674f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -46,7 +46,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
     <h2 class="text-center">Featured Work</h2>
 
     <div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
-      <Card>
+      <Card className="anim-hover-zoom">
         <img
           src="https://placehold.co/600x400"
           alt="project img"
@@ -63,7 +63,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
         </div>
       </Card>
 
-      <Card>
+      <Card className="anim-hover-zoom">
         <img
           src="https://placehold.co/600x400"
           alt="project img"
@@ -80,7 +80,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
         </div>
       </Card>
 
-      <Card>
+      <Card className="anim-hover-zoom">
         <img
           src="https://placehold.co/600x400"
           alt="project img"
@@ -99,7 +99,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
     </div>
 
     <div class="mt-4 text-center">
-      <Button className="px-4 py-2 fs-5">View Work</Button>
+      <Button className="px-4 py-2 fs-5 ">View Work</Button>
     </div>
   </section>
 
@@ -231,7 +231,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
 
       <div class="vstack justify-content-center">
         <ul
-          class="list-unstyle fs-5 ml-lg-5 mt-3 d-flex d-lg-block justify-content-around"
+          class="list-unstyle fs-5 ml-lg-5 mt-3 d-flex d-lg-block justify-content-around anim-idle-hover-group anim-group-lg-none"
         >
           {
             [