fix: reveal index elements sequentially

package-lock.json

@@ -15,7 +15,7 @@
         "@fontsource-variable/outfit": "^5.2.5",
         "@fontsource-variable/red-hat-mono": "^5.2.5",
         "@tailwindcss/vite": "^4.0.9",
-        "astro": "^5.4.1",
+        "astro": "^5.4.2",
         "astro-icon": "^1.1.5",
         "npm-check-updates": "^17.1.15",
         "rehype-external-links": "^3.0.0",
@@ -25,7 +25,7 @@
       "devDependencies": {
         "@iconify-json/mdi": "^1.2.3",
         "@tailwindcss/typography": "^0.5.16",
-        "@types/node": "^22.13.8",
+        "@types/node": "^22.13.9",
         "prettier": "^3.5.3",
         "prettier-plugin-astro": "^0.14.1",
         "prettier-plugin-tailwindcss": "^0.6.11"
@@ -1953,9 +1953,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "22.13.8",
+      "version": "22.13.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.8.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.9.tgz",
-      "integrity": "sha512-G3EfaZS+iOGYWLLRCEAXdWK9my08oHNZ+FHluRiggIYJPOXzhOiDgpVCUHaUvyIC5/fj7C/p637jdzC666AOKQ==",
+      "integrity": "sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.20.0"
@@ -2269,9 +2269,9 @@
       }
     },
     "node_modules/astro": {
-      "version": "5.4.1",
+      "version": "5.4.2",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-5.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-5.4.2.tgz",
-      "integrity": "sha512-z9BiBz8pV7pZVn1evZv/9bJil3A9UZNyEjDFH3IjD87ioz95HHGLgbjRbbqF1EwSy8JOLKlMNyuQPqjrX8xqWw==",
+      "integrity": "sha512-9Z3fAniIRJaK/o43OroZA1wHUIU+qHiOR9ovlVT/2XQaN25QRXScIsKWlFp0G/zrx5OuuoJ+QnaoHHW061u26A==",
       "license": "MIT",
       "dependencies": {
         "@astrojs/compiler": "^2.10.4",
@@ -2307,7 +2307,7 @@
         "kleur": "^4.1.5",
         "magic-string": "^0.30.17",
         "magicast": "^0.3.5",
-        "mrmime": "^2.0.0",
+        "mrmime": "^2.0.1",
         "neotraverse": "^0.6.18",
         "p-limit": "^6.2.0",
         "p-queue": "^8.1.0",
@@ -2319,19 +2319,19 @@
         "shiki": "^1.29.2",
         "tinyexec": "^0.3.2",
         "tinyglobby": "^0.2.12",
-        "tsconfck": "^3.1.4",
+        "tsconfck": "^3.1.5",
         "ultrahtml": "^1.5.3",
         "unist-util-visit": "^5.0.0",
-        "unstorage": "^1.14.4",
+        "unstorage": "^1.15.0",
         "vfile": "^6.0.3",
         "vite": "^6.2.0",
-        "vitefu": "^1.0.5",
+        "vitefu": "^1.0.6",
         "which-pm": "^3.0.1",
         "xxhash-wasm": "^1.1.0",
         "yargs-parser": "^21.1.1",
-        "yocto-spinner": "^0.2.0",
+        "yocto-spinner": "^0.2.1",
-        "zod": "^3.24.1",
+        "zod": "^3.24.2",
-        "zod-to-json-schema": "^3.24.1",
+        "zod-to-json-schema": "^3.24.3",
         "zod-to-ts": "^1.2.0"
       },
       "bin": {

package.json

@@ -19,7 +19,7 @@
     "@fontsource-variable/outfit": "^5.2.5",
     "@fontsource-variable/red-hat-mono": "^5.2.5",
     "@tailwindcss/vite": "^4.0.9",
-    "astro": "^5.4.1",
+    "astro": "^5.4.2",
     "astro-icon": "^1.1.5",
     "npm-check-updates": "^17.1.15",
     "rehype-external-links": "^3.0.0",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@iconify-json/mdi": "^1.2.3",
     "@tailwindcss/typography": "^0.5.16",
-    "@types/node": "^22.13.8",
+    "@types/node": "^22.13.9",
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.11"

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>