From 76517f1eb3773db87bedf65a416b604ebe578aa5 Mon Sep 17 00:00:00 2001
From: Didictateur <adrien.decosse@gmail.com>
Date: Wed, 19 Nov 2025 08:28:56 +0100
Subject: [PATCH] =?UTF-8?q?rajout=20des=20comp=C3=A9tences?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 style.css  | 19 +++++++++++++
 2 files changed, 98 insertions(+)

diff --git a/index.html b/index.html
index 26bd3f1..0c9533b 100644
--- a/index.html
+++ b/index.html
@@ -35,6 +35,85 @@
           <li><strong>E-mail:</strong> <a href="mailto:adrien.decosse@ens-rennes.fr">adrien.decosse@ens-rennes.fr</a></li>
           <li><strong>GitHub:</strong> <a href="https://github.com/Didictateur">Didictateur</a></li>
         </ul>
+
+        <div class="skills">
+          <h3>Compétences</h3>
+
+          <ul class="skill-list">
+            <li class="skill">
+              <span class="skill-name">Python</span>
+              <div class="skill-bar" role="img" aria-label="Niveau Python">
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+              </div>
+            </li>
+
+            <li class="skill">
+              <span class="skill-name">C</span>
+              <div class="skill-bar" role="img" aria-label="Niveau C">
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment"></span>
+                <span class="segment"></span>
+              </div>
+            </li>
+
+            <li class="skill">
+              <span class="skill-name">C++</span>
+              <div class="skill-bar" role="img" aria-label="Niveau C++">
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment"></span>
+              </div>
+            </li>
+
+            <li class="skill">
+              <span class="skill-name">OCaml</span>
+              <div class="skill-bar" role="img" aria-label="Niveau OCaml">
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment"></span>
+                <span class="segment"></span>
+              </div>
+            </li>
+
+            <li class="skill">
+              <span class="skill-name">Lua</span>
+              <div class="skill-bar" role="img" aria-label="Niveau Lua">
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+              </div>
+            </li>
+
+            <li class="skill">
+              <span class="skill-name">HTML/CSS</span>
+              <div class="skill-bar" role="img" aria-label="Niveau HTML/CSS">
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment filled"></span>
+                <span class="segment"></span>
+                <span class="segment"></span>
+                <span class="segment"></span>
+              </div>
+            </li>
+            
+          </ul>
+        </div>
       </aside>
 
       <section class="main-card">
diff --git a/style.css b/style.css
index a6d3fc4..fe97520 100644
--- a/style.css
+++ b/style.css
@@ -90,6 +90,25 @@ body{
 .contact-list li{margin:10px 0}
 .contact-list a{color:var(--accent); text-decoration:none}
 
+/* Skills bar: each bar composed of 6 segments; add/remove 'filled' on .segment to change level */
+.skills{margin-top:14px; text-align:center}
+.skills h3{margin:6px 0 10px; font-size:16px; color:var(--text); font-weight:700}
+.skill-list{list-style:none; padding:0; margin:0; display:grid; gap:10px; text-align:left}
+.skill-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
+.skill{display:flex; align-items:center; gap:12px}
+.skill-name{width:100px; font-weight:600; color:var(--muted); font-size:14px}
+.skill-bar{flex:1; display:flex; gap:6px; align-items:center}
+.skill-bar .segment{flex:1; height:10px; background:rgba(15,23,42,0.06); border-radius:6px}
+.skill-bar .segment.filled{background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset}
+.skill-bar .segment:first-child{border-radius:6px 4px 4px 6px}
+.skill-bar .segment:last-child{border-radius:4px 6px 6px 4px}
+
+@media (max-width:600px){
+  .skill{gap:8px}
+  .skill-name{width:90px; font-size:13px}
+  .skill-bar .segment{height:9px}
+}
+
 .profile-card > a{
   display:inline-block;
   line-height:0;