From 4c90677bbca4eb1754e640bf9eaa4f89cba92d66 Mon Sep 17 00:00:00 2001
From: Pablo <psirera4@gmail.com>
Date: Sat, 28 Nov 2020 11:02:13 +0100
Subject: [PATCH] feat: add animation to salute

---
 assets/css/animations.css   | 27 +++++++++++++++++++++++++++
 components/ui/TheHeader.vue |  3 +++
 pages/index.vue             | 12 +++++++++++-
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/assets/css/animations.css b/assets/css/animations.css
index 83c3943..9f2ba67 100644
--- a/assets/css/animations.css
+++ b/assets/css/animations.css
@@ -3,3 +3,30 @@
     opacity: 0;
   }
 }
+
+@keyframes wave-animation {
+  0% {
+    transform: rotate(0);
+  }
+  10% {
+    transform: rotate(14deg);
+  }
+  20% {
+    transform: rotate(-8deg);
+  }
+  30% {
+    transform: rotate(14deg);
+  }
+  40% {
+    transform: rotate(-4deg);
+  }
+  50% {
+    transform: rotate(10deg);
+  }
+  60% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(0);
+  }
+}
diff --git a/components/ui/TheHeader.vue b/components/ui/TheHeader.vue
index 5a1ad9d..69c26fd 100644
--- a/components/ui/TheHeader.vue
+++ b/components/ui/TheHeader.vue
@@ -3,6 +3,9 @@
     <div class="container flex justify-between items-center">
       <nuxt-link to="/" class="flex items-center">
         <Logo />
+        <h1 class="secondary-title ml-4">
+          Pablo Sirera
+        </h1>
       </nuxt-link>
       <div class="flex items-center">
         <ul class="text-center hidden sm:flex">
diff --git a/pages/index.vue b/pages/index.vue
index 963588a..1d2a1e3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,9 @@
     <section class="pb-10 items-center md:grid md:grid-cols-2 md:gap-4">
       <div>
         <!-- TODO: translate and change this text -->
-        <h1 class="text-3xl font-semibold">¡Hola 👋! soy Pablo Sirera.</h1>
+        <h1 class="text-3xl font-semibold">
+          Hola <span class="salute">👋</span>
+        </h1>
         <div class="h-2 w-24 bg-primary my-3 rounded" />
         <p>
           Soy Senior Frontend Developer actualmente enfocado al mundo del
@@ -94,4 +96,12 @@ export default {
     @apply rounded;
   }
 }
+
+.salute {
+  animation-name: wave-animation;
+  animation-duration: 2.5s;
+  animation-iteration-count: infinite;
+  transform-origin: 70% 70%;
+  display: inline-block;
+}
 </style>