perf: optimize portfolio runtime delivery

Replace the blocking asset loader with progressive rendering, defer expensive media and Three.js work, and reduce hydration and animation costs. Move deployment from a static Nginx export to the standalone Next.js runtime with optimized dynamic images.

src/components/scenes/Scenes.module.css

@@ -44,6 +44,29 @@
   z-index: 0;
 }
 
+.aboutSceneBoundary {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.sceneSkeleton {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(100deg, transparent 24%, color-mix(in srgb, var(--bg-raised) 68%, transparent) 50%, transparent 76%),
+    var(--bg-page);
+  background-size: 200% 100%, auto;
+  animation: sceneSkeletonShimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes sceneSkeletonShimmer {
+  to {
+    background-position: -200% 0, 0 0;
+  }
+}
+
 .aboutScene::after {
   content: '';
   position: absolute;
@@ -61,12 +84,21 @@
     height: 40rem;
   }
 
+  .aboutSceneBoundary {
+    bottom: auto;
+    height: 40rem;
+  }
+
   .aboutScene canvas {
     opacity: 0.56;
   }
 }
 
 @media (min-width: 1441px) {
+  .aboutSceneBoundary {
+    overflow: visible;
+  }
+
   .aboutScene {
     overflow: visible;
     left: 50%;
@@ -82,3 +114,9 @@
     width: 100vw;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .sceneSkeleton {
+    animation: none;
+  }
+}