partie competences completee

index.html

@@ -587,28 +587,352 @@
           <h2>Compétences</h2>
 
           <!-- Developpement -->
-          <h3>Développement</h3>
-          <div class="col-12">
-            <div class="bg-secondary h-100 w-100 py-5"></div>
+          <h3 class="mt-4">Développement</h3>
+          <div class="row mt-4">
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">HTML</h5>
+                  <img
+                    src="./assets/images/html.png"
+                    class="card-img-bottom"
+                    alt="HTML"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">CSS</h5>
+                  <img
+                    src="./assets/images/css.png"
+                    class="card-img-bottom"
+                    alt="CSS"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Javascript</h5>
+                  <img
+                    src="./assets/images/js.png"
+                    class="card-img-bottom"
+                    alt="JS"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">PHP</h5>
+                  <img
+                    src="./assets/images/php.png"
+                    class="card-img-bottom"
+                    alt="PHP"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Typescript</h5>
+                  <img
+                    src="./assets/images/typescript.png"
+                    class="card-img-bottom"
+                    alt="Typescript"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Ruby</h5>
+                  <img
+                    src="./assets/images/ruby.png"
+                    class="card-img-bottom"
+                    alt="Ruby"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Python</h5>
+                  <img
+                    src="./assets/images/python.png"
+                    class="card-img-bottom"
+                    alt="Python"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Java</h5>
+                  <img
+                    src="./assets/images/java.png"
+                    class="card-img-bottom"
+                    alt="Java"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">C</h5>
+                  <img
+                    src="./assets/images/c.png"
+                    class="card-img-bottom"
+                    alt="C"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">C++</h5>
+                  <img
+                    src="./assets/images/c++.png"
+                    class="card-img-bottom"
+                    alt="C++"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">C#</h5>
+                  <img
+                    src="./assets/images/c-sharp.png"
+                    class="card-img-bottom"
+                    alt="C#"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">SQL</h5>
+                  <img
+                    src="./assets/images/sql.png"
+                    class="card-img-bottom"
+                    alt="SQL"
+                  />
+                </div>
+              </div>
             </div>
-
-          <!-- Gestion de projet et collaboration -->
-          <h3>Gestion de projet et collaboration</h3>
-          <div class="col-12">
-            <div class="bg-secondary h-100 w-100 py-5"></div>
           </div>
 
           <!-- Langues -->
           <h3>Langues</h3>
-          <div class="col-12">
-            <div class="bg-secondary h-100 w-100 py-5"></div>
+          <div class="d-flex justify-content-center">
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Français</h5>
+                  <img
+                    src="./assets/images/france.png"
+                    class="card-img-bottom"
+                    alt="Drapeau de la France"
+                  />
+                  <p class="card-text text-center">
+                    <strong>Langue maternelle</strong>
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Anglais</h5>
+                  <img
+                    src="./assets/images/unitedKingdom.png"
+                    class="card-img-bottom"
+                    alt="Drapeau du Royaume Uni"
+                  />
+                  <p class="card-text text-center">
+                    <strong>Intermédiaire avancé (B2)</strong>
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Espagnol</h5>
+                  <img
+                    src="./assets/images/espagne.png"
+                    class="card-img-bottom"
+                    alt="Drapeau de l'Espagne"
+                  />
+                  <p class="card-text text-center">
+                    <strong>Intermédiaire (B1)</strong>
+                  </p>
+                </div>
+              </div>
+            </div>
           </div>
 
           <!-- Outils -->
 
           <h3>Outils</h3>
-          <div class="col-12">
-            <div class="bg-secondary h-100 w-100 py-5"></div>
+          <div class="row mt-4">
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Visual Studio</h5>
+                  <img
+                    src="./assets/images/visualStudio.png"
+                    class="card-img-bottom"
+                    alt="Visual Studio"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Jetbrains</h5>
+                  <img
+                    src="./assets/images/jetbrains.png"
+                    class="card-img-bottom"
+                    alt="Suite Jetbrains"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Docker</h5>
+                  <img
+                    src="./assets/images/docker.png"
+                    class="card-img-bottom"
+                    alt="Docker"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Kubernetes</h5>
+                  <img
+                    src="./assets/images/kubernetes.png"
+                    class="card-img-bottom"
+                    alt="Kubernetes"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Proxmox</h5>
+                  <img
+                    src="./assets/images/proxmox.png"
+                    class="card-img-bottom"
+                    alt="Proxmox"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Git</h5>
+                  <img
+                    src="./assets/images/git.png"
+                    class="card-img-bottom"
+                    alt="Git"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">xUnit</h5>
+                  <img
+                    src="./assets/images/xUnit.png"
+                    class="card-img-bottom"
+                    alt="Suite de tests unitaires xUnit"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Postman</h5>
+                  <img
+                    src="./assets/images/postman.png"
+                    class="card-img-bottom"
+                    alt="Postman"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Swagger</h5>
+                  <img
+                    src="./assets/images/swagger.png"
+                    class="card-img-bottom"
+                    alt="Swagger"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Figma</h5>
+                  <img
+                    src="./assets/images/figma.png"
+                    class="card-img-bottom"
+                    alt="Figma"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Canva</h5>
+                  <img
+                    src="./assets/images/canva.png"
+                    class="card-img-bottom"
+                    alt="Canva"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="card border-secondary mb-3" style="max-width: 10rem">
+                <div class="card-body text-secondary">
+                  <h5 class="card-title text-center">Office</h5>
+                  <img
+                    src="./assets/images/office.png"
+                    class="card-img-bottom"
+                    alt="Suite Microsoft Office"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </section>