Système de design
Catalogue consultable des jetons et composants de présentation réutilisables du portfolio.
Les contrôles présentés sont des démonstrations isolées : ils n’envoient aucune donnée et n’exécutent aucune opération administrative.
Jetons de couleur
Piles typographiques
Piles réellement utilisées par le site et les documents générés. Les polices PDF et e-mail ne sont pas chargées comme polices web.
Sans-serif système
Texte principal de l’interface sans téléchargement obligatoire.
Aa — Portfolio accessible 0123456789
Monospace système
Code, commandes et valeurs techniques.
Aa — Portfolio accessible 0123456789
Font Awesome
Police réservée exclusivement aux pictogrammes de l’interface.
Aa — Portfolio accessible 0123456789
Solution de repli compatible avec les clients de messagerie.
Aa — Portfolio accessible 0123456789
Police incorporable utilisée par Dompdf pour le CV.
Aa — Portfolio accessible 0123456789
Typographie
Heading 1
Heading 2
Heading 3
Le texte principal conserve une hiérarchie lisible sur les surfaces sombres.
Le texte secondaire réduit l’emphase sans compromettre le contraste.
Actions et états
Texte uniquement
Texte et icône
Icône uniquement
Contrats de rendu
Lien de navigation
<x-molecules.method-action method="DELETE" ...>
Action HTTP avec CSRF
Variantes à l’état survolé
États du contrôle
Parcours au clavier
Les boutons présentent déjà le focus clavier ; utilisez Tab et Maj+Tab pour tester aussi le parcours réel.
Champs de formulaire
Survolez ou utilisez Tab pour comparer les états sans décalage de mise en page.
Vérifiez la valeur saisie.
États de la sélection
Les états non valide et désactivé ont priorité sur le survol et le focus.
Vérifiez la valeur saisie.
Cartes et badges
Carte standard
Contenu informatif statique, sans destination ni action associée.
- Carte standard
- Elle ne reçoit pas le focus, ne réagit pas au survol et n’annonce aucune action.
- Carte interactive
- Elle expose la sémantique d’un lien, un repère directionnel, le survol, un focus visible et un retour sonore.
États de la case à cocher
Le survol et le focus renforcent le contrôle sans masquer la sélection, les erreurs ou l’état désactivé.
Pastilles et contrôles compacts
composer test
Lien de contact du pied de page : essayez le survol et le focus clavier
Navigation
Tab entre dans le groupe ; Flèche gauche/droite, Origine et Fin déplacent le focus ; Entrée ou Espace active.
Les onglets partagent la sélection, le focus visible et le retour sonore.
Les onglets partagent la sélection, le focus visible et le retour sonore.
Les onglets partagent la sélection, le focus visible et le retour sonore.
Fil d’Ariane
Une hiérarchie compacte avec des liens interactifs et une page courante non activable.
Pagination
Le paginateur partagé réellement utilisé par les listes affiche le nombre de résultats, la page courante et les contrôles précédent et suivant.
Utilisez Tab pour atteindre les liens ; l’état courant et les contrôles indisponibles sont exclus du parcours du focus.
Tableaux adaptatifs
Les listes deviennent des cartes étiquetées ; les matrices conservent lignes et colonnes dans une zone de défilement locale.
Liste en cartes
Sous 768 px, chaque valeur conserve son étiquette et le contenu long revient à la ligne.
| Élément | État | Valeur |
|---|---|---|
| Élément de démonstration au nom long | Actif | 24,50 € |
Matrice défilante
Faites défiler horizontalement pour voir toutes les colonnes.
La zone est nommée, accessible au clavier et contient le défilement horizontal.
| Métrique | Actuel | Précédent | Limite |
|---|---|---|---|
| Bundle CSS | 84 KB | 88 KB | 100 KB |
Pages de détail partagées
Variantes réelles du modèle utilisé par les projets, loisirs et compétences.
Variante avec image
Variante avec icône et niveau
Compétence
Compétence de démonstration
80%La variante sans image utilise un signe graphique tout en conservant le même modèle.
Relations
Projet associé
Parcours chronologique
Cas d’usage documenté
Ouvrir le Parcours
Anatomie, états responsifs et contraintes de performance de la timeline qui relie Projets et Compétences chronologiquement.
Anatomie Atomic Design
États et adaptation
- Bureau : un serpentin adaptatif de deux à quatre Projets par rangée, avec virages continus et branches au-dessus ou sous le tronc.
- Mobile et contenu dense : un axe vertical, les fruits à droite et aucun débordement horizontal ; un commutateur facultatif ouvre le serpentin pivoté de 90 degrés avec un Projet par rangée.
- Sans JavaScript ou avec mouvement, transparence ou couleurs forcées, tout le contenu reste lisible et navigable.
Contrat de performance
- Sass et JavaScript sont des points d’entrée réservés à la page Parcours et n’alourdissent pas le bundle global.
- Les mesures SVG sont réutilisées entre couches équivalentes et recalculées uniquement lorsque la mise en page change.
- Une seule horloge gère révélation et impulsions ; les petits appareils ou écrans tactiles utilisent des impulsions toutes les deux secondes et un rendu proche de 30 fps, suspendu hors du viewport.
Retour utilisateur
Opération terminée
L’état positif reste visible sans audio.
Information
Un détail utile qui n’interrompt pas le parcours.
Attention
L’action nécessite une vérification avant de continuer.
Erreur
Le problème est communiqué avec du texte et de la couleur.
Retour compact
Il réduit la densité visuelle sans masquer d’informations.
- Premier détail contextuel.
- Deuxième détail contextuel.
Retour refermable
L’espace de fermeture apparaît uniquement avec le contrôle associé.
Priorité et annonces accessibles
- Contenu statique
- Aucune région active : le lecteur d’écran le rencontre dans l’ordre normal de la page.
- Mise à jour non urgente
- announce utilise status et aria-live polite pour communiquer un changement sans interrompre.
- Erreur urgente
- La variante danger annoncée utilise alert et aria-live assertive. Les erreurs de champ restent associées à leur contrôle.
Inventaire des icônes
178 paires famille–icône détectées statiquement dans les sources.
Ouvrir la galerie d’icônes
Aucune icône ne correspond au filtre.
58 références dynamiques à vérifier
Inventaire des composants
29 composants Blade enregistrés. Les démonstrations ci-dessus présentent les primitives visuelles ; l’inventaire inclut aussi les compositions contextuelles et les modèles.
Atomes
14-
<x-atoms.brand-logo>1 -
<x-atoms.button>143 -
<x-atoms.copy-button>3 -
<x-atoms.icon-text>2 -
<x-atoms.inputs.checkbox-input>4 -
<x-atoms.inputs.email-input>1 -
<x-atoms.inputs.file-input>3 -
<x-atoms.inputs.number-input>1 -
<x-atoms.inputs.select>4 -
<x-atoms.inputs.text-input>4 -
<x-atoms.inputs.textarea>3 -
<x-atoms.password-visibility-toggle>10 -
<x-atoms.pill>3 -
<x-atoms.responsive-image>3
Molécules
10-
<x-molecules.audio-controls>2 -
<x-molecules.breadcrumb>3 -
<x-molecules.dropdown>2 -
<x-molecules.feedback-alert>18 -
<x-molecules.footer-socials>1 -
<x-molecules.inputs.password-control>2 -
<x-molecules.pill-item>1 -
<x-molecules.relation-badge>5 -
<x-molecules.tab-item>1 -
<x-molecules.tabs-navigation>3
Organismes
4-
<x-organisms.content-card>3 -
<x-organisms.hero-character>3 -
<x-organisms.pill-list>3 -
<x-organisms.skill-credential-card>2
Modèles
1-
<x-templates.show-page>5