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

@@ -1,4 +1,4 @@
-import Image from 'next/image';
+import { ImageWithSkeleton } from './ImageWithSkeleton';
 import { getEducation } from '@/data/education';
 import { messagesByLocale, type Locale } from '@/i18n/content';
 import styles from './EducationSection.module.css';
@@ -8,7 +8,7 @@ export const EducationSection = ({ locale }: { locale: Locale }) => {
   const copy = messagesByLocale[locale].education;
 
   return (
-    <section id="education" className={styles.educationSection}>
+    <section id="education" className={styles.educationSection} data-deferred-render data-looping-motion>
       <div className="content-container">
         <div className="section-header" data-reveal="soft">
           <div className="section-title-wrap">
@@ -21,12 +21,13 @@ export const EducationSection = ({ locale }: { locale: Locale }) => {
         <div className={styles.card} data-reveal-group>
           <div className={styles.crestCol} data-reveal="image">
             <div className={styles.crestContainer}>
-              <Image
-                src={education.logo}
+              <ImageWithSkeleton
+                src={education.logo.src}
                 alt={education.institution}
-                width={264}
-                height={192}
+                fill
+                sizes="(max-width: 650px) 12rem, 16.5rem"
                 className={styles.crestImage}
+                skeletonShape="rounded"
               />
             </div>
           </div>