site_web/httpdocs/project.js

    document.addEventListener("DOMContentLoaded", function () {
        // Get project name from URL
        const urlParams = new URLSearchParams(window.location.search);
        const projectName = urlParams.get("name");

        // Simulated "database" of projects
        const projects = {
            "mastermind": {
                title: "Projet MasterMind",
                subtitle: "Un projet de création du jeu MasterMind.",
                description: "Le but de ce projet était de réaliser par groupe de 4 personnes sur une durée de 3 mois un jeu de MasterMind en .net Maui.",
                images: [
                    {
                        src: "img/project/scolaire/mastermind_menu.png",
                        description: "Menu principal du jeu. Les joueurs peuvent consulter les meilleurs scores, lire les règles et lancer une partie."
                    },
                    {
                        src: "img/project/scolaire/mastermind_game.png",
                        description: "Plateau de jeux durant une partie. Les joueurs jouent en cliquant sur les cercles de couleurs afin de les placer sur le plateau."
                    },
                    {
                        src: "img/project/scolaire/mastermind_login.png",
                        description: "Écran de début de partie. Les joueurs peuvent choisir leurs pseudo ainsi que la difficulté. La difficulté influe sur le nombre de couleurs et d'essaies."
                    }
                ],
                technologies: ["csharp", "xaml", "json"]
            },  // ✅ Fixed comma placement

            "etugestion": {  // ✅ Removed incorrect semicolon before this key
                title: "EtuGestion",
                subtitle: "Création d'un outil de gestion en ligne de commande pour une école.",
                description: "Ce projet réalisé en C par groupe de 2 à l'aide de l'outil git nécessitait d'avoir différentes interfaces pour des élèves, des professeurs et des jury...",
                images: [
                    {
                        src: "img/project/scolaire/brico_menu.png",
                        description: "Menu principal de l'outil."
                    },
                    {
                        src: "img/project/scolaire/brico_add.png",
                        description: "Écran de connexion permettant à l'utilisateur d'accéder à ses scores enregistrés."
                    },  // ✅ Added missing comma here
                    {
                        src: "img/project/scolaire/brico_list.png",
                        description: "Écran permettant d'ajouter de nouveaux éléments à la base de données."
                    }
                ],
                technologies: ["c", "git"]
            },

            "linux_install": {
                title: "Linux et shell",
                subtitle: "Installation d'une distribution Linux et création de scripts shell.",
                description: `Dans le cadre de ma première année de BUT informatique, j'ai été amené à
                installer une distribution Linux (Arch Linux) qui est rapidement devenue mon outil de travail principal.`,
                images: [
                    {
                        src: "img/project/scolaire/arch_main.png",
                        description: "Écran principal après installation d'Arch Linux."
                    },
                    {
                        src: "img/project/scolaire/arch_script1.png",
                        description: "Exemple de script shell automatisant une tâche quotidienne."
                    }
                ],
                technologies: ["bash"]
            },
            "monster_battle": {
                title: "Monster Battle",
                subtitle: "Un projet de création du jeu MasterMind.",
                description: "Le but de ce projet était de réaliser par groupe de 4 personnes sur une durée de 3 mois un jeu de MasterMind en .net Maui.",
                images: [
                    {
                        src: "img/project/perso/monsterBattle_logo.png",
                        description: "Menu principal du jeu. Les joueurs peuvent consulter les meilleurs scores, lire les règles et lancer une partie."
                    },
                    {
                        src: "img/project/perso/monsterBattle_menu.png",
                        description: "Plateau de jeux durant une partie. Les joueurs jouent en cliquant sur les cercles de couleurs afin de les placer sur le plateau."
                    },
                    {
                        src: "img/project/perso/monsterBattle_main.png",
                        description: "Écran de début de partie. Les joueurs peuvent choisir leurs pseudo ainsi que la difficulté. La difficulté influe sur le nombre de couleurs et d'essaies."
                    }
                ],
                technologies: ["python", "tkinter"]
            },  // ✅ Fixed comma placement

            "etugestion": {  // ✅ Removed incorrect semicolon before this key
                title: "EtuGestion",
                subtitle: "Création d'un outil de gestion en ligne de commande pour une école.",
                description: "Ce projet réalisé en C par groupe de 2 à l'aide de l'outil git nécessitait d'avoir différentes interfaces pour des élèves, des professeurs et des jury...",
                images: [
                    {
                        src: "img/project/scolaire/brico_menu.png",
                        description: "Menu principal de l'outil."
                    },
                    {
                        src: "img/project/scolaire/brico_add.png",
                        description: "Écran de connexion permettant à l'utilisateur d'accéder à ses scores enregistrés."
                    },  // ✅ Added missing comma here
                    {
                        src: "img/project/scolaire/brico_list.png",
                        description: "Écran permettant d'ajouter de nouveaux éléments à la base de données."
                    }
                ],
                technologies: ["c", "git"]
            },

            "linux_install": {
                title: "Linux et shell",
                subtitle: "Installation d'une distribution Linux et création de scripts shell.",
                description: `Dans le cadre de ma première année de BUT informatique, j'ai été amené à
                installer une distribution Linux (Arch Linux) qui est rapidement devenue mon outil de travail principal.`,
                images: [
                    {
                        src: "img/project/scolaire/arch_main.png",
                        description: "Écran principal après installation d'Arch Linux."
                    },
                    {
                        src: "img/project/scolaire/arch_script1.png",
                        description: "Exemple de script shell automatisant une tâche quotidienne."
                    }
                ],
                technologies: ["bash"]
            }
        };

        // Get project data or fallback
        const project = projects[projectName] || {
            title: "Projet Inconnu",
            subtitle: "Désolé, ce projet n'existe pas.",
            description: "Nous n'avons pas trouvé d'informations sur ce projet.",
            images: [],
            technologies: []
        };

        // Update HTML content
        document.getElementById("project-title").innerText = project.title;
        document.getElementById("project-subtitle").innerText = project.subtitle;
        document.getElementById("project-description").innerText = project.description;

        const galleryContainer = document.getElementById("project-gallery");

        project.images.forEach((imgObj, index) => {
            const wrapper = document.createElement("div");
            wrapper.classList.add("image-wrapper");
        
            const img = document.createElement("img");
            img.src = imgObj.src;
            img.alt = `Image ${index + 1}`;
        
            const desc = document.createElement("div");
            desc.classList.add("image-description");
            desc.innerText = imgObj.description; // Custom description here
        
            wrapper.appendChild(img);
            wrapper.appendChild(desc);
            galleryContainer.appendChild(wrapper);
        });

        // Update technologies
        const techContainer = document.getElementById("project-tech-icons");
        project.technologies.forEach(tech => {
            const div = document.createElement("div");
            div.classList.add("tech-box", `${tech}-box`); // Ensure the correct class is added

            const img = document.createElement("img");
            img.src = `logos/${tech}.jpeg`;
            img.alt = tech.toUpperCase();

            const text = document.createElement("span");
            text.innerText = tech.toUpperCase();

            div.appendChild(img);
            div.appendChild(text);
            techContainer.appendChild(div);
        });

        // Fade-in effect when page loads
        document.body.classList.remove("fade-out");
    });