Actualiser portfolio.html

2025-12-04 12:47:59 +00:00
parent f06ee4fdc5
commit 680fda3ff2
1 changed files with 0 additions and 20 deletions
--- a/portfolio.html
+++ b/portfolio.html
@@ -4,8 +4,6 @@
  <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>
@@ -17,13 +15,11 @@
      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;
@@ -35,7 +31,6 @@
      justify-content: center;
    }

-    /* SECTIONS */
    section {
      scroll-margin-top: 8rem;
      max-width: 900px;
@@ -56,7 +51,6 @@
      letter-spacing: 1px;
    }

-    /* CARDS PROJETS */
    .project-card {
      background: #3b3b3b;
      padding: 2rem;
@@ -78,7 +72,6 @@
      background: #777 !important;
    }

-    /* SKILL / LANG styling + fill bar */
    .skill, .lang {
      padding: 1rem;
      background: #3b3b3b;
@@ -121,7 +114,6 @@
      opacity: 1;
    }

-    /* responsive */
    @media (max-width:720px){
      header{padding:8rem 1.2rem;}
      section{margin:6rem 1rem; padding:1.6rem;}
@@ -130,7 +122,6 @@
 </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>
@@ -153,14 +144,12 @@
    <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>
@@ -181,7 +170,6 @@

  </section>

-  <!-- COMPETENCES -->
  <section id="competences">
    <h2>Compétences</h2>

@@ -217,7 +205,6 @@

  </section>

-  <!-- PROJETS -->
  <section id="projets">
    <h2>Projets</h2>

@@ -236,7 +223,6 @@

  </section>

-  <!-- CONTACT -->
  <section id="contacter">
    <h2>Me contacter</h2>
    <div class="project-card mb-4" style="display:flex; flex-direction:column; gap:1rem;">
@@ -252,7 +238,6 @@
  </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');
@@ -262,7 +247,6 @@
        function activate() {
          fill.style.width = pct + '%';
          el.classList.add('active');
-          // ensure percent visible
          if (percentText) percentText.style.opacity = '1';
        }
        function deactivate() {
@@ -276,13 +260,10 @@
        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');
@@ -297,7 +278,6 @@
      });
    }

-    // initialise pour skills et langues
    setupBars('.skill');
    setupBars('.lang');
  </script>