fix: update Simple Icons slugs & show actual project screenshots when available

Author: Klaynight-dev

src/App.svelte

@@ -58,6 +58,13 @@
   const getProjectImage = (imageName: string) => {
     return projectImageMap[imageName] || defaultMetaImg;
   };
+
+  const screenshotMap: Record<string, string> = {
+    "plinkk.png": plinkkImg,
+    "HubGames.jpeg": hubgamesImg,
+    "Jobi.png": jobiImg,
+    "DA Site JO.png": joSurfImg
+  };
   
   // Tab state (only active in Preset mode)
   let activeTab = $state("about"); // 'about', 'resume', 'portfolio', 'contact'
@@ -330,7 +337,7 @@
                     <div class="px-3 pt-3 pb-6 bg-white border border-slate-250 shadow-md rotate-[-1deg] mx-4 mt-5 mb-1 relative border-sketch z-10">
                       <div class="tape-torn tape-{tapes[(i + 2) % tapes.length]} absolute top-[-8px] left-[25%] w-14 h-4.5 rotate-[-2deg] opacity-75"></div>
                       <div class="w-full h-32 md:h-36 overflow-hidden bg-slate-50 border border-slate-200">
-                        <ProjectMockup category={project.category} />
+                        <ProjectMockup category={project.category} image={screenshotMap[project.image]} />
                       </div>
                     </div>
 

src/lib/components/PresetView.svelte

@@ -17,6 +17,12 @@
   import bootstrapLogo from "../../../assets/images/Bootstrap.svg";
   import tailwindLogo from "../../../assets/images/Tailwind.svg.png";
 
+  // Import project screenshots for Vite static bundling
+  import plinkkImg from "../../../assets/images/plinkk.png";
+  import hubgamesImg from "../../../assets/images/HubGames.jpeg";
+  import jobiImg from "../../../assets/images/Jobi.png";
+  import joSurfImg from "../../../assets/images/DA Site JO.png";
+
   const logoMap: Record<string, string> = {
     "Postgresql_elephant.png": pgLogo,
     "MySQL.svg": mySqlLogo,
@@ -30,6 +36,13 @@
     "Tailwind.svg.png": tailwindLogo
   };
 
+  const screenshotMap: Record<string, string> = {
+    "plinkk.png": plinkkImg,
+    "HubGames.jpeg": hubgamesImg,
+    "Jobi.png": jobiImg,
+    "DA Site JO.png": joSurfImg
+  };
+
   // Filter featured projects for preset view
   const featuredProjects = projects.filter(p => p.featured);
 </script>
@@ -98,7 +111,7 @@
           <div class="px-2.5 pt-2.5 pb-5 bg-white border border-slate-200 shadow-md rotate-[1.5deg] mx-4 mt-5 mb-1 relative border-sketch z-10">
             <div class="tape-torn {['tape-pink', 'tape-green', 'tape-orange'][i % 3]} absolute top-[-8px] left-[30%] w-12 h-4 rotate-[1deg] opacity-75"></div>
             <div class="w-full h-28 overflow-hidden bg-slate-50 border border-slate-200">
-              <ProjectMockup category={project.category} />
+              <ProjectMockup category={project.category} image={screenshotMap[project.image]} />
             </div>
           </div>
 
@@ -173,7 +186,7 @@
                 {#if skill.type === 'img' && skill.icon && logoMap[skill.icon]}
                   <img src={logoMap[skill.icon]} alt={skill.name} class="w-4 h-4 object-contain shrink-0" />
                 {:else if skill.type === 'cdn' && skill.icon}
-                  <img src="https://cdn.simpleicons.org/{skill.icon}" alt={skill.name} class="w-4 h-4 object-contain shrink-0" />
+                  <img src={skill.icon.startsWith('http') ? skill.icon : `https://cdn.simpleicons.org/${skill.icon}`} alt={skill.name} class="w-4 h-4 object-contain shrink-0" />
                 {:else}
                   <span class="text-[var(--marker-color)] shrink-0 flex items-center justify-center">
                     <Papicon icon={skill.icon || 'code'} size={13} />

src/lib/components/ProjectMockup.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-  let { category = "" }: { category?: string } = $props();
+  let { category = "", image = "" }: { category?: string; image?: string } = $props();
 </script>
 
-{#if category === "Web Development"}
+{#if image}
+  <img src={image} alt="Aperçu du projet" class="w-full h-full object-cover" />
+{:else if category === "Web Development"}
   <!-- Whiteboard Browser Mockup SVG -->
   <svg viewBox="0 0 200 120" class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
     <!-- Outer window border -->

src/lib/data/resume.ts

@@ -148,7 +148,7 @@ export const skillCategories: SkillCategory[] = [
       { name: "Angular", icon: "angular", type: "cdn" },
       { name: "Next.js", icon: "nextdotjs", type: "cdn" },
       { name: "HTML5", icon: "html5", type: "cdn" },
-      { name: "CSS3", icon: "css3", type: "cdn" },
+      { name: "CSS3", icon: "css", type: "cdn" },
       { name: "JavaScript", icon: "javascript", type: "cdn" },
       { name: "TailwindCSS", icon: "tailwindcss", type: "cdn" },
       { name: "Bootstrap", icon: "bootstrap", type: "cdn" }
@@ -193,9 +193,9 @@ export const skillCategories: SkillCategory[] = [
     name: "Design & Outils",
     skills: [
       { name: "Figma", icon: "figma", type: "cdn" },
-      { name: "Canva", icon: "canva", type: "cdn" },
+      { name: "Canva", icon: "https://cdn.jsdelivr.net/npm/simple-icons@14.0.0/icons/canva.svg", type: "cdn" },
       { name: "GlooMaps", icon: "map-pin", type: "lucide" },
-      { name: "Suite Microsoft Office", icon: "microsoft", type: "cdn" },
+      { name: "Suite Microsoft Office", icon: "https://cdn.jsdelivr.net/npm/simple-icons@11.0.0/icons/microsoft.svg", type: "cdn" },
       { name: "Scene Builder", icon: "layout", type: "lucide" },
       { name: "Visual Paradigm", icon: "layers", type: "lucide" },
       { name: "Git", icon: "git", type: "cdn" }