Animation on home tab

Portfolio/home.html

@@ -36,15 +36,21 @@
             <h1>Hi, I'm <span>Brian Kimanzi</span><span class="animate" style="--i:2;"></span></h1>
             <div class="text-animate">
             <h3>Data Analyst</h3>
+            <span class="animate" style="--i:3;"></span>
         </div>
         <p>Driven data analysis student with a passion for uncovering
              insights from information. Skilled in [list 2-3 relevant 
              tools like Excel, SQL, Python] and eager to leverage data to 
-             solve real-world problems.</p>
+             solve real-world problems.
+             <span class="animate" style="--i:4;"></span>
+
+            </p>
 
              <div class="btn-box">
                 <a href="#" class="btn">Hire me</a>
                 <a href="#" class="btn"> Let's Talk</a>
+                <span class="animate" style="--i:5;"></span>
+
 
              </div>
             </div>

Portfolio/style.css

@@ -92,6 +92,8 @@ section {
 }
 
 .home-content h1 {
+    position: relative;
+    display: inline-block;
     font-size: 5.6rem;
     font-weight: 700;
     line-height: 1.3;
@@ -682,7 +684,8 @@ span {
 
 .logo .animate, 
 .navbar .animate,
-#menu-icon .animate{
+#menu-icon .animate,
+.home.show-animate .animate{
     animation: showRight 1s ease forwards;
     animation-delay: calc(.3s * var(--i));
 }