finnission

src/components/HomeSidebar.jsx

@@ -20,7 +20,7 @@ export function HomeSidebar({ layout = 'vertical' }) {
         decoding="async"
       />
       <div className="home-sidebar__cluster">
-        <p className="home-sidebar__name">Prénom Nom</p>
+        <p className="home-sidebar__name">Florent Patruno</p>
       </div>
       <div className="home-sidebar__extra">
         <ul className="home-sidebar__extra-list">

src/components/HomeSkillsBlock.jsx

@@ -7,6 +7,13 @@ const ARIA_CAT_FR = {
   red: 'Rouge',
 }
 
+const SKILL_LEGEND = [
+  { cat: 'green', colorLabel: 'Vert', meaning: 'Efficace' },
+  { cat: 'blue', colorLabel: 'Bleu', meaning: 'Confiant' },
+  { cat: 'yellow', colorLabel: 'Jaune', meaning: 'Suffisant' },
+  { cat: 'red', colorLabel: 'Rouge', meaning: 'Fébrile' },
+]
+
 export function HomeSkillsBlock() {
   const byCat = SKILL_CATEGORY_KEYS.reduce((acc, cat) => {
     acc[cat] = SKILLS.filter((s) => s.cat === cat)
@@ -39,6 +46,21 @@ export function HomeSkillsBlock() {
           )
         })}
       </div>
+      <ul className="home-skills__legend" aria-label="Légende des couleurs des compétences">
+        {SKILL_LEGEND.map(({ cat, colorLabel, meaning }) => (
+          <li key={cat} className="home-skills__legend-item">
+            <span
+              className={`home-skills__legend-swatch home-skills__legend-swatch--${cat}`}
+              aria-hidden
+            />
+            <span className="home-skills__legend-text">
+              <span className="home-skills__legend-color">{colorLabel}</span>
+              <span aria-hidden> : </span>
+              <span className="home-skills__legend-meaning">{meaning}</span>
+            </span>
+          </li>
+        ))}
+      </ul>
     </section>
   )
 }

src/data/skills.js

@@ -72,6 +72,11 @@ export const SKILLS = [
     cat: 'green',
     desc: 'Déploiement et maintenance de services conteneurisés : images, compose, réseaux et volumes, intégration dans un parc de serveurs privés et documentation des stacks.',
   },
+  {
+    label: 'Bot',
+    cat: 'green',
+    desc: 'Bots connectés à des flux ou APIs (chat, notifications, automatisation) : écoute d’événements, réponses ciblées et intégration avec des services tiers.',
+  },
   {
     label: 'Réseau Système',
     cat: 'blue',

src/index.css

@@ -456,7 +456,8 @@ code {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: var(--page-pad);
-  align-items: start;
+  /* Même hauteur pour les deux panneaux de la première ligne */
+  align-items: stretch;
 }
 
 .page--home:not(.page--home-profil)
@@ -658,6 +659,69 @@ code {
   gap: 0.5rem 0.65rem;
 }
 
+.home-skills__legend {
+  list-style: none;
+  margin: 0.9rem 0 0;
+  padding: 0.75rem 0 0;
+  border-top: 1px solid var(--border);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  grid-auto-flow: column;
+  gap: 0.4rem clamp(0.75rem, 3vw, 1.35rem);
+  align-items: center;
+  font-size: 0.8rem;
+  line-height: 1.35;
+  color: var(--text);
+}
+
+.home-skills__legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-width: 0;
+}
+
+.home-skills__legend-text {
+  min-width: 0;
+}
+
+.home-skills__legend-color {
+  font-weight: 600;
+  color: var(--text-h);
+}
+
+.home-skills__legend-meaning {
+  font-weight: 500;
+}
+
+.home-skills__legend-swatch {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+
+.home-skills__legend-swatch--green {
+  background: var(--skill-green-bg);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--skill-green-text) 22%, transparent);
+}
+
+.home-skills__legend-swatch--blue {
+  background: var(--skill-blue-bg);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--skill-blue-text) 22%, transparent);
+}
+
+.home-skills__legend-swatch--yellow {
+  background: var(--skill-yellow-bg);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--skill-yellow-text) 22%, transparent);
+}
+
+.home-skills__legend-swatch--red {
+  background: var(--skill-red-bg);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--skill-red-text) 22%, transparent);
+}
+
 .home-skill {
   display: inline-block;
   padding: 0.35rem 0.65rem;