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/data/skills.ts

@@ -11,7 +11,7 @@ export interface SkillCategory {
 export interface ToolItem {
   id: string;
   name: string;
-  icon: string;
+  icon: PortfolioImage;
 }
 
 export interface SkillDiscipline {
@@ -28,13 +28,13 @@ export interface FilterTab {
 const tool = (id: string, name: string, icon = id): ToolItem => ({
   id,
   name,
-  icon: `/images/tools/${icon}.png`,
+  icon: portfolioImage(`/images/tools/${icon}.png`, 72, 72),
 });
 
 const placeholderTool = (id: string, name: string): ToolItem => ({
   id,
   name,
-  icon: `/images/tools/${id}.png`,
+  icon: portfolioImage(`/images/tools/${id}.png`, 72, 72),
 });
 
 export const skillsByDiscipline: Record<DisciplineId, SkillDiscipline> = {
@@ -241,3 +241,4 @@ export const filterTabs: FilterTab[] = [
   { id: 'product-management', label: 'Product Management' },
   { id: 'design-ux', label: 'Design & UX' },
 ];
+import { portfolioImage, type PortfolioImage } from '@/types/media';