portfolio3a/sections/skills.html

<section id="skills" class="section skills">
    <div class="container">
        <span class="section-subtitle">Expertise</span>
        <h2 class="section-title">Mes Connaissances</h2>
        <div class="skills-grid">

            <div class="skill-card">
                <h3>Soft skills</h3>
                <div class="skill-items">
                    <div class="skill-item">
                        <span>🗣️ Vulgarisation</span>
                    </div>
                    <div class="skill-item">
                        <span>🤝 Esprit d'équipe</span>
                    </div>
                    <div class="skill-item">
                        <span>🔑 Autonomie</span>
                    </div>
                    <div class="skill-item">
                        <span>👥 Gestion d'équipe</span>
                    </div>
                    <div class="skill-item">
                        <span>🔄 Adaptabilité</span>
                    </div>
                    <div class="skill-item">
                        <span>💬 Relationnel</span>
                    </div>
                </div>
            </div>

            <div class="skill-card">
                <h3>Base de données</h3>
                <div class="skill-items">                   
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg"
                            alt="PostgreSQL">
                        <span>PostgreSQL</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg"
                            alt="MongoDB">
                        <span>MongoDB</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mariadb/mariadb-original.svg"
                            alt="MariaDB">
                        <span>MariaDB</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/neo4j/neo4j-original.svg"
                            alt="Neo4j">
                        <span>Neo4j</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/hadoop/hadoop-original.svg" 
                            alt="Hadoop">
                        <span>Hadoop</span>
                    </div> 
                </div>
            </div>   
            
            <div class="skill-card">
                <h3>Outils</h3>
                <div class="skill-items">
                    <div class="skill-item">
                        <img src="img/excel.png" 
                            alt="Excel">
                        <span>Excel</span>
                    </div>                    
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" alt="Google Sheets">
                        <span>Google Sheets</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/c/cf/New_Power_BI_Logo.svg" alt="Power BI" width="40" height="40">
                        <span>Power BI</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg" alt="Git">
                        <span>Git</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bootstrap/bootstrap-original.svg"
                            alt="Bootstrap">
                        <span>Bootstrap</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/figma/figma-original.svg"
                            alt="Figma">
                        <span>Figma</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postman/postman-original.svg"
                            alt="Postman">
                        <span>Postman</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg"
                            alt="Docker">
                        <span>Docker</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg"
                            alt="VSCode">
                        <span>VSCode</span>
                    </div>
                </div>
            </div>

            <div class="skill-card">
                <h3>Langues</h3>
                <div class="skill-list">
                    <div class="skill-list-item">
                        <span class="skill-icon">🇫🇷</span>
                        <span>Français - Natif</span>
                    </div>
                    <div class="skill-list-item">
                        <span class="skill-icon">🇬🇧</span>
                        <span>Anglais - Courant</span>
                    </div>
                    <div class="skill-list-item">
                        <span class="skill-icon">🇪🇸</span>
                        <span>Espagnol - Bases</span>
                    </div>
                </div>
            </div>

            <div class="skill-card">
                <h3>Back-end</h3>
                <div class="skill-items">
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg" alt="PHP">
                        <span>PHP</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg"
                            alt="Python">
                        <span>Python</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg"
                            alt="Node.js">
                        <span>Node.js</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg" alt="Java">
                        <span>Java</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/c/c-original.svg" alt="C">
                        <span>C</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/cplusplus/cplusplus-original.svg"
                            alt="C++">
                        <span>C++</span>
                    </div>
                </div>
            </div>

            <div class="skill-card">
                <h3>Front-end</h3>
                <div class="skill-items">
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg"
                            alt="HTML">
                        <span>HTML</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg"
                            alt="JavaScript">
                        <span>JavaScript</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" alt="CSS">
                        <span>CSS</span>
                    </div>
                    <div class="skill-item">
                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/sass/sass-original.svg" alt="SCSS">
                        <span>SCSS</span>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</section>