update
This commit is contained in:
gpatruno
@@ -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">
|
||||
{SKILLS.map(({ label, cat }) => (
|
||||
<li key={label}>
|
||||
<span className={`home-skill home-skill--${cat}`}>{label}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="home-skills__rows">
|
||||
{SKILL_CATEGORY_KEYS.map((cat) => {
|
||||
const items = byCat[cat]
|
||||
if (!items.length) return null
|
||||
return (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
+34
-2
@@ -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`). */
|
||||
|
||||
+68
-26
@@ -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)));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user