Resolves: Improve Mobile Responsiveness

src/controllers/galaxy_controller.js

@@ -72,10 +72,26 @@ export default class extends Controller {
   resizeCanvas() {
     if (!this.canvas) return
 
-    // Use element's client dimensions for better mobile viewport handling
+    // Use container dimensions but ensure they don't exceed viewport
     const container = this.canvas.parentElement
-    this.canvas.width = container.clientWidth || window.innerWidth
-    this.canvas.height = container.clientHeight || window.innerHeight
+    const containerWidth = container.clientWidth
+    const containerHeight = container.clientHeight
+
+    // On mobile, ensure canvas doesn't exceed viewport width
+    const isMobile = window.innerWidth <= 768
+    const width = isMobile ? Math.min(containerWidth, window.innerWidth) : containerWidth
+    const height = containerHeight
+
+    // Set canvas size with device pixel ratio for crisp rendering
+    const dpr = window.devicePixelRatio || 1
+    this.canvas.width = width * dpr
+    this.canvas.height = height * dpr
+    this.ctx.scale(dpr, dpr)
+
+    // Set CSS size to maintain proper display
+    this.canvas.style.width = width + 'px'
+    this.canvas.style.height = height + 'px'
+
   }
 
   createParticles() {
@@ -309,9 +325,17 @@ export default class extends Controller {
 
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
 
-    this.updateParticles()
+    // Reduce update frequency during scroll for better performance
+    const shouldUpdate = !this.isScrolling || (performance.now() - (this.lastScrollUpdate || 0)) > 100
+
+    if (shouldUpdate) {
+      this.updateParticles()
+      if (this.isScrolling) {
+        this.lastScrollUpdate = performance.now()
+      }
+    }
+
     this.drawParticles()
-
     this.animationId = requestAnimationFrame(() => this.animate())
   }
 
@@ -335,17 +359,25 @@ export default class extends Controller {
   }
 
   handleScroll() {
-    this.isScrolling = true
+
+    // Don't pause animation completely - instead reduce update frequency
+    if (!this.isScrolling) {
+      this.isScrolling = true
+      this.scrollStartTime = performance.now()
+    }
+
 
     // Clear previous timeout
     if (this.scrollTimeout) {
       clearTimeout(this.scrollTimeout)
     }
 
-    // Resume animation after scroll ends
+
+    // Resume normal animation after scroll ends
     this.scrollTimeout = setTimeout(() => {
       this.isScrolling = false
-    }, 150)
+    }, 100)
+
   }
 
   handleThemeChange() {

src/pages/index.astro

@@ -38,7 +38,7 @@ Lux     # For Neovim`;
     </div>
 
     <!-- Hero Content -->
-    <div class="relative z-10 flex flex-col items-center justify-center min-h-screen text-center px-6 pt-0 md:pt-6">
+    <div class="relative z-10 flex flex-col items-center justify-center min-h-screen text-center px-4 sm:px-6 pt-0 md:pt-6">
       <!-- Status Badge -->
       <div class="mt-20">
         <span

src/styles/global.css

@@ -25,6 +25,26 @@
   transform: translateZ(0);
 }
 
+/* Mobile viewport fixes */
+@media screen and (max-width: 768px) {
+  body {
+    overflow-x: hidden;
+  }
+
+  /* Ensure galaxy backgrounds fill viewport on mobile */
+  #galaxy-background, #galaxy-background-cta {
+    min-width: 100vw;
+    min-height: 100vh;
+  }
+
+  /* Prevent canvas from creating horizontal scrollbars */
+  #galaxy-canvas, #galaxy-canvas-cta {
+    max-width: 100vw;
+    object-fit: cover;
+  }
+
+}
+
 /* Smooth transitions for theme changes */
 .transition-colors {
   transition: background-color 0.3s ease, color 0.3s ease;