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/MilestonesSection.tsx

@@ -1,6 +1,4 @@
-'use client';
-
-import Image from 'next/image';
+import { ImageWithSkeleton } from './ImageWithSkeleton';
 import { ExternalLink } from 'lucide-react';
 import { getMilestones } from '@/data/milestones';
 import { messagesByLocale, type Locale } from '@/i18n/content';
@@ -12,7 +10,7 @@ export const MilestonesSection = ({ locale }: { locale: Locale }) => {
   const copy = messagesByLocale[locale].milestones;
 
   return (
-    <section id="milestones" className={styles.milestonesSection}>
+    <section id="milestones" className={styles.milestonesSection} data-deferred-render data-looping-motion>
       <div className="content-container">
         {/* Section Header */}
         <div className="section-header" data-reveal="soft">
@@ -29,11 +27,13 @@ export const MilestonesSection = ({ locale }: { locale: Locale }) => {
             <div key={item.id} className={styles.certCard}>
               {/* Thumbnail */}
               <div className={styles.thumbnailContainer} data-reveal="image">
-                <Image
-                  src={item.image}
+                <ImageWithSkeleton
+                  src={item.image.src}
                   alt={item.title}
                   fill
+                  sizes="(max-width: 650px) calc(100vw - 3rem), (max-width: 1024px) 44vw, 520px"
                   className={styles.certImage}
+                  skeletonShape="rounded"
                 />
               </div>