From e593938110d510bbb96d1721555c3131acecf70d Mon Sep 17 00:00:00 2001
From: Thomas Dimnet <thomas.dimnet@gmail.com>
Date: Mon, 5 Aug 2024 14:03:13 -0400
Subject: [PATCH] (Feat) hidden animation on title (#2)

* Adding small animation on NX title on hover

* Creating the author component
---
 src/components/Author.astro | 18 ++++++++++++++++++
 src/pages/index.astro       | 26 +++++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Author.astro

diff --git a/src/components/Author.astro b/src/components/Author.astro
new file mode 100644
index 0000000..c842ee0
--- /dev/null
+++ b/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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 76c4c7c..d0f8822 100644
--- a/src/pages/index.astro
+++ b/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;