From ea9ba687a8742bf0677b4d95fdef6b4890d4b29e Mon Sep 17 00:00:00 2001
From: kinou-p <alexpomms@gmail.com>
Date: Thu, 2 Oct 2025 14:12:10 +0200
Subject: [PATCH] added tech logo

---
 src/components/ProjectCard.tsx              | 31 ++++++++-
 src/components/SkillBadge.tsx               |  9 ++-
 src/components/sections/ProjectsSection.tsx |  2 +
 src/components/sections/SkillsSection.tsx   | 76 ++++++++++++++++++---
 src/data/projects.ts                        | 70 +++++++++----------
 src/pages/ProjectPage.tsx                   |  1 +
 6 files changed, 140 insertions(+), 49 deletions(-)

diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index 1eac8fb..1f51e78 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -7,11 +7,12 @@ interface ProjectCardProps {
   description: string;
   icon: React.ReactNode;
   image?: string;
+  technologies?: { name: string; iconUrl?: string }[];
   delay?: number;
   projectId?: string;
 }
 
-export const ProjectCard = ({ title, description, icon, image, delay = 0, projectId }: ProjectCardProps) => {
+export const ProjectCard = ({ title, description, icon, image, technologies, delay = 0, projectId }: ProjectCardProps) => {
   const navigate = useNavigate();
 
   const handleClick = () => {
@@ -47,9 +48,35 @@ export const ProjectCard = ({ title, description, icon, image, delay = 0, projec
           <CardTitle className="text-xl pr-20">{title}</CardTitle>
         </CardHeader>
         <CardContent>
-          <CardDescription className="text-base leading-relaxed">
+          <CardDescription className="text-base leading-relaxed mb-4">
             {description}
           </CardDescription>
+          {technologies && technologies.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {technologies.slice(0, 6).map((tech, index) => (
+                <div
+                  key={tech.name}
+                  className="w-8 h-8 rounded bg-background/50 p-1.5 flex items-center justify-center"
+                  title={tech.name}
+                >
+                  {tech.iconUrl ? (
+                    <img 
+                      src={tech.iconUrl} 
+                      alt={tech.name}
+                      className="w-full h-full object-contain"
+                    />
+                  ) : (
+                    <span className="text-xs">?</span>
+                  )}
+                </div>
+              ))}
+              {technologies.length > 6 && (
+                <div className="w-8 h-8 rounded bg-background/50 flex items-center justify-center text-xs text-muted-foreground">
+                  +{technologies.length - 6}
+                </div>
+              )}
+            </div>
+          )}
         </CardContent>
       </Card>
     </motion.div>
diff --git a/src/components/SkillBadge.tsx b/src/components/SkillBadge.tsx
index 38e0801..a69a0b1 100644
--- a/src/components/SkillBadge.tsx
+++ b/src/components/SkillBadge.tsx
@@ -4,11 +4,12 @@ import { Badge } from "@/components/ui/badge";
 interface SkillBadgeProps {
   name: string;
   icon?: string;
+  iconUrl?: string;
   color?: string;
   delay?: number;
 }
 
-export const SkillBadge = ({ name, icon, color = "default", delay = 0 }: SkillBadgeProps) => {
+export const SkillBadge = ({ name, icon, iconUrl, color = "default", delay = 0 }: SkillBadgeProps) => {
   return (
     <motion.div
       initial={{ opacity: 0, scale: 0.8 }}
@@ -21,7 +22,11 @@ export const SkillBadge = ({ name, icon, color = "default", delay = 0 }: SkillBa
         variant="secondary"
         className="text-base py-2 px-4 font-medium hover:bg-primary hover:text-primary-foreground transition-colors"
       >
-        {icon && <span className="mr-2">{icon}</span>}
+        {iconUrl ? (
+          <img src={iconUrl} alt={`${name} logo`} className="mr-2 w-5 h-5" />
+        ) : icon ? (
+          <span className="mr-2">{icon}</span>
+        ) : null}
         {name}
       </Badge>
     </motion.div>
diff --git a/src/components/sections/ProjectsSection.tsx b/src/components/sections/ProjectsSection.tsx
index 985c1d2..8ca466f 100644
--- a/src/components/sections/ProjectsSection.tsx
+++ b/src/components/sections/ProjectsSection.tsx
@@ -1,6 +1,7 @@
 import { motion } from "framer-motion";
 import { useLanguage } from "@/contexts/LanguageContext";
 import { ProjectCard } from "@/components/ProjectCard";
+import { projectsData } from "@/data/projects";
 import { Server, Gamepad2, Cloud, Terminal, Box, Globe, Scale } from "lucide-react";
 
 export const ProjectsSection = () => {
@@ -70,6 +71,7 @@ export const ProjectsSection = () => {
               description={t(`projects.items.${project.key}.description`)}
               icon={project.icon}
               image={project.image}
+              technologies={projectsData[project.key]?.technologies}
               delay={index * 0.1}
               projectId={project.key}
             />
diff --git a/src/components/sections/SkillsSection.tsx b/src/components/sections/SkillsSection.tsx
index 58299ab..d66c6c4 100644
--- a/src/components/sections/SkillsSection.tsx
+++ b/src/components/sections/SkillsSection.tsx
@@ -6,17 +6,73 @@ export const SkillsSection = () => {
   const { t } = useLanguage();
 
   const languages = [
-    { name: "JavaScript", icon: "📜" },
-    { name: "TypeScript", icon: "📘" },
-    { name: "Python", icon: "🐍" },
-    { name: "C/C++", icon: "⚙️" },
+    { 
+      name: "JavaScript", 
+      iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg"
+    },
+    { 
+      name: "TypeScript", 
+      iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/typescript/typescript-original.svg"
+    },
+    { 
+      name: "Python", 
+      iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-original.svg"
+    },
+    { 
+      name: "C/C++", 
+      iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/cplusplus/cplusplus-original.svg"
+    },
+    { 
+      name: "HTML5", 
+      iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/html5/html5-original.svg"
+    },
+    { 
+      name: "CSS3", 
+      iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/css3/css3-original.svg"
+    },
   ];
 
   const frameworks = [
-    { name: "React", icon: "⚛️" },
-    { name: "Node.js", icon: "📗" },
-    { name: "Docker", icon: "🐳" },
-    { name: "Linux", icon: "🐧" },
+    { 
+      name: "React", 
+      iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/react/react-original.svg"
+    },
+    { 
+      name: "Node.js", 
+      iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/nodejs/nodejs-original.svg"
+    },
+    { 
+      name: "NestJS", 
+      iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/nestjs/nestjs-original.svg"
+    },
+    { 
+      name: "Docker", 
+      iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/docker/docker-original.svg"
+    },
+    { 
+      name: "Linux", 
+      iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/linux/linux-original.svg"
+    },
+    { 
+      name: "PostgreSQL", 
+      iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/postgresql/postgresql-original.svg"
+    },
+    { 
+      name: "MongoDB", 
+      iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/mongodb/mongodb-original.svg"
+    },
+    { 
+      name: "MySQL", 
+      iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/mysql/mysql-original.svg"
+    },
+    { 
+      name: "Ansible", 
+      iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/ansible/ansible-original.svg"
+    },
+    { 
+      name: "WordPress", 
+      iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/wordpress/wordpress-original.svg"
+    },
   ];
 
   return (
@@ -52,7 +108,7 @@ export const SkillsSection = () => {
                 <SkillBadge
                   key={skill.name}
                   name={skill.name}
-                  icon={skill.icon}
+                  iconUrl={skill.iconUrl}
                   delay={index * 0.1}
                 />
               ))}
@@ -73,7 +129,7 @@ export const SkillsSection = () => {
                 <SkillBadge
                   key={skill.name}
                   name={skill.name}
-                  icon={skill.icon}
+                  iconUrl={skill.iconUrl}
                   delay={index * 0.1}
                 />
               ))}
diff --git a/src/data/projects.ts b/src/data/projects.ts
index 5cbeb90..c01046a 100644
--- a/src/data/projects.ts
+++ b/src/data/projects.ts
@@ -10,7 +10,7 @@ export interface ProjectData {
   solution: { fr: string; en: string };
   images: string[];
   mainImage: string;
-  technologies: { name: string; color?: string; icon?: string }[];
+  technologies: { name: string; color?: string; icon?: string; iconUrl?: string }[];
   githubUrl?: string;
   demoUrl?: string;
 }
@@ -62,12 +62,12 @@ export const projectsData: Record<string, ProjectData> = {
     mainImage: "/images/projects/homemade_nas.png",
     images: ["/images/projects/homemade_nas.png"],
     technologies: [
-      { name: "OpenMediaVault" },
-      { name: "Docker" },
-      { name: "Traefik" },
-      { name: "Linux" },
-      { name: "Home Assistant" },
-      { name: "Portainer" },
+      { name: "OpenMediaVault", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/debian/debian-original.svg" },
+      { name: "Docker", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/docker/docker-original.svg" },
+      { name: "Traefik", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/kubernetes/kubernetes-plain.svg" },
+      { name: "Linux", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/linux/linux-original.svg" },
+      { name: "Home Assistant", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-original.svg" },
+      { name: "Portainer", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/docker/docker-original.svg" },
     ],
   },
   transcendence: {
@@ -116,12 +116,12 @@ export const projectsData: Record<string, ProjectData> = {
     mainImage: "/images/projects/pong.png",
     images: ["/images/projects/pong.png"],
     technologies: [
-      { name: "React", icon: "⚛️" },
-      { name: "TypeScript" },
-      { name: "NestJS" },
-      { name: "PostgreSQL" },
-      { name: "WebSocket" },
-      { name: "Docker" },
+      { name: "React", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/react/react-original.svg" },
+      { name: "TypeScript", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/typescript/typescript-original.svg" },
+      { name: "NestJS", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/nestjs/nestjs-original.svg" },
+      { name: "PostgreSQL", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/postgresql/postgresql-original.svg" },
+      { name: "WebSocket", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg" },
+      { name: "Docker", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/docker/docker-original.svg" },
     ],
   },
   cloud: {
@@ -170,11 +170,11 @@ export const projectsData: Record<string, ProjectData> = {
     mainImage: "/images/projects/cloud_1.png",
     images: ["/images/projects/cloud_1.png"],
     technologies: [
-      { name: "Docker", icon: "🐳" },
-      { name: "Ansible" },
-      { name: "WordPress" },
-      { name: "MySQL" },
-      { name: "Linux" },
+      { name: "Docker", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/docker/docker-original.svg" },
+      { name: "Ansible", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/ansible/ansible-original.svg" },
+      { name: "WordPress", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/wordpress/wordpress-original.svg" },
+      { name: "MySQL", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/mysql/mysql-original.svg" },
+      { name: "Linux", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/linux/linux-original.svg" },
     ],
   },
   minishell: {
@@ -223,10 +223,10 @@ export const projectsData: Record<string, ProjectData> = {
     mainImage: "/images/projects/minishell.png",
     images: ["/images/projects/minishell.png"],
     technologies: [
-      { name: "C" },
-      { name: "Linux" },
-      { name: "POSIX" },
-      { name: "Make" },
+      { name: "C", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/c/c-original.svg" },
+      { name: "Linux", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/linux/linux-original.svg" },
+      { name: "POSIX", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/unix/unix-original.svg" },
+      { name: "Make", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/cmake/cmake-original.svg" },
     ],
   },
   cube3d: {
@@ -275,10 +275,10 @@ export const projectsData: Record<string, ProjectData> = {
     mainImage: "/images/projects/cub3d.png",
     images: ["/images/projects/cub3d.png"],
     technologies: [
-      { name: "C" },
-      { name: "MiniLibX" },
-      { name: "Raycasting" },
-      { name: "Make" },
+      { name: "C", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/c/c-original.svg" },
+      { name: "MiniLibX", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/c/c-original.svg" },
+      { name: "Raycasting", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/cplusplus/cplusplus-original.svg" },
+      { name: "Make", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/cmake/cmake-original.svg" },
     ],
   },
   etsidemain: {
@@ -336,10 +336,10 @@ export const projectsData: Record<string, ProjectData> = {
       "/images/sites/etsidemain/tel.png"
     ],
     technologies: [
-      { name: "HTML5" },
-      { name: "CSS3" },
-      { name: "JavaScript" },
-      { name: "SEO" },
+      { name: "HTML5", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/html5/html5-original.svg" },
+      { name: "CSS3", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/css3/css3-original.svg" },
+      { name: "JavaScript", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg" },
+      { name: "SEO", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/google/google-original.svg" },
     ],
     demoUrl: "https://etsidemain.com",
   },
@@ -398,11 +398,11 @@ export const projectsData: Record<string, ProjectData> = {
       "/images/sites/avopieces/tel.png"
     ],
     technologies: [
-      { name: "React", icon: "⚛️" },
-      { name: "Node.js", icon: "📗" },
-      { name: "MongoDB" },
-      { name: "OpenAI" },
-      { name: "TypeScript" },
+      { name: "React", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/react/react-original.svg" },
+      { name: "Node.js", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/nodejs/nodejs-original.svg" },
+      { name: "MongoDB", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/mongodb/mongodb-original.svg" },
+      { name: "OpenAI", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-original.svg" },
+      { name: "TypeScript", iconUrl: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/typescript/typescript-original.svg" },
     ],
     demoUrl: "https://avopieces.fr",
   },
diff --git a/src/pages/ProjectPage.tsx b/src/pages/ProjectPage.tsx
index a333f80..10cb2b1 100644
--- a/src/pages/ProjectPage.tsx
+++ b/src/pages/ProjectPage.tsx
@@ -69,6 +69,7 @@ const ProjectPageContent = () => {
                   key={tech.name}
                   name={tech.name}
                   icon={tech.icon}
+                  iconUrl={tech.iconUrl}
                   delay={index * 0.05}
                 />
               ))}