Adds a cool animation

Author: ggteixeira

src/pages/index.astro

@@ -8,7 +8,7 @@ import TwinklingStars from "@components/TwinklingStars.astro"
 import MeteorShower from "@components/MeteorShower.astro"
 // import About from "@components/About.tsx"
 
-const homeTitle = "and I am a Software"
+const homeTitle = "and I am a"
 
 const posts = (await getCollection("blog"))
   .filter(post => !post.data.draft)
@@ -69,6 +69,25 @@ const posts = (await getCollection("blog"))
   </div>
 
   <script is:inline src="/js/bg.js"></script>
+
+<style>
+@keyframes strike {
+  from { width: 0; }
+  to { width: 100%; }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 0.75;
+    transform: translateY(0);
+  }
+}
+
+</style>
 
   <!-- HERO -->
   <section class="relative h-screen w-full">
@@ -82,15 +101,24 @@ const posts = (await getCollection("blog"))
     <div class="animate absolute h-full w-full flex items-center justify-center">
       <div class='relative w-full h-full flex items-center justify-center'>
         <div class='p-5 text-center'>
+
+
           <p class='animated text-lg md:text-xl lg:text-2xl font-semibold opacity-75'>
             Hello, my name is
           </p>
+
           <p class='animated text-2xl md:text-3xl lg:text-4xl font-bold uppercase text-black dark:text-white'>
             Guilherme Teixeira
           </p>
-          <p class='animated text-sm md:text-base lg:text-lg opacity-75'>
-            {homeTitle} <span class="line-through">Developer</span>{' '}<span>Artisan</span>
-          </p>
+
+          <span class='animated text-sm md:text-base lg:text-lg opacity-75'>{homeTitle}</span>
+          <div class="animated inline-block relative h-full items-center justify-center text-sm md:text-base lg:text-lg opacity-75">
+             Software Developer 
+            <span class="absolute left-0 top-1/2 h-[2px] bg-red-500 animate-[strike_0.6s_ease-out_1.5s_forwards]"></span>
+          </div>
+
+          <span class="animate-[fadeInUp_0.6s_ease-out_3.0s_forwards] text-sm md:text-base lg:text-lg opacity-0">Software Artisan</span>
+
           <div id="ctaButtons" class='animated flex flex-wrap gap-4 justify-center mt-5'>
             <a href='/blog' class='py-2 px-4 rounded truncate text-xs md:text-sm lg:text-base bg-black dark:bg-white text-white dark:text-black hover:opacity-75 blend'>
               Read my digital garden