portfolio3a/sections/projects.html

<section id="projects" class="section projects">
    <div class="container">
        <span class="section-subtitle">Portfolio</span>
        <h2 class="section-title">Mes Réalisations</h2>
        <div class="projects-grid">

            <article class="project-card" data-project="6">
                <div class="project-image">
                    <img src="img/comics.jpg" alt="Transformation en style comics" loading="lazy">
                </div>
                <div class="project-content">
                    <h3>Transformation de photos en style "Comics"</h3>
                    <p>Projet de traitement d'image réalisé seul en une petite semaine dont l'objectif est de transformer une photo existante en style "Comics"</p>
                    <p>Disponible sur mon github</p>
                    <div class="project-tags">
                        <span>Python</span>
                        <span>Numpy</span>
                        <span>Scipy</span>
                        <span>Sklearn</span>
                        <span>Matplotlib</span>
                    </div>
                    <button class="btn-primary">Voir les détails</button>
                </div>
            </article>
            
            <article class="project-card" data-project="5">
                <div class="project-image">
                    <img src="img/data-science.png" alt="Prediction IA" loading="lazy">
                </div>
                <div class="project-content">
                    <h3>IA supervisée - Prédiction du prix de l'immobilier</h3>
                    <p>Ce projet réalisé seul en 7 jours dans le cadre de ma 3ème année de BUT vise à prédire les 
                        prix de l'immobilier en France en utilisant plusieurs modèles de machine learning</p>
                    <p>Disponible sur mon github</p>
                    <div class="project-tags">
                        <span>Python</span>
                        <span>Numpy</span>
                        <span>Matplotlib</span>
                        <span>Scikit-learn</span>
                        <span>Pandas</span>
                        <span>Lightgbm</span>
                    </div>
                    <button class="btn-primary">Voir les détails</button>
                </div>
            </article>
            
            <article class="project-card" data-project="4">
                <div class="project-image">
                    <img src="img/cochons-aigris.png" alt="Application Web" loading="lazy">
                </div>
                <div class="project-content">
                    <h3>Jeu 3D - Angry bird inversé, les cochons contre attaquent</h3>
                    <p>Projet universitaire en autonomie - 2025 (110 heures)</p>
                    <p>Travail dans une équipe de 4 personnes</p>
                    <div class="project-tags">
                        <span>Three.JS</span>
                        <span>Javascript</span>
                        <span>HTML</span>
                        <span>CSS</span>
                    </div>
                    <button class="btn-primary">Voir les détails</button>
                </div>
            </article>

            <article class="project-card" data-project="3">
                <div class="project-image">
                    <img src="img/verax.png" alt="Application Web" loading="lazy">
                </div>
                <div class="project-content">
                    <h3>Applications web et mobile de lutte contre la désinformation</h3>
                    <p>Projet universitaire en autonomie - 2024 (200 heures)</p>
                    <p>Travail dans une équipe de 5 personnes</p>
                    <div class="project-tags">
                        <span>PHP</span>
                        <span>Java</span>
                        <span>Kotlin</span>
                        <span>SQL</span>
                        <span>Docker</span>
                        <span>HTML</span>
                        <span>CSS</span>
                    </div>
                    <button class="btn-primary">Voir les détails</button>
                </div>
            </article>

            <article class="project-card" data-project="2">
                <div class="project-image">
                    <img src="img/edutiles.png" alt="Application Web" loading="lazy">
                </div>
                <div class="project-content">
                    <h3>Jeu de dominos (fractions) éducative</h3>
                    <p>2023 (170 heures)</p>
                    <div class="project-tags">
                        <span>Javascript</span>
                        <span>NodeJs</span>
                        <span>socket.io</span>
                        <span>HTML</span>
                        <span>CSS</span>
                    </div>
                    <button class="btn-primary">Voir les détails</button>
                </div>
            </article>

            <article class="project-card" data-project="1">
                <div class="project-image">
                    <img src="img/stormy.png" alt="Application Web" loading="lazy">
                </div>
                <div class="project-content">
                    <h3>Application d'organisation pour les étudiants</h3>
                    <p>Projet universitaire en autonomie - 2022 (180 heures)</p>
                    <p></p>
                    <div class="project-tags">
                        <span>NodeJs</span>
                        <span>TypeScript</span>
                        <span>HTML</span>
                        <span>CSS</span>
                    </div>
                    <button class="btn-primary">Voir les détails</button>
                </div>
            </article>
        </div>
    </div>

    <!-- Modal -->
    <div id="projectModal" class="modal">
        <div class="modal-content">
            <button class="modal-close">&times;</button>
            <img class="modal-image" src="" alt="">
            <h3 class="modal-title"></h3>
            <div class="modal-description"></div>
            <div class="modal-tags"></div>
            <a href="#" class="modal-link btn-primary">Voir le projet</a>
        </div>
    </div>
</section>