upgrade to different layout

2025-06-08 16:02:39 -05:00
parent e1632629a9
commit 3e89e6cb1c
75 changed files with 8314 additions and 2884 deletions
--- a/src/components/Background.astro
+++ b/src/components/Background.astro
@@ -0,0 +1,93 @@
+---
+// Background.astro - Dot pattern and ambient glow background with smooth theme transitions
+---
+
+<div class="fixed inset-0 -z-10 overflow-hidden theme-transition-all">
+  <!-- Dot pattern background -->
+  <div class="absolute inset-0 bg-grid-pattern bg-[center_top_-1px] [mask-image:radial-gradient(white,transparent_85%)] theme-transition-bg"></div>
+  
+  <!-- Ambient glow effects -->
+  <div class="absolute left-1/4 top-1/4 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-zinc-400/20 dark:bg-zinc-500/20 rounded-full blur-3xl opacity-50 animate-glow theme-transition-bg"></div>
+  <div class="absolute right-1/4 bottom-1/3 translate-x-1/2 translate-y-1/2 w-64 h-64 bg-zinc-300/20 dark:bg-zinc-600/20 rounded-full blur-3xl opacity-40 animate-glow animation-delay-1000 theme-transition-bg"></div>
+  
+  <!-- Theme transition overlay -->
+  <div id="theme-transition-overlay" class="absolute inset-0 bg-white dark:bg-zinc-900 opacity-0 pointer-events-none"></div>
+</div>
+
+<script>
+  // Theme transition script
+  document.addEventListener('DOMContentLoaded', () => {
+    const themeToggle = document.querySelector('[data-theme-toggle]');
+    const overlay = document.getElementById('theme-transition-overlay');
+    
+    if (themeToggle && overlay) {
+      themeToggle.addEventListener('click', () => {
+        // Add transitioning class to optimize performance
+        document.documentElement.classList.add('theme-transitioning');
+        
+        // Fade in overlay
+        overlay.style.opacity = '0.15';
+        overlay.style.transition = 'opacity 0.3s ease';
+        
+        setTimeout(() => {
+          // Fade out overlay
+          overlay.style.opacity = '0';
+          
+          // Remove transitioning class after animation completes
+          setTimeout(() => {
+            document.documentElement.classList.remove('theme-transitioning');
+          }, 700);
+        }, 300);
+      });
+    }
+  });
+</script>
+
+<style>
+  /* Grid pattern for dots */
+  .bg-grid-pattern {
+    background-size: 24px 24px;
+    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.15) 1px, transparent 1px);
+    transition: background-image 0.7s cubic-bezier(0.65, 0, 0.35, 1);
+  }
+  
+  /* Dark mode version */
+  :global(.dark) .bg-grid-pattern {
+    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+  }
+  
+  /* Ambient glow animations */
+  .animate-glow {
+    animation: glow 12s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    transition: background-color 0.7s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1);
+  }
+  
+  .animation-delay-1000 {
+    animation-delay: 1s;
+  }
+  
+  @keyframes glow {
+    0%, 100% {
+      opacity: 0.4;
+      transform: translate(0, 0) scale(1);
+    }
+    25% {
+      opacity: 0.5;
+      transform: translate(5%, 5%) scale(1.1);
+    }
+    50% {
+      opacity: 0.3;
+      transform: translate(0, 10%) scale(0.95);
+    }
+    75% {
+      opacity: 0.5;
+      transform: translate(-5%, 5%) scale(1.05);
+    }
+  }
+  
+  /* Theme transition overlay */
+  #theme-transition-overlay {
+    transition: opacity 0.3s ease;
+    z-index: 10;
+  }
+</style>