From 0dbeec56918924e06e6948c1bbee5aeb265128fe Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Tue, 2 Jul 2024 00:52:07 +0200
Subject: [PATCH] Add animation to CatchPhrase.vue

---
 app/components/content/CatchPhrase.vue |  4 ++--
 tailwind.config.ts                     | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/app/components/content/CatchPhrase.vue b/app/components/content/CatchPhrase.vue
index 49fbfac..0b7b58b 100644
--- a/app/components/content/CatchPhrase.vue
+++ b/app/components/content/CatchPhrase.vue
@@ -2,10 +2,10 @@
   <ClientOnly>
     <div
       v-if="width > 1024"
-      class="text-[12px] italic flex items-center gap-1"
+      class="group text-[12px] italic flex items-center gap-1"
     >
       <UIcon
-        class="transform -rotate-12"
+        class="transform -rotate-12 duration-300 group-hover:animate-wave"
         name="i-ph-hand-pointing-duotone"
       />
       <p>Hover some of the bold text to find out more about me.</p>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2ba106e..c84ae5c 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -16,5 +16,22 @@ export default <Partial<Config>>{
     './app.config.{js,ts}',
     'content/**/*.md'
   ],
+  theme: {
+    extend: {
+      animation: {
+        wave: 'wave 3s infinite'
+      },
+      keyframes: {
+        wave: {
+          '0%, 50%, 100%': {
+            transform: 'rotate(-12deg)'
+          },
+          '25%, 75%': {
+            transform: 'rotate(12deg) scale(1.5)'
+          }
+        }
+      }
+    }
+  },
   plugins: [typography]
 }