wip

src/pages/index.astro

@@ -18,8 +18,29 @@ const allTags = [...new Set(allPosts.flatMap(post => post.tags))];
   <!-- Everything on ONE minimalist page -->
 
   <!-- Clean Hero Section -->
-  <section class="pt-10 pb-8 md:pt-12 md:pb-10">
+  <section class="pt-10 pb-8 md:pt-12 md:pb-10 relative">
-    <div class="max-w-3xl mx-auto px-6">
+    <!-- Animated Background -->
+    <div class="absolute inset-0 bg-gradient-to-br from-white via-slate-50/30 to-blue-50/20 animate-gradient-shift"></div>
+
+    <!-- Morphing Blob -->
+    <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
+      <div class="w-48 h-48 bg-gradient-to-br from-blue-200/15 via-purple-200/10 to-indigo-200/15 animate-morph"></div>
+    </div>
+
+    <!-- Animated Drawing Paths -->
+    <svg class="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 100 100">
+      <path d="M10,50 Q50,10 90,50 T90,90" stroke="rgba(59,130,246,0.1)" stroke-width="0.5" fill="none" class="animate-draw"></path>
+      <path d="M10,70 Q50,30 90,70" stroke="rgba(147,51,234,0.1)" stroke-width="0.5" fill="none" class="animate-draw-delay"></path>
+      <path d="M20,20 Q50,80 80,20" stroke="rgba(16,185,129,0.1)" stroke-width="0.5" fill="none" class="animate-draw-reverse"></path>
+    </svg>
+
+    <!-- Floating Shapes -->
+    <div class="absolute top-10 left-10 w-20 h-20 bg-blue-100/20 rounded-full animate-float-1"></div>
+    <div class="absolute top-20 right-20 w-16 h-16 bg-indigo-100/20 rotate-45 animate-float-2"></div>
+    <div class="absolute bottom-20 left-1/4 w-12 h-12 bg-purple-100/20 rounded-full animate-float-3"></div>
+    <div class="absolute bottom-10 right-1/3 w-24 h-24 bg-cyan-100/20 animate-float-4"></div>
+
+    <div class="max-w-3xl mx-auto px-6 relative z-10">
       <div class="text-center animate-fade-in">
         <h1 class="text-3xl md:text-4xl font-serif font-light text-slate-900 tracking-tight mb-3">
           Marc Mintel
@@ -180,6 +201,23 @@ const allTags = [...new Set(allPosts.flatMap(post => post.tags))];
           const slug = link.getAttribute('data-slug');
           const title = link.getAttribute('data-title');
 
+          // Capture title position for layout animation
+          const titleElement = link.querySelector('[data-post-title]') as HTMLElement;
+          if (titleElement && slug) {
+            const rect = titleElement.getBoundingClientRect();
+            const titleData = {
+              text: titleElement.textContent || '',
+              x: rect.left,
+              y: rect.top,
+              width: rect.width,
+              height: rect.height,
+              fontSize: window.getComputedStyle(titleElement).fontSize,
+              fontWeight: window.getComputedStyle(titleElement).fontWeight,
+              color: window.getComputedStyle(titleElement).color
+            };
+            sessionStorage.setItem(`title-position-${slug}`, JSON.stringify(titleData));
+          }
+
           // Add click ripple effect to the card
           const card = link.querySelector('.post-card') as HTMLElement;
           if (card) {
@@ -396,5 +434,100 @@ const allTags = [...new Set(allPosts.flatMap(post => post.tags))];
         transition-duration: 0.01ms !important;
       }
     }
+
+    /* Animated gradient shift */
+    @keyframes gradient-shift {
+      0%, 100% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+    }
+
+    .animate-gradient-shift {
+      background-size: 200% 200%;
+      animation: gradient-shift 20s ease infinite;
+    }
+
+    /* Floating animations */
+    @keyframes float-1 {
+      0%, 100% { transform: translateY(0px) rotate(0deg); }
+      50% { transform: translateY(-20px) rotate(180deg); }
+    }
+
+    .animate-float-1 {
+      animation: float-1 15s ease-in-out infinite;
+    }
+
+    @keyframes float-2 {
+      0%, 100% { transform: translateY(0px) rotate(0deg); }
+      50% { transform: translateY(-15px) rotate(90deg); }
+    }
+
+    .animate-float-2 {
+      animation: float-2 18s ease-in-out infinite;
+    }
+
+    @keyframes float-3 {
+      0%, 100% { transform: translateY(0px) scale(1); }
+      50% { transform: translateY(-10px) scale(1.1); }
+    }
+
+    .animate-float-3 {
+      animation: float-3 12s ease-in-out infinite;
+    }
+
+    @keyframes float-4 {
+      0%, 100% { transform: translateY(0px) rotate(0deg); }
+      50% { transform: translateY(-25px) rotate(-90deg); }
+    }
+
+    .animate-float-4 {
+      animation: float-4 20s ease-in-out infinite;
+    }
+
+    /* Morphing blob animation */
+    @keyframes morph {
+      0%, 100% {
+        border-radius: 50%;
+        transform: scale(1) rotate(0deg);
+      }
+      25% {
+        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+        transform: scale(1.1) rotate(90deg);
+      }
+      50% {
+        border-radius: 20% 80% 20% 80% / 80% 20% 80% 20%;
+        transform: scale(0.9) rotate(180deg);
+      }
+      75% {
+        border-radius: 70% 30% 50% 50% / 50% 70% 30% 50%;
+        transform: scale(1.05) rotate(270deg);
+      }
+    }
+
+    .animate-morph {
+      animation: morph 25s ease-in-out infinite;
+    }
+
+    /* Drawing animations */
+    @keyframes draw {
+      to { stroke-dashoffset: 0; }
+    }
+
+    .animate-draw {
+      stroke-dasharray: 200;
+      stroke-dashoffset: 200;
+      animation: draw 8s ease-in-out infinite alternate;
+    }
+
+    .animate-draw-delay {
+      stroke-dasharray: 200;
+      stroke-dashoffset: 200;
+      animation: draw 8s ease-in-out infinite alternate 4s;
+    }
+
+    .animate-draw-reverse {
+      stroke-dasharray: 200;
+      stroke-dashoffset: 200;
+      animation: draw 8s ease-in-out infinite alternate-reverse 2s;
+    }
   </style>
 </BaseLayout>