From f06ee4fdc5ece44f2dc7dd82c382edf562491a26 Mon Sep 17 00:00:00 2001
From: klnsancho <kilian.terki@lasallesaintdenis.com>
Date: Thu, 4 Dec 2025 12:46:33 +0000
Subject: [PATCH] Actualiser portfolio.html

---
 portfolio.html | 611 ++++++++++++++++++++++++-------------------------
 1 file changed, 305 insertions(+), 306 deletions(-)
diff --git a/portfolio.html b/portfolio.html
index 0360833..6d3d049 100644
--- a/portfolio.html
+++ b/portfolio.html
@@ -1,306 +1,305 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Portfolio - Kilian TERKI</title>
-
-  <!-- Bootstrap -->
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-
-  <style>
-    body {
-      font-family: 'Segoe UI', sans-serif;
-      margin: 0;
-      padding: 0;
-      background: linear-gradient(135deg, #1f1f1f, #3a3a3a);
-      color: #e6e6e6;
-    }
-
-    /* NAVBAR */
-    .navbar {
-      background: rgba(0, 0, 0, 0.7) !important;
-      backdrop-filter: blur(6px);
-    }
-
-    /* HEADER */
-    header {
-      background: linear-gradient(145deg, #2a2a2a, #1c1c1c);
-      color: white;
-      padding: 26rem 2rem;
-      min-height: 100vh;
-      text-align: center;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    /* SECTIONS */
-    section {
-      scroll-margin-top: 8rem;
-      max-width: 900px;
-      margin: 12rem auto;
-      background: #2d2d2d;
-      min-height: 70vh;
-      padding: 3rem;
-      border-radius: 20px;
-      box-shadow: 0 0 25px rgba(0,0,0,0.4);
-      color: #f0f0f0;
-    }
-
-    section h2 {
-      border-left: 6px solid #888;
-      padding-left: 1rem;
-      margin-bottom: 2rem;
-      font-size: 2rem;
-      letter-spacing: 1px;
-    }
-
-    /* CARDS PROJETS */
-    .project-card {
-      background: #3b3b3b;
-      padding: 2rem;
-      border-radius: 15px;
-      transition: 0.3s;
-      box-shadow: 0 0 15px rgba(0,0,0,0.3);
-    }
-    .project-card:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 0 25px rgba(255,255,255,0.1);
-    }
-
-    .btn-dark {
-      background: #555 !important;
-      border: none;
-      transition: 0.2s;
-    }
-    .btn-dark:hover {
-      background: #777 !important;
-    }
-
-    /* SKILL / LANG styling + fill bar */
-    .skill, .lang {
-      padding: 1rem;
-      background: #3b3b3b;
-      border-radius: 10px;
-      position: relative;
-      cursor: pointer;
-      overflow: hidden;
-      margin-bottom: 0.8rem;
-    }
-
-    .fill {
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 100%;
-      width: 0%;
-      background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.16));
-      transition: width 0.7s cubic-bezier(.2,.9,.2,1);
-      border-radius: 10px;
-      z-index: 0;
-    }
-
-    .label {
-      position: relative;
-      z-index: 1;
-      font-weight: 600;
-    }
-
-    .percent {
-      position: relative;
-      z-index: 1;
-      float: right;
-      font-weight: 700;
-      opacity: 0;
-      transition: opacity 0.25s ease;
-    }
-
-    .skill:hover .percent, .lang:hover .percent,
-    .skill.active .percent, .lang.active .percent {
-      opacity: 1;
-    }
-
-    /* responsive */
-    @media (max-width:720px){
-      header{padding:8rem 1.2rem;}
-      section{margin:6rem 1rem; padding:1.6rem;}
-    }
-  </style>
-</head>
-<body>
-
-  <!-- Barre de navigation Bootstrap -->
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
-    <div class="container-fluid">
-      <a class="navbar-brand" href="#">Mon Portfolio</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse" id="navbarNav">
-        <ul class="navbar-nav ms-auto">
-          <li class="nav-item"><a class="nav-link" href="#apropos">À propos</a></li>
-          <li class="nav-item"><a class="nav-link" href="#competences">Compétences</a></li>
-          <li class="nav-item"><a class="nav-link" href="#projets">Projets</a></li>
-          <li class="nav-item"><a class="nav-link" href="#contacter">Contacter</a></li>
-        </ul>
-      </div>
-    </div>
-  </nav>
-
-  <header>
-    <h1>Kilian TERKI</h1>
-    <p>Étudiant en Informatique, Réseau</p>
-  </header>
-
-  <!-- À PROPOS -->
-  <section id="apropos">
-    <h2>À propos de moi</h2>
-    <p>Je m'appelle Kilian TERKI, étudiant en deuxième année de BTS CIEL (Cybersécurité, Informatique et Électronique). Passionné par les technologies et l'informatique, j’aime comprendre comment fonctionnent les systèmes et développer mes compétences à travers des projets concrets. Curieux et motivé, je cherche toujours à progresser dans le domaine du numérique.</p>
-
-    <h3 style="margin-top:2rem; border-left:4px solid #777; padding-left:10px;">Langues</h3>
-
-    <!-- langues avec barre -->
-    <div class="lang" data-percent="100" tabindex="0">
-      <div class="fill" aria-hidden="true"></div>
-      <div class="label">Français</div>
-      <div class="percent">100%</div>
-    </div>
-
-    <div class="lang" data-percent="50" tabindex="0">
-      <div class="fill" aria-hidden="true"></div>
-      <div class="label">Anglais</div>
-      <div class="percent">50%</div>
-    </div>
-
-    <div class="lang" data-percent="20" tabindex="0">
-      <div class="fill" aria-hidden="true"></div>
-      <div class="label">Espagnol</div>
-      <div class="percent">20%</div>
-    </div>
-
-  </section>
-
-  <!-- COMPETENCES -->
-  <section id="competences">
-    <h2>Compétences</h2>
-
-    <div class="skill" data-percent="65" tabindex="0">
-      <div class="fill" aria-hidden="true"></div>
-      <div class="label">HTML / CSS</div>
-      <div class="percent">65%</div>
-    </div>
-
-    <div class="skill" data-percent="25" tabindex="0">
-      <div class="fill" aria-hidden="true"></div>
-      <div class="label">PHP</div>
-      <div class="percent">25%</div>
-    </div>
-
-    <div class="skill" data-percent="20" tabindex="0">
-      <div class="fill" aria-hidden="true"></div>
-      <div class="label">JavaScript</div>
-      <div class="percent">20%</div>
-    </div>
-
-    <div class="skill" data-percent="70" tabindex="0">
-      <div class="fill" aria-hidden="true"></div>
-      <div class="label">Python</div>
-      <div class="percent">70%</div>
-    </div>
-
-    <div class="skill" data-percent="85" tabindex="0">
-      <div class="fill" aria-hidden="true"></div>
-      <div class="label">Réseau</div>
-      <div class="percent">85%</div>
-    </div>
-
-  </section>
-
-  <!-- PROJETS -->
-  <section id="projets">
-    <h2>Projets</h2>
-
-  <a href="https://github.com/kilian-terki/CMS" target="_blank" style="text-decoration:none; color:inherit;">
-    <div class="project-card mb-4">
-      <h4>CMS (Projet BTS CIEL)</h4>
-      <p>Développement d’un mini système de gestion de contenu permettant l’ajout, la modification et l’affichage d’articles. Projet réalisé en PHP avec une base de données.</p>
-    </div>
-  </a>
-
-
-
-    <div class="project-card mb-4">
-      <h4>CMS (Projet BTS CIEL)</h4>
-      <p>Développement d’un mini système de gestion de contenu permettant l’ajout, la modification et l’affichage d’articles. Projet réalisé en PHP avec une base de données.</p>
-    </div>
-
-  </section>
-
-  <!-- CONTACT -->
-  <section id="contacter">
-    <h2>Me contacter</h2>
-    <div class="project-card mb-4" style="display:flex; flex-direction:column; gap:1rem;">
-      <a class="btn btn-dark" href="mailto:kilian.terki2@gmail.com">📧 Envoyer un E-mail</a>
-      <a class="btn btn-dark" href="https://www.linkedin.com/in/kilian-terki-057b84347" target="_blank">🔗 Mon LinkedIn</a>
-      <a class="btn btn-dark" href="https://github.com/kilian-terki" target="_blank">💻 Voir mon GitHub</a>
-
-      <div style="margin-top:1rem;">
-        <h4>📞 Téléphone</h4>
-        <p style="font-size:1.2rem; letter-spacing:1px;">+33 6 25 36 22 56</p>
-      </div>
-    </div>
-  </section>
-
-  <script>
-    // gère hover, focus et touch : remplit la .fill selon data-percent
-    function setupBars(selector) {
-      document.querySelectorAll(selector).forEach(el => {
-        const fill = el.querySelector('.fill');
-        const pct = parseInt(el.dataset.percent) || 0;
-        const percentText = el.querySelector('.percent');
-
-        function activate() {
-          fill.style.width = pct + '%';
-          el.classList.add('active');
-          // ensure percent visible
-          if (percentText) percentText.style.opacity = '1';
-        }
-        function deactivate() {
-          fill.style.width = '0%';
-          el.classList.remove('active');
-          if (percentText) percentText.style.opacity = '0';
-        }
-
-        el.addEventListener('mouseenter', activate);
-        el.addEventListener('mouseleave', deactivate);
-        el.addEventListener('focus', activate);
-        el.addEventListener('blur', deactivate);
-
-        // touch / click toggling for mobiles
-        el.addEventListener('click', (e) => {
-          // toggle active
-          if (el.classList.contains('active')) {
-            deactivate();
-          } else {
-            // deactivate all others to avoid multiple open bars
-            document.querySelectorAll(selector + '.active').forEach(other => {
-              if (other !== el) {
-                other.classList.remove('active');
-                other.querySelector('.fill').style.width = '0%';
-                const pt = other.querySelector('.percent');
-                if (pt) pt.style.opacity = '0';
-              }
-            });
-            activate();
-          }
-        });
-      });
-    }
-
-    // initialise pour skills et langues
-    setupBars('.skill');
-    setupBars('.lang');
-  </script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Portfolio - Kilian TERKI</title>
+
+  <!-- Bootstrap -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+
+  <style>
+    body {
+      font-family: 'Segoe UI', sans-serif;
+      margin: 0;
+      padding: 0;
+      background: linear-gradient(135deg, #1f1f1f, #3a3a3a);
+      color: #e6e6e6;
+    }
+
+    /* NAVBAR */
+    .navbar {
+      background: rgba(0, 0, 0, 0.7) !important;
+      backdrop-filter: blur(6px);
+    }
+
+    /* HEADER */
+    header {
+      background: linear-gradient(145deg, #2a2a2a, #1c1c1c);
+      color: white;
+      padding: 26rem 2rem;
+      min-height: 100vh;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    /* SECTIONS */
+    section {
+      scroll-margin-top: 8rem;
+      max-width: 900px;
+      margin: 12rem auto;
+      background: #2d2d2d;
+      min-height: 70vh;
+      padding: 3rem;
+      border-radius: 20px;
+      box-shadow: 0 0 25px rgba(0,0,0,0.4);
+      color: #f0f0f0;
+    }
+
+    section h2 {
+      border-left: 6px solid #888;
+      padding-left: 1rem;
+      margin-bottom: 2rem;
+      font-size: 2rem;
+      letter-spacing: 1px;
+    }
+
+    /* CARDS PROJETS */
+    .project-card {
+      background: #3b3b3b;
+      padding: 2rem;
+      border-radius: 15px;
+      transition: 0.3s;
+      box-shadow: 0 0 15px rgba(0,0,0,0.3);
+    }
+    .project-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 0 25px rgba(255,255,255,0.1);
+    }
+
+    .btn-dark {
+      background: #555 !important;
+      border: none;
+      transition: 0.2s;
+    }
+    .btn-dark:hover {
+      background: #777 !important;
+    }
+
+    /* SKILL / LANG styling + fill bar */
+    .skill, .lang {
+      padding: 1rem;
+      background: #3b3b3b;
+      border-radius: 10px;
+      position: relative;
+      cursor: pointer;
+      overflow: hidden;
+      margin-bottom: 0.8rem;
+    }
+
+    .fill {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 0%;
+      background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.16));
+      transition: width 0.7s cubic-bezier(.2,.9,.2,1);
+      border-radius: 10px;
+      z-index: 0;
+    }
+
+    .label {
+      position: relative;
+      z-index: 1;
+      font-weight: 600;
+    }
+
+    .percent {
+      position: relative;
+      z-index: 1;
+      float: right;
+      font-weight: 700;
+      opacity: 0;
+      transition: opacity 0.25s ease;
+    }
+
+    .skill:hover .percent, .lang:hover .percent,
+    .skill.active .percent, .lang.active .percent {
+      opacity: 1;
+    }
+
+    /* responsive */
+    @media (max-width:720px){
+      header{padding:8rem 1.2rem;}
+      section{margin:6rem 1rem; padding:1.6rem;}
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Barre de navigation Bootstrap -->
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">Mon Portfolio</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav ms-auto">
+          <li class="nav-item"><a class="nav-link" href="#apropos">À propos</a></li>
+          <li class="nav-item"><a class="nav-link" href="#competences">Compétences</a></li>
+          <li class="nav-item"><a class="nav-link" href="#projets">Projets</a></li>
+          <li class="nav-item"><a class="nav-link" href="#contacter">Contacter</a></li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+
+  <header>
+    <h1>Kilian TERKI</h1>
+    <p>Étudiant en Informatique, Réseau</p>
+  </header>
+
+  <!-- À PROPOS -->
+  <section id="apropos">
+    <h2>À propos de moi</h2>
+    <p>Je m'appelle Kilian TERKI, étudiant en deuxième année de BTS CIEL (Cybersécurité, Informatique et Électronique). Passionné par les technologies et l'informatique, j’aime comprendre comment fonctionnent les systèmes et développer mes compétences à travers des projets concrets. Curieux et motivé, je cherche toujours à progresser dans le domaine du numérique.</p>
+
+    <h3 style="margin-top:2rem; border-left:4px solid #777; padding-left:10px;">Langues</h3>
+
+    <!-- langues avec barre -->
+    <div class="lang" data-percent="100" tabindex="0">
+      <div class="fill" aria-hidden="true"></div>
+      <div class="label">Français</div>
+      <div class="percent">100%</div>
+    </div>
+
+    <div class="lang" data-percent="50" tabindex="0">
+      <div class="fill" aria-hidden="true"></div>
+      <div class="label">Anglais</div>
+      <div class="percent">50%</div>
+    </div>
+
+    <div class="lang" data-percent="20" tabindex="0">
+      <div class="fill" aria-hidden="true"></div>
+      <div class="label">Espagnol</div>
+      <div class="percent">20%</div>
+    </div>
+
+  </section>
+
+  <!-- COMPETENCES -->
+  <section id="competences">
+    <h2>Compétences</h2>
+
+    <div class="skill" data-percent="65" tabindex="0">
+      <div class="fill" aria-hidden="true"></div>
+      <div class="label">HTML / CSS</div>
+      <div class="percent">65%</div>
+    </div>
+
+    <div class="skill" data-percent="25" tabindex="0">
+      <div class="fill" aria-hidden="true"></div>
+      <div class="label">PHP</div>
+      <div class="percent">25%</div>
+    </div>
+
+    <div class="skill" data-percent="20" tabindex="0">
+      <div class="fill" aria-hidden="true"></div>
+      <div class="label">JavaScript</div>
+      <div class="percent">20%</div>
+    </div>
+
+    <div class="skill" data-percent="70" tabindex="0">
+      <div class="fill" aria-hidden="true"></div>
+      <div class="label">Python</div>
+      <div class="percent">70%</div>
+    </div>
+
+    <div class="skill" data-percent="85" tabindex="0">
+      <div class="fill" aria-hidden="true"></div>
+      <div class="label">Réseau</div>
+      <div class="percent">85%</div>
+    </div>
+
+  </section>
+
+  <!-- PROJETS -->
+  <section id="projets">
+    <h2>Projets</h2>
+
+  <a href="https://github.com/kilian-terki/CMS" target="_blank" style="text-decoration:none; color:inherit;">
+    <div class="project-card mb-4">
+      <h4>CMS (Projet BTS CIEL)</h4>
+      <p>Développement d’un mini système de gestion de contenu permettant l’ajout, la modification et l’affichage d’articles. Projet réalisé en PHP avec une base de données.</p>
+    </div>
+  </a>
+  <a href="https://github.com/kilian-terki/Keylogger-" target="_blank" style="text-decoration: none; color:inherit;">
+    <div class="project-card mb-4">
+      <h4>Keylogger (Python)</h4>
+      <p>Développement d’un keylogger éducatif en Python permettant d’enregistrer les frappes clavier pour comprendre le fonctionnement des outils utilisés en cybersécurité.  Ce projet m’a permis d’approfondir la gestion des événements système, les modules Python avancés et les bonnes pratiques en sécurité.</p>
+    </div>
+  </a>
+
+  </section>
+
+  <!-- CONTACT -->
+  <section id="contacter">
+    <h2>Me contacter</h2>
+    <div class="project-card mb-4" style="display:flex; flex-direction:column; gap:1rem;">
+      <a class="btn btn-dark" href="mailto:kilian.terki2@gmail.com">📧 Envoyer un E-mail</a>
+      <a class="btn btn-dark" href="https://www.linkedin.com/in/kilian-terki-057b84347" target="_blank">🔗 Mon LinkedIn</a>
+      <a class="btn btn-dark" href="https://github.com/kilian-terki" target="_blank">💻 Voir mon GitHub</a>
+
+      <div style="margin-top:1rem;">
+        <h4>📞 Téléphone</h4>
+        <p style="font-size:1.2rem; letter-spacing:1px;">+33 6 25 36 22 56</p>
+      </div>
+    </div>
+  </section>
+
+  <script>
+    // gère hover, focus et touch : remplit la .fill selon data-percent
+    function setupBars(selector) {
+      document.querySelectorAll(selector).forEach(el => {
+        const fill = el.querySelector('.fill');
+        const pct = parseInt(el.dataset.percent) || 0;
+        const percentText = el.querySelector('.percent');
+
+        function activate() {
+          fill.style.width = pct + '%';
+          el.classList.add('active');
+          // ensure percent visible
+          if (percentText) percentText.style.opacity = '1';
+        }
+        function deactivate() {
+          fill.style.width = '0%';
+          el.classList.remove('active');
+          if (percentText) percentText.style.opacity = '0';
+        }
+
+        el.addEventListener('mouseenter', activate);
+        el.addEventListener('mouseleave', deactivate);
+        el.addEventListener('focus', activate);
+        el.addEventListener('blur', deactivate);
+
+        // touch / click toggling for mobiles
+        el.addEventListener('click', (e) => {
+          // toggle active
+          if (el.classList.contains('active')) {
+            deactivate();
+          } else {
+            // deactivate all others to avoid multiple open bars
+            document.querySelectorAll(selector + '.active').forEach(other => {
+              if (other !== el) {
+                other.classList.remove('active');
+                other.querySelector('.fill').style.width = '0%';
+                const pt = other.querySelector('.percent');
+                if (pt) pt.style.opacity = '0';
+              }
+            });
+            activate();
+          }
+        });
+      });
+    }
+
+    // initialise pour skills et langues
+    setupBars('.skill');
+    setupBars('.lang');
+  </script>
+</body>
+</html>
