update

src/components/HomeSkillsBlock.jsx

@@ -1,18 +1,44 @@
-import { SKILLS } from '../data/skills.js'
+import { SKILL_CATEGORY_KEYS, SKILLS } from '../data/skills.js'
+
+const ARIA_CAT_FR = {
+  green: 'Vert',
+  blue: 'Bleu',
+  yellow: 'Jaune',
+  red: 'Rouge',
+}
 
 export function HomeSkillsBlock() {
+  const byCat = SKILL_CATEGORY_KEYS.reduce((acc, cat) => {
+    acc[cat] = SKILLS.filter((s) => s.cat === cat)
+    return acc
+  }, {})
+
   return (
     <section className="home-skills" aria-labelledby="home-skills-title">
       <h2 className="home-skills__title" id="home-skills-title">
         Compétence
       </h2>
-      <ul className="home-skills__list">
+      <div className="home-skills__rows">
-        {SKILLS.map(({ label, cat }) => (
+        {SKILL_CATEGORY_KEYS.map((cat) => {
-          <li key={label}>
+          const items = byCat[cat]
-            <span className={`home-skill home-skill--${cat}`}>{label}</span>
+          if (!items.length) return null
-          </li>
+          return (
-        ))}
+            <ul
-      </ul>
+              key={cat}
+              className="home-skills__row-list"
+              aria-label={`Compétences : ${ARIA_CAT_FR[cat]}`}
+            >
+              {items.map(({ label }) => (
+                <li key={label}>
+                  <span className={`home-skill home-skill--${cat}`}>
+                    {label}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )
+        })}
+      </div>
     </section>
   )
 }

src/data/skills.js

@@ -13,7 +13,7 @@ const SKILL_CATEGORY_EXTRA = {
   Documentation: 'yellow',
   Scraping: 'green',
   API: 'blue',
-  'Base de données': 'blue',
+  'Base de données': 'yellow',
   'C#': 'yellow',
   Multijoueur: 'yellow',
   'Jeu vidéo': 'yellow',
@@ -39,7 +39,9 @@ const SKILL_CATEGORY_EXTRA = {
   Suivi: 'blue',
   Vidéo: 'blue',
   YouTube: 'red',
-  Docker: 'blue',
+  Docker: 'green',
+  JavaScript: 'blue',
+  'C++': 'yellow',
   BookStack: 'blue',
   Stockage: 'yellow',
   Git: 'blue',
@@ -65,6 +67,11 @@ export const SKILLS = [
     cat: 'green',
     desc: 'Utilisé en entreprise et quotidiennement. pour des projets nécessitant une grande flexibilité : reconnaissance d\'image,api, ia, trading cryptomonnaie, etc.',
   },
+  {
+    label: 'Docker',
+    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: 'Réseau Système',
     cat: 'blue',
@@ -80,16 +87,41 @@ export const SKILLS = [
     cat: 'blue',
     desc: 'Utilisé en entreprise et au domicile. Diagnostic, réparation et modification de fonctionnement.',
   },
+  {
+    label: 'JavaScript',
+    cat: 'blue',
+    desc: 'Interfaces web, outils côté client ou Node selon le besoin : intégration API, logique métier légère et automatisation dans l’écosystème des services hébergés.',
+  },
   {
     label: 'JAVA',
     cat: 'yellow',
     desc: 'Utilisée en entreprise, cette application mobile remplace l\'interface utilisateur Android, Elle permet la gestion des droits d\'accès à l\'appareil ainsi que le suivi d\'activités pour faciliter la maintenance et l\'accompagnement de l\'intervenant. intègre également des fonctionnalité comme : trajets GPS, comptage de détections par reconnaissance d\'image, calendrier des missions...',
   },
+  {
+    label: 'C++',
+    cat: 'yellow',
+    desc: 'Performance, contrôle fin des ressources et interopérabilité : composants critiques, glue avec du code existant ou outils quand le typage fort et le déterminisme sont utiles.',
+  },
+  {
+    label: 'C#',
+    cat: 'yellow',
+    desc: 'Développement d’applications et services sur l’écosystème .NET lorsque l’environnement ou l’existant impose ce langage et ses bibliothèques.',
+  },
+  {
+    label: 'Base de données',
+    cat: 'yellow',
+    desc: 'Modélisation, requêtes et maintenance : schémas relationnels, sauvegardes, performances et intégration dans des backends (PHP, API, applications mobiles).',
+  },
   {
     label: 'Assembleur',
     cat: 'red',
     desc: 'Utilisé en entreprise et au domicile lecture de partitions et modification de cette derniere, afin de modifier le comportement d\'appareils android, modification de comportement de logicel : jeux video, etc.',
   },
+  {
+    label: 'C',
+    cat: 'red',
+    desc: 'Programmation bas niveau et embarqué : lecture de code existant, corrections ciblées et intégration avec des chaînes de build ou du matériel contraint.',
+  },
 ]
 
 /** Libellé → catégorie (profil + projets + tout libellé ajouté dans `SKILL_CATEGORY_EXTRA`). */

src/index.css

@@ -425,6 +425,7 @@ code {
 }
 
 .content-stack__panel {
+  box-sizing: border-box;
   flex: 1 1 0;
   min-height: 8rem;
   border: 1px solid var(--border);
@@ -450,6 +451,66 @@ code {
   overflow: visible;
 }
 
+/* Accueil : « Compétence » + « Parcours » côte à côte ; intro en dessous pleine largeur */
+.page--home:not(.page--home-profil) .content-stack {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--page-pad);
+  align-items: start;
+}
+
+.page--home:not(.page--home-profil)
+  .content-stack
+  > .content-stack__panel:nth-child(3) {
+  grid-column: 1 / -1;
+}
+
+@media (max-width: 960px) {
+  /* Même seuil que le stack Compétence / Parcours : sidebar au-dessus, zone main pleine largeur */
+  .page--home {
+    grid-template-columns: 1fr;
+    min-height: auto;
+  }
+
+  .home-sidebar {
+    min-height: auto;
+  }
+
+  .home-main {
+    min-height: auto;
+    flex: 0 0 auto;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+  }
+
+  .page--home .content-stack {
+    flex: 0 0 auto;
+    min-height: auto;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .page--home .content-stack__panel {
+    flex: 0 0 auto;
+    min-height: auto;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+  }
+
+  .page--home:not(.page--home-profil) .content-stack {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .page--home:not(.page--home-profil)
+    .content-stack
+    > .content-stack__panel:nth-child(3) {
+    grid-column: unset;
+  }
+}
+
 .home-intro {
   display: flex;
   flex-direction: column;
@@ -582,7 +643,13 @@ code {
   letter-spacing: -0.02em;
 }
 
-.home-skills__list {
+.home-skills__rows {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.home-skills__row-list {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -987,31 +1054,6 @@ code {
 }
 
 @media (max-width: 768px) {
-  .page--home {
-    grid-template-columns: 1fr;
-    min-height: auto;
-  }
-
-  .home-sidebar {
-    min-height: auto;
-  }
-
-  .home-main {
-    min-height: auto;
-    flex: 0 0 auto;
-  }
-
-  /* Ne pas partager la hauteur à 50/50 : le bloc Parcours garde toute sa hauteur */
-  .page--home .content-stack {
-    flex: 0 0 auto;
-    min-height: auto;
-  }
-
-  .page--home .content-stack__panel {
-    flex: 0 0 auto;
-    min-height: auto;
-  }
-
   .page--stack-only .content-stack {
     min-height: min(70vh, calc(100svh - var(--topnav-h) - 2 * var(--page-pad)));
   }