Add subtle animation on the homepage

package.json

@@ -24,6 +24,7 @@
     "astro-icon": "^1.1.5",
     "astro-seo": "^1.1.0",
     "sharp": "^0.35.1",
+    "tailwind-animations": "^1.0.1",
     "tailwindcss": "^4.3.1"
   }
 }

pnpm-lock.yaml

@@ -50,6 +50,9 @@ importers:
       sharp:
         specifier: ^0.35.1
         version: 0.35.1
+      tailwind-animations:
+        specifier: ^1.0.1
+        version: 1.0.1(tailwindcss@4.3.1)
       tailwindcss:
         specifier: ^4.3.1
         version: 4.3.1
@@ -2171,6 +2174,11 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
+  tailwind-animations@1.0.1:
+    resolution: {integrity: sha512-5ouCdgfGS4kcyuzRSb/1O3o9f5Akssi7ue46PHfKjvPLMWjtnzmqM8i6ElES3tKVTyhjSaTPfLti7aB7WSxhZg==}
+    peerDependencies:
+      tailwindcss: ^4.0.0
+
   tailwindcss@4.3.1:
     resolution: {integrity: sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q==}
 
@@ -5156,6 +5164,10 @@ snapshots:
       picocolors: 1.1.1
       sax: 1.6.0
 
+  tailwind-animations@1.0.1(tailwindcss@4.3.1):
+    dependencies:
+      tailwindcss: 4.3.1
+
   tailwindcss@4.3.1: {}
 
   tapable@2.3.3: {}

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+onlyBuiltDependencies:
+  - esbuild
+  - sharp

src/pages/index.astro

@@ -12,11 +12,18 @@ import { personJsonLd } from "@/utils/seo";
   title="Marios Antonoudiou — AI Product Engineer"
   description="AI product engineer building AI-powered products that feel simple, useful, and ready for real users."
   withNav={false}
-  jsonLd={personJsonLd()}
+  jsonLd={personJsonLd()}>
->
   <HomeIntroduction />
+  <div class="animate-fade-in animate-delay-150">
     <HomeLatestArticle />
-  <HomeBeenWorkingWith />
+  </div>
-  <HomePersonalProjects />
+  <div class="animate-fade-in animate-delay-250">
+    <HomeBeenWorkingWith class="animate-fade-in animate-delay-150" />
+  </div>
+  <div class="animate-fade-in animate-delay-350">
+    <HomePersonalProjects class="animate-fade-in animate-delay-150" />
+  </div>
+  <div class="animate-fade-in animate-delay-450">
     <HomeConnect />
+  </div>
 </Layout>

src/styles/global.css

@@ -1,4 +1,5 @@
-@import 'tailwindcss';
+@import "tailwindcss";
+@import "tailwind-animations";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -7,7 +8,7 @@
 @theme {
   --font-sans:
     Inter Variable, Inter, ui-sans-serif, system-ui, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 @layer base {