From 2d941c1dbbe81e8ba497e927335cf13128b9fc4e Mon Sep 17 00:00:00 2001 From: gpatruno Date: Mon, 20 Apr 2026 00:05:47 +0200 Subject: [PATCH] update --- src/components/HomeSkillsBlock.jsx | 42 ++++++++++--- src/data/skills.js | 36 +++++++++++- src/index.css | 94 +++++++++++++++++++++--------- 3 files changed, 136 insertions(+), 36 deletions(-) diff --git a/src/components/HomeSkillsBlock.jsx b/src/components/HomeSkillsBlock.jsx index ac2019b..ed35c29 100644 --- a/src/components/HomeSkillsBlock.jsx +++ b/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 (

Compétence

- +
+ {SKILL_CATEGORY_KEYS.map((cat) => { + const items = byCat[cat] + if (!items.length) return null + return ( +
    + {items.map(({ label }) => ( +
  • + + {label} + +
    • + ))} +
+ ) + })} +
) } diff --git a/src/data/skills.js b/src/data/skills.js index 670b2c0..4f8fd84 100644 --- a/src/data/skills.js +++ b/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`). */ diff --git a/src/index.css b/src/index.css index d0c4a1b..44714af 100644 --- a/src/index.css +++ b/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))); }