From 1fff7e07046bf335e7b4e325311998c81b495286 Mon Sep 17 00:00:00 2001
From: Marios Antonoudiou <mariosant@sent.com>
Date: Tue, 16 Jun 2026 23:19:14 +0300
Subject: [PATCH] Add subtle animation on the homepage

---
 package.json          |  1 +
 pnpm-lock.yaml        | 12 ++++++++++++
 pnpm-workspace.yaml   |  3 +++
 src/pages/index.astro | 19 +++++++++++++------
 src/styles/global.css |  5 +++--
 5 files changed, 32 insertions(+), 8 deletions(-)
 create mode 100644 pnpm-workspace.yaml

diff --git a/package.json b/package.json
index 7fae816..c51ba24 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 24bf2f2..45c0b31 100644
--- a/pnpm-lock.yaml
+++ b/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: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..d0b7dbe
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+onlyBuiltDependencies:
+  - esbuild
+  - sharp
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c057afa..7ec0eeb 100644
--- a/src/pages/index.astro
+++ b/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 />
-  <HomeLatestArticle />
-  <HomeBeenWorkingWith />
-  <HomePersonalProjects />
-  <HomeConnect />
+  <div class="animate-fade-in animate-delay-150">
+    <HomeLatestArticle />
+  </div>
+  <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>
diff --git a/src/styles/global.css b/src/styles/global.css
index 549b70c..2e4205a 100644
--- a/src/styles/global.css
+++ b/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 {