Chargement...

Charte graphique

Cette page affiche tous les types hiérarchiques et de contenu pour valider la cohérence visuelle en un seul endroit.

1. Types hiérarchiques

Tailles, couleurs et graisses des éléments texte de base.

h1 (dans .header .titreDePage) — --enorme

Mes Profils

Contexte : header bleu, texte blanc, taille --enorme

h1 (standard, ex: Hero.Titre) — --enorme

Alain Meunier

Contexte : fond clair, texte noir, taille --enorme

--st (sous-titre, ex: Hero.sousTitre) — --moyenne, gras

Disponible et enthousiaste pour un projet stimulant

Sémantique : complément du titre (pas un h2). Rendu en <p class="sousTitre">

h2 — --grande

Titre de niveau 2 (h2)

h3 — --normale, bleu, gras

Titre de niveau 3 (h3)

p — --normale — reçoit le Markdown parsé

Paragraphe avec texte en gras (Markdown: **gras**) et italique (*italique*).
Saut de ligne simple (Markdown: \n).
Contient aussi des liens cliquables (Markdown: [texte](url)).

Utilisé par: hero.description, texteLarge.texte, competence.description, temoignage.temoignage

auteur (a) — --normale, italique

— Prénom Nom, fonction de l'auteur

liste l1 — --normale

Élément de liste niveau 1
Élément de liste niveau 1
Élément de liste niveau 1

lien (lk) — --normale, bleu, souligné

Voici un lien cliquable avec style distinct.

bouton (b) — --normale, blanc sur bleu

h4 — --petite

Titre de niveau 4 (h4)

note (n) — --petite — reçoit le Markdown parsé

25 ans d'expérience à transformer des idées en produits logiciels qui génèrent de la valeur.

Utilisé par: experienceEtApprentissage.description

sous-liste l2 — --petite

Élément de liste niveau 1
- Sous-élément niveau 2 (plus petit)
- Sous-élément niveau 2 (plus petit)

2. Hiérarchie du site

Structure des containers et propriétés générée depuis canonicalSpec.ts.

Générée par utils/siteHierarchyGenerator.ts (sans IA)

