Add animation to CatchPhrase.vue

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>

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]
 }