feat: add animation to salute

pablosirera · Nov 28, 2020 · 4c90677 · 4c90677
1 parent ac3137a
commit 4c90677
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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>