diff --git a/src/components/HomeSidebar.jsx b/src/components/HomeSidebar.jsx
index 5a42ea1..df43fc6 100644
--- a/src/components/HomeSidebar.jsx
+++ b/src/components/HomeSidebar.jsx
@@ -20,7 +20,7 @@ export function HomeSidebar({ layout = 'vertical' }) {
decoding="async"
/>
-
Prénom Nom
+
Florent Patruno
diff --git a/src/components/HomeSkillsBlock.jsx b/src/components/HomeSkillsBlock.jsx
index ed35c29..1dd7dae 100644
--- a/src/components/HomeSkillsBlock.jsx
+++ b/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() {
)
})}
+
+ {SKILL_LEGEND.map(({ cat, colorLabel, meaning }) => (
+ -
+
+
+ {colorLabel}
+ :
+ {meaning}
+
+
+ ))}
+
)
}
diff --git a/src/data/skills.js b/src/data/skills.js
index 4f8fd84..4df8bdf 100644
--- a/src/data/skills.js
+++ b/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',
diff --git a/src/index.css b/src/index.css
index 09f1543..2a9de7c 100644
--- a/src/index.css
+++ b/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;