portfolio/js/script.js

document.addEventListener('DOMContentLoaded', function () {
    const globalSections = document.getElementById('global-sections');
    const subSections = document.getElementById('sub-sections');
    const contentDisplay = document.getElementById('content-display');

    const sectionsData = {
        projects: {
            name: 'Projets',
            items: [
                {
                    filename: 'cv',
                    filextension: '.sty',
                    title: "Projet 1.01 : Découverte de l'open source",
                    content: "Ce projet consiste en la simplification de la creation d’un CV en LaTeX. <br>J'ai donc appris ce nouveau language et développé un plugin public en m'appuyant sur la documentation et les communautés en ligne. <br><br>Celles-ci m’ont permis de comprendre qu’un code doit autosuffisant et compréhensible, facilitant ainsi sa réutilisation et son adaptation. <br><br>Cette expérience m'a permis de comprendre que tout peut être décrit par des règles, et donc, implémentable par des algorithmes.",
                    repo: 'https://codefirst.iut.uca.fr/git/thibaud.la_riviere-gillet/CV-Thibaud'
                },
                {
                    filename: 'pert',
                    filextension: '.c',
                    title: "SAE S1.02 : Comparaison d'approches algorithmiques",
                    content: "Lors de cette SAE de C, nous devions, par groupe de 2 à 3, développer une application console. <br>Celle-ci implémente la méthode PERT sur les différentes étapes de construction d'un bâtiment. Le projet nécessitait de prendre en compte la date de début du projet, la durée des tâches et leurs dépendances. <br><br>Ce projet m'a particulièrement intéressé car il m'a permis de comprendre et de mettre en place différentes structures de données ainsi que des optimisations logicielles. <br><br>En plus de cela, il m'a permis de comprendre l'importance de la gestion de projet. J'y ai appris à anticiper les différents livrables à identifier les étapes critiques et à prendre du recul sur l'avancement du projet.",
                    repo: 'https://codefirst.iut.uca.fr/git/thibaud.la_riviere-gillet/SAE_S1.02_Comparaison_d_approches_algorithmiques'
                },
            ]
        },
        readme: {
            name: 'Readme',
            items: [
                {
                    filename: 'README',
                    filextension: '.md',
                    title: 'READ THIBAUD LA RIVIERE',
                    content: "## À propos de moi<br>Bienvenue dans mon portfolio. Je suis un étudiant en informatique. Je suis plutôt curieux et passionné par les énigmes. C'est par ces biais que je me suis retrouvé au BUT de Clermont-Ferrand. Mon parcours est jalonné par divers projets que vous pouvez explorer pour mieux comprendre mes compétences et mes réalisations.<br><br>### Projets<br><BLOCKQUOTE> - [CV](./project/cv.sty)<br><BLOCKQUOTE> - **Description :**<br><BLOCKQUOTE> - Ce projet consiste en la simplification de la création d’un CV en LaTeX.<br></BLOCKQUOTE> - **Compétences acquises :**<br><BLOCKQUOTE> - Maîtrise de LaTeX<br> - Développement de plugins<br> - Documentation et partage de code<br></BLOCKQUOTE></BLOCKQUOTE><br> - [PERT](./projets/pert.c)<br><BLOCKQUOTE> - **Description :**<br><BLOCKQUOTE> - Ce projet implémente la méthode PERT pour gérer les différentes étapes de construction d'un bâtiment. Il prend en compte la date de début du projet, la durée des tâches et leurs dépendances.<br></BLOCKQUOTE> - **Compétences acquises :**<br><BLOCKQUOTE> - Gestion de projet<br> - Optimisation logicielle<br> - Structures de données avancées<br></BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>### Contact<br> Email : [Thibaud.LA_RIVIERE-GILLET@etu.uca.fr](Thibaud.LA_RIVIERE-GILLET@etu.uca.fr)<br>",
                    repo: 'https://codefirst.iut.uca.fr/git/thibaud.la_riviere-gillet/portfolio'
                }
            ]
        }
    };

    Object.keys(sectionsData).forEach(key => {
        const section = sectionsData[key];
        const li = document.createElement('li');
        li.classList.add('section');
        li.setAttribute('data-section', key);
        li.innerHTML = `<a href="#${key}" class="nav-link">${section.name}</a>`;
        globalSections.appendChild(li);
    });

    const sectionElements = document.querySelectorAll('#global-sections .section');

    function displaySectionContent(sectionName) {
        document.querySelector('.nav-link.active')?.classList.remove('active');
        document.querySelector(`[data-section="${sectionName}"] .nav-link`).classList.add('active');

        if (sectionName === 'readme') {
            subSections.innerHTML = '';

            const item = sectionsData.readme.items[0];
            contentDisplay.innerHTML = `
                <div class="sheet">
                    <div class="content-wrapper">
                        <div class="readme-header">
                            <h1>${item.title}</h1>
                            <img src="thibaudla_riviere-gillet-portfolio/pictures/images/me.png" alt="me" class="readme-image">
                        </div>
                        <p>${item.content}</p>
                        <p><a href="${item.repo}" target="_blank">Repository</a></p>
                    </div>
                </div>
            `;
            return;
        }

        subSections.innerHTML = '';
        sectionsData[sectionName].items.forEach(item => {
            const li = document.createElement('li');
            li.classList.add('file-item');
            li.innerHTML = `
                <img src="thibaudla_riviere-gillet-portfolio/pictures/files/files.png" alt="${item.filename}${item.filextension}" class="file-img">
                <br>
                <a href="#" class="sub-link" data-content="${item.content}" data-title="${item.title}" data-repo="${item.repo}" data-filename="${item.filename}">${item.filename}${item.filextension}</a>
            `;
            subSections.appendChild(li);

            li.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector('.file-item.selected')?.classList.remove('selected');
                li.classList.add('selected');

                const content = li.querySelector('.sub-link').getAttribute('data-content');
                const title = li.querySelector('.sub-link').getAttribute('data-title');
                const repo = li.querySelector('.sub-link').getAttribute('data-repo');
                const filename = li.querySelector('.sub-link').getAttribute('data-filename');
                contentDisplay.innerHTML = `
                    <div class="sheet">
                        <div class="image-wrapper">
                            <img src="thibaudla_riviere-gillet-portfolio/pictures/files/${filename}.png" alt="${title}" class="external-image">
                        </div>
                        <div class="content-wrapper">
                            <h1>${title}</h1>
                            <p>${content}</p>
                            <p><a href="${repo}" target="_blank">Repository</a></p>
                        </div>
                    </div>
                `;
            });
        });
    }

    sectionElements.forEach(section => {
        section.addEventListener('click', function () {
            const sectionName = this.getAttribute('data-section');
            displaySectionContent(sectionName);
        });
    });

    displaySectionContent('readme');
});