body/
└── .main-content-cont/ (page)
    ├── header/
    │   └── titreDePage.texte/
    │       └── titreDePage.texte (--h1)
    ├── listeDesPages/ (data-layout="draw with page properties")
    │   ├── listeDesPages.titre: "Liste des pages" (--m)
    │   └── listeDesPages.page/
    │       └── listeDesPages.page (--l1)
    ├── hero/ (data-layout="2 columns")
    │   ├── hero.gauche/
    │   │   ├── hero.titre/
    │   │   │   └── hero.titre (--h1)
    │   │   ├── hero.sousTitre/
    │   │   │   └── hero.sousTitre (--st)
    │   │   ├── hero.description/
    │   │   │   └── hero.description (--p)
    │   │   ├── hero.callToAction/
    │   │   │   └── hero.callToAction (--b)
    │   │   └── hero.ensavoirplus/
    │   │       └── hero.ensavoirplus (--lk)
    │   └── hero.droite/
    │       └── hero.video/
    │           └── hero.video (--v)
    ├── listeDeProfils/ (data-layout="4 columns x 1 row")
    │   ├── listeDeProfils.titre: "Mes profils professionnels" (--m)
    │   └── profil/
    │       ├── profil.titre/
    │       │   └── profil.titre (--h2)
    │       ├── profil.jobTitles/
    │       │   └── profil.jobTitles (--n)
    │       ├── profil.jobTitle/
    │       │   └── profil.jobTitle (--l1)
    │       ├── profil.slug/
    │       │   └── profil.slug (--m)
    │       ├── profil.route/
    │       │   └── profil.route (--b)
    │       └── profil.cvPath/
    │           └── profil.cvPath (--lk)
    ├── titre.texte/
    │   └── titre.texte (--h2)
    ├── video.urlYouTube/
    │   └── video.urlYouTube (--v)
    ├── listeDeTemoignages/ (data-layout="2 columns x N rows")
    │   ├── listeDeTemoignages.titre: "Témoignages" (--h2)
    │   └── temoignage/
    │       ├── temoignage.temoin/
    │       │   ├── temoignage.temoin.photo/
    │       │   │   └── temoignage.photo/
    │       │   │       └── temoignage.photo (--photo)
    │       │   └── temoignage.temoin.texte/
    │       │       ├── temoignage.nom/
    │       │       │   └── temoignage.nom (--h3)
    │       │       └── temoignage.fonction/
    │       │           └── temoignage.fonction (--n)
    │       └── temoignage.temoignage/
    │           └── temoignage.temoignage (--p)
    ├── domaineDeCompetence/
    │   ├── domaineDeCompetence.header/
    │   │   ├── domaineDeCompetence.titre/
    │   │   │   └── domaineDeCompetence.titre (--h2)
    │   │   ├── domaineDeCompetence.contenu/
    │   │   │   └── domaineDeCompetence.contenu (--p)
    │   │   └── domaineDeCompetence.auteur/
    │   │       └── domaineDeCompetence.auteur (--a)
    │   └── domaineDeCompetence.competences/ (data-layout="3 columns x 1 row")
    │       └── competence/
    │           ├── competence.titre/
    │           │   └── competence.titre (--h3)
    │           ├── competence.image.src/
    │           │   └── competence.image.src (--img)
    │           ├── competence.image.alt/
    │           │   └── competence.image.alt (--n)
    │           ├── competence.description/
    │           │   └── competence.description (--p)
    │           ├── competence.auteur/
    │           │   └── competence.auteur (--a)
    │           └── competence.bouton.action/
    │               └── competence.bouton.action (--lk)
    ├── listeDesExperiencesEtApprentissages/ (data-layout="accordeon, X rows")
    │   ├── listeDesExperiencesEtApprentissages.titre/
    │   │   └── listeDesExperiencesEtApprentissages.titre (--h4)
    │   └── experienceEtApprentissage/
    │       ├── experienceEtApprentissage.categorie/
    │       │   └── experienceEtApprentissage.categorie (--m)
    │       ├── experienceEtApprentissage.description/
    │       │   └── experienceEtApprentissage.description (--n)
    │       └── experienceEtApprentissage.periode/
    │           └── experienceEtApprentissage.periode (--m)
    ├── texteLarge.texte/
    │   └── texteLarge.texte (--p)
    ├── callToAction.action/
    │   └── callToAction.action (--b)
    ├── groupeDeBoutons/ (data-layout="1 column, centered")
    │   ├── groupeDeBoutons.titre: "Actions" (--m)
    │   └── bouton/
    │       └── bouton.command/
    │           └── bouton.command (--lk)
    └── listeDeDetournementsVideo/ (data-layout="X rows")
        ├── listeDeDetournementsVideo.titre: "Détournements vidéo" (--h2)
        └── detournementVideo/
            ├── detournementVideo.header/
            │   ├── detournementVideo.titre/
            │   │   └── detournementVideo.titre (--h2)
            │   ├── detournementVideo.pitch/
            │   │   └── detournementVideo.pitch (--p)
            │   └── detournementVideo.date/
            │       └── detournementVideo.date (--n)
            └── detournementVideo.videos/
                ├── detournementVideo.videoDetournee/
                │   ├── detournementVideo.titreVideoDetournee/
                │   │   └── detournementVideo.titreVideoDetournee (--h3)
                │   ├── detournementVideo.sourceVideoDetournee/
                │   │   └── detournementVideo.sourceVideoDetournee (--p)
                │   ├── detournementVideo.videoDetournee/
                │   ├── detournementVideo.videoDetournee (--v)
                │   ├── detournementVideo.droitsAuteur/
                │   │   └── detournementVideo.droitsAuteur (--n)
                │   └── detournementVideo.linkedin/
                │       └── detournementVideo.linkedin (--n)
                └── detournementVideo.videoOriginale/
                    ├── detournementVideo.titreVideoOriginale/
                    │   └── detournementVideo.titreVideoOriginale (--h3)
                    ├── detournementVideo.sourceVideoOriginale/
                    │   └── detournementVideo.sourceVideoOriginale (--p)
                    ├── detournementVideo.videoOriginale/
                    └── detournementVideo.videoOriginale (--v)

Légende : dossier/ = container, ligne = propriété. Source : constants/canonicalSpec.ts

3. Types de contenu

Aperçu de chaque type de contenu avec sa classe racine.

.hero[data-layout="2 columns"] — .heroGauche | .heroDroite

Alain Meunier

Disponible et enthousiaste pour un projet stimulant (CDI ou freelance)

25 ans d'expérience à transformer des idées en produits logiciels qui génèrent de la valeur.
J'ai équipé 15% des radiologues libéraux français avec mon premier produit.
Passionné par la résolution de problèmes complexes, je combine rigueur technique et leadership humain.

Télécharger mon CV Discutons

[Vidéo YouTube]

Données réelles : index.json → hero (avec video)

.listeDeProfils — data-layout="4 columns x 1 row"

Produit logiciel

CPO - Chief Product Officer
HOP - Head of Product
Product Manager
Product Owner

Télécharger le CV

Opérations

Manager de transition
COO - Chief Operation Officer
HOO - Head of Operation
Directeur opérationnel

Télécharger le CV

Transformation Agile

Transformation Agile
Coach Agile
Scrum Master
Product Owner

Télécharger le CV

Technologie

CTO - Chief Technology Officer
HTO - Head of Technology
Directeur Technique

Télécharger le CV

Structure : .profil > (.titre + .jobTitles + .actions) — .actions contient le bouton et le lien CV

.titre — spec: texte=--h2

Titre de section (--h2)

.listeDeTemoignages — data-layout="2 columns x N rows"

[Photo]

Florent Grosmaitre

CEO chez CryptoNext Security

« J'ai eu la chance de travailler avec Alain pour l'entreprise Actibase qu'il avait fondé. »

[Photo]

Marie Dupont

Directrice Produit

« Un professionnel exceptionnel avec une vision stratégique remarquable. »

[Photo]

Pierre Martin

CTO chez TechCorp

« Alain combine expertise technique et leadership humain de façon unique. »

Types : .nom (--h3), .fonction (--n), .temoignage (--p). Grille : 2 colonnes responsive.

.domaineDeCompetence — spec: titre=--h2, contenu=--p, auteur=--a

Interactions humaines

« Lorsque les gens sont financièrement investis, ils veulent un retour. Lorsque les gens sont émotionnellement investis, ils veulent contribuer. »

— Simon Sinek

Créativité

« L'imagination est plus importante que le savoir. Car le savoir est limité, tandis que l'imagination embrasse le monde entier. »

— Albert Einstein

Voir le portfolio

Service client

Un client satisfait est notre meilleur commercial. Il est très compliqué de construire une image de marque, mais facile de la détruire.

Gestion des talents

Le succès d'une entreprise repose sur la reconnaissance et le développement des talents individuels.

Données réelles : domaines.json → interactions-humaines, competences.json → creativite, service-client, gestion-des-talents

.texteLarge — Markdown: **gras**, \n\n

Premier paragraphe avec texte en gras pour les points importants. Suite du premier paragraphe sur la même ligne.

Deuxième paragraphe après \n\n. Mon profil polyvalent me permet d'apporter des solutions créatives à vos défis.

Troisième paragraphe. Conclusion du texte large.

JSON: "texte": "Premier **paragraphe**.\n\nDeuxième **paragraphe**."

.detournementVideo — .titre (--h2) + .pitch (--p) + .videos (2 colonnes)

Sator

Contexte : promotion de l'offre Sator, la plateforme de formation dédiée aux enjeux sérieux.

La machine à apprendre

Sator

VOIR L'ENGAGEMENT SUR LINKEDIN

La machine à apprendre

Rendu par le composant unique VideoDetournement (même rendu que /portfolio-detournements)

.groupeBoutons — data-layout="1 column, centered"

Discutons Mes profils

Boutons empilés verticalement et centrés

.callToAction — spec: action=--lk (aspect bouton)Faisons connaissance...

Données réelles : detournement-video.json → callToAction.action

.experienceEtApprentissage — spec: description=--n (Markdown)

Expériences et apprentissages

Recrutement et formation de plus de 100 collaborateurs (techniciens, formateurs, commerciaux) avec alignement via « moving motivators » du Management 3.0

Depuis 1995

Données réelles : experienceEtApprentissage.json → id 2 et 5

4. Tokens CSS (variables)

Valeurs actuelles des tokens définis dans globals.css.

Couleurs

--CouleurFoncé

--CouleurClaire

--Noir

--Blanc

Tailles de police

--enorme: 2rem

--grande: 1.5rem

--moyenne: 1.25rem

--normale: 1rem

--petite: 0.8rem