fix: reveal index elements sequentially

src/components/Hero.astro

@@ -1,11 +1,13 @@
-<section class="animate-reveal flex flex-col gap-6 opacity-0">
+<section class="flex flex-col gap-6">
   <h1
-    class="flex w-full flex-col text-start text-7xl leading-[1] font-semibold tracking-[-2px] lowercase"
+    class="animate-reveal flex w-full flex-col text-start text-7xl leading-[1] font-semibold tracking-[-2px] lowercase opacity-0"
   >
     <span class="text-nowrap">Troy Lusty</span>
     <span class="text-tertiary text-pretty">Digital Designer</span>
   </h1>
-  <div class="text-secondary/70 text-lg font-medium">
+  <div
+    class="text-secondary/70 animate-reveal text-lg font-medium opacity-0 [animation-delay:0.1s]"
+  >
     I am in my final year of studying on a Game Arts and Design BA (Hons) degree
     and on the side I manage online operations for a family run
     <a
@@ -14,7 +16,9 @@
       >outdoor apparel business</a
     >.
   </div>
-  <div class="text-tertiary text-lg font-medium">
+  <div
+    class="text-tertiary animate-reveal text-lg font-medium opacity-0 [animation-delay:0.2s]"
+  >
     Think I could help with a project you're working on?
     <a
       href="mailto:hello@troylusty.com"

src/pages/index.astro

@@ -14,7 +14,7 @@ const projects = allProjects
 
 <Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
   <Hero />
-  <section class="animate-reveal opacity-0 [animation-delay:0.1s]">
+  <section class="animate-reveal opacity-0 [animation-delay:0.3s]">
     <Slideshow images={projects} />
   </section>
 </Layout>