(Feat) hidden animation on title (#2)

* Adding small animation on NX title on hover

* Creating the author component

src/components/Author.astro

@@ -0,0 +1,18 @@
+---
+interface Props {
+    name: string
+}
+
+const { name } = Astro.props
+---
+
+<p>
+    {name}
+</p>
+
+<style>
+    p {
+        font-family: "Pixelify Sans", sans-serif;
+        font-size: 1.5rem;
+    }
+</style>

src/pages/index.astro

@@ -4,7 +4,9 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 
 <BaseLayout>
   <main>
-    <h1>NX Academy</h1>
+    <h1>
+      <span class="first-letter">N</span><span class="second-letter">X</span> Academy
+    </h1>
     <p>Passez au niveau supérieur</p>
     <div class="buttons-wrapper">
       <a class="btn-secondary" href="https://github.com/nx-academy/nx-academy.github.io" target="_blank">Suivre le projet sur GitHub</a>
@@ -31,6 +33,28 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     color: #FEFEFE;
   }
 
+  h1:hover .first-letter {
+    animation: change-color .8s ease-out infinite;
+  }
+
+  h1:hover .second-letter {
+    animation: change-color .8s ease-out .4s infinite;
+  }
+
+  @keyframes change-color {
+    0% {
+      color: #FEFEFE;
+    }
+
+    50% {
+      color: #4effa0;
+    }
+
+    100% {
+      color: #FEFEFE;
+    }
+  }
+
   p {
     font-size: 1.25rem;
     margin-top: 0;