space background for the main viewport - Follow Up Deployment

index.html

@@ -208,9 +208,25 @@
 
     <!-- Hero Section -->
     <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-16">
-        <div class="absolute inset-0 z-0">
-            <div class="absolute inset-0 bg-gradient-to-b from-black/80 to-black/20"></div>
-            <div class="absolute inset-0 opacity-20" style="background: url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop') center/cover;"></div>
+        <div class="absolute inset-0 z-0 overflow-hidden">
+            <!-- Starfield Background -->
+            <div id="starfield" class="absolute inset-0"></div>
+            
+            <!-- Nebula Gradient -->
+            <div class="absolute inset-0 bg-gradient-to-br from-purple-900/30 via-blue-900/20 to-black/80"></div>
+            
+            <!-- Subtle Space Texture -->
+            <div class="absolute inset-0 opacity-10" style="
+                background-image: radial-gradient(circle at center, 
+                    rgba(255,255,255,0.8) 0%, 
+                    transparent 70%);
+                background-size: 200% 200%;
+                animation: gradientPulse 30s infinite alternate;
+            "></div>
+            
+            <!-- Shooting Stars -->
+            <div class="shooting-star" style="top: 10%; left: 20%;"></div>
+            <div class="shooting-star" style="top: 30%; left: 80%; animation-delay: 3s;"></div>
         </div>
         
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
@@ -678,6 +694,30 @@
     </footer>
 
     <script>
+        // Create starfield
+        const starfield = document.getElementById('starfield');
+        if (starfield) {
+            const starsCount = 150;
+            for (let i = 0; i < starsCount; i++) {
+                const star = document.createElement('div');
+                star.classList.add('star');
+                
+                // Random star properties
+                const size = Math.random() * 2 + 1;
+                const x = Math.random() * 100;
+                const y = Math.random() * 100;
+                const opacity = Math.random() * 0.8 + 0.2;
+                
+                star.style.width = `${size}px`;
+                star.style.height = `${size}px`;
+                star.style.left = `${x}%`;
+                star.style.top = `${y}%`;
+                star.style.opacity = opacity;
+                
+                starfield.appendChild(star);
+            }
+        }
+        
         // Mobile menu toggle
         document.getElementById('mobile-menu-button').addEventListener('click', function() {
             const menu = document.getElementById('mobile-menu');