fix : argument and project list fixed

index.html

@@ -6,7 +6,7 @@
   <link href="/images/favicon.ico" rel="icon" type="image/x-icon" />
   <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport" />
   <title>kim</title>
-  <link href="./assets/css/bootstrap.css" rel="stylesheet" />
+  <link href="/css/bootstrap.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />

public/data/projects.json

@@ -5,7 +5,7 @@
       "image": "ChefBotPlus.png",
       "stack": ["React", "NodeJS", "API", "Express", "MongoDB"],
       "description": "Chefbot helps you choose what to eat depending on your diet and even helps you make your grocery list!",
-      "github": "https://github.com/MonaBlanc/ChatBot/blob/master/README.md",
+      "link": "https://github.com/MonaBlanc/ChatBot/blob/master/README.md",
       "category": ["Web Development", "Full Stack"],
       "year": "2022-2023"
     },
@@ -15,7 +15,7 @@
       "image": "BlackjackSquare.png",
       "stack": ["Python"],
       "description": "The Blackjack Python Console Game is a text-based implementation of the popular casino card game, Blackjack. It allows players to play against a computer dealer and experience the excitement of trying to beat the house.",
-      "github": "https://github.com/MonaBlanc/100DaysOfCode/tree/main/Day%2011%20-%20Blackjack",
+      "link": "https://github.com/MonaBlanc/100DaysOfCode/tree/main/Day%2011%20-%20Blackjack",
       "category": ["Software"],
       "year": "2023"
     },
@@ -25,7 +25,7 @@
       "image": "FlashCards.png",
       "stack": ["Python", "Tkinter", "Pandas"],
       "description": "Made a python application to help me while learning Japanese words and did it with Flaschards system where as long as you don't get the word, you will have to train for it.",
-      "github": "https://github.com/MonaBlanc/100DaysOfCode/tree/main/Day%2031%20-%20Flash%20Cards%20App",
+      "link": "https://github.com/MonaBlanc/100DaysOfCode/tree/main/Day%2031%20-%20Flash%20Cards%20App",
       "category": ["Software"],
       "year": "2023"
 
@@ -36,7 +36,7 @@
       "image": "GunplaEshop.png",
       "stack": ["React", "Tailwind CSS", "SpringBoot", "Java", "H2"],
       "description": "Gunpla Eshop is an e-commerce platform specifically designed for Gundam plastic model (Gunpla) enthusiasts.",
-      "github": "https://github.com/MonaBlanc/GunplaShop-frontend/blob/master/README.md",
+      "link": "https://github.com/MonaBlanc/GunplaShop-frontend/blob/master/README.md",
       "category": ["Web Development", "Full Stack"],
       "year": "2023"
     }

src/assets/data/projects.json

@@ -5,7 +5,7 @@
       "image": "ChefBotPlus.png",
       "stack": ["React", "NodeJS", "API", "Express", "MongoDB"],
       "description": "Chefbot helps you choose what to eat depending on your diet and even helps you make your grocery list!",
-      "github": "https://github.com/MonaBlanc/ChatBot/blob/master/README.md",
+      "link": "https://github.com/MonaBlanc/ChatBot/blob/master/README.md",
       "category": ["Web Development", "Full Stack"],
       "year": "2022-2023"
     },
@@ -15,7 +15,7 @@
       "image": "BlackjackSquare.png",
       "stack": ["Python"],
       "description": "The Blackjack Python Console Game is a text-based implementation of the popular casino card game, Blackjack. It allows players to play against a computer dealer and experience the excitement of trying to beat the house.",
-      "github": "https://github.com/MonaBlanc/100DaysOfCode/tree/main/Day%2011%20-%20Blackjack",
+      "link": "https://github.com/MonaBlanc/100DaysOfCode/tree/main/Day%2011%20-%20Blackjack",
       "category": ["Software"],
       "year": "2023"
     },
@@ -25,7 +25,7 @@
       "image": "FlashCards.png",
       "stack": ["Python", "Tkinter", "Pandas"],
       "description": "Made a python application to help me while learning Japanese words and did it with Flaschards system where as long as you don't get the word, you will have to train for it.",
-      "github": "https://github.com/MonaBlanc/100DaysOfCode/tree/main/Day%2031%20-%20Flash%20Cards%20App",
+      "link": "https://github.com/MonaBlanc/100DaysOfCode/tree/main/Day%2031%20-%20Flash%20Cards%20App",
       "category": ["Software"],
       "year": "2023"
 
@@ -36,7 +36,7 @@
       "image": "GunplaEshop.png",
       "stack": ["React", "Tailwind CSS", "SpringBoot", "Java", "H2"],
       "description": "Gunpla Eshop is an e-commerce platform specifically designed for Gundam plastic model (Gunpla) enthusiasts.",
-      "github": "https://github.com/MonaBlanc/GunplaShop-frontend/blob/master/README.md",
+      "link": "https://github.com/MonaBlanc/GunplaShop-frontend/blob/master/README.md",
       "category": ["Web Development", "Full Stack"],
       "year": "2023"
     }

src/pages/Projects.vue

@@ -65,6 +65,8 @@ import { useRoute } from "vue-router";
 
 import type { Project } from "../types";
 
+import projectsJson from "../assets/data/projects.json";
+
 const route = useRoute();
 const projectId: string | string[] = route.params.id;
 
@@ -80,16 +82,9 @@ const getProjectImage = (imagePath: string | undefined) => {
 // Charger les projets depuis un fichier JSON au montage du composant
 onMounted(async () => {
   try {
-    const response = await fetch("/src/assets/data/projects.json");
-    if (!response.ok) {
-      throw new Error(`Échec du chargement des projets: ${response.statusText}`);
-    }
-    const contentType = response.headers.get("Content-Type");
-    if (!contentType || !contentType.includes("application/json")) {
-      throw new Error("La réponse obtenue n'est pas du JSON");
-    }
-    const data = await response.json();
+    const data = projectsJson;
     projects.value = data;
+    console.log("Projects loaded:", projects.value); // Debugging
   } catch (error) {
     console.error(error);
   }
@@ -125,9 +120,13 @@ function filterProjects(tag: string): void {
 function showDialog(id: string): void {
   // Convertir l'ID fourni en chaîne de caractères pour la comparaison
   const projectId = id.toString();
+  console.log("Searching for project with ID:", projectId); // Debugging
   const projectIndex = projects.value.findIndex((p: Project) => p.id.toString() === projectId);
+  console.log("Project index:", projectIndex); // Debugging
+  console.log("Projects:", projects.value); // Debugging
   if (projectIndex !== -1) {
     selectedProject.value = projects.value[projectIndex];
+    console.log("Selected project:", selectedProject.value); // Debugging
     const modalElement = document.getElementById("projectModal");
     if (modalElement) {
       const modal = new Modal(modalElement);

src/types.ts

@@ -8,14 +8,14 @@ export interface Challenge {
 }
 
 export interface Project {
-  category: string;
+  category: string[];
   description: string;
   id: string;
   image: string;
-  isVisible: boolean;
+  isVisible?: boolean;
   link: string;
   name: string;
   stack: string[];
-  tags: string[];
+  tags?: string[];
   year: string;
 }