Creative North Star: “Le Dossier de Qualifications”
Le portfolio est traité comme un dossier administratif officiel : chaque compétence, expérience, certification et projet est une pièce datée, scellée et signée, présentée sur du parchemin froid sous une encre marine profonde. Le recruteur n’ouvre pas un site CV — il ouvre un dossier dont chaque document est une preuve.
La première vue est un certificat plein cadre : double filet, monogramme BP doré, portrait encadré, nom gravé en Bodoni Moda, sceau rosacé qui s’imprime à l’arrivée, ligne de signature. Le reste du site décline le monde : registre des services (timeline), registre des chiffres (stats), mesures graduées (compétences), fiches (contact), catalogue (projets).
Key Characteristics: - Angles francs : aucune carte arrondie, rayon de 2px maximum — le papier ne s’arrondit pas. - L’encre parle d’abord : textes sombres sur parchemin, jamais de gris dérivé — la couleur secondaire est l’encre teintée. - Le sceau cramoisi est réservé : actions, références de pièces, dates, liens — jamais comme décor général. - L’or est un instrument de filet : hairlines, losanges, monogramme — jamais un texte courant. - Un seul moment de motion : le sceau qui s’imprime (scale + rotation + fade), réduit à zéro sous prefers-reduced-motion.
Palette d’archives : parchemin froid, encre marine, sceau cramoisi, or pour les filets. Le mode sombre est « le dossier lu sous lampe » : même vocabulaire, papier sombre, encre claire, sceau éclairci pour garder le contraste.
La Règle du Sceau. Le cramoisi est la couleur de l’acte : actions, preuves, dates, liens. Il ne colore jamais un fond de section entier ni un dégradé décoratif. La Règle du Papier. Chaque surface est un document : angles francs, filet fin, parchemin. Pas de cartes arrondies, pas de verre, pas de dégradés de fond. La Règle du Contraste Sombre. En mode sombre, le sceau passe à #d97a7a — jamais #8a1c1c, qui tombe sous 4.5:1 sur le papier sombre.
Display Font: Bodoni Moda (avec Georgia, Times New Roman, serif) Body Font: Source Serif 4 (avec Georgia, serif) Label/Mono Font: IBM Plex Mono (avec ui-monospace, monospace)
Character: Lettrage gravé pour les titres — une Didone à fort contraste qui rappelle la gravure des diplômes ; une serif textuelle calme et lisible pour la lecture ; un mono administratif pour tout ce qui est référence, date, mesure ou mention. Le contraste des trois voix est le monde lui-même.
La Règle Gravée. Bodoni Moda ne sert qu’aux titres et au monogramme. Jamais en texte courant — la gravure se respecte de loin. La Règle de l’Administratif. Le mono est la voix du dossier : s’il dit une date, une référence, une mesure ou un tampon, c’est du IBM Plex Mono.
Grilles de documents : repeat(auto-fit, minmax(250px, 1fr)) pour les compétences, minmax(280px, 1fr) pour l’exploration, minmax(320px, 1fr) pour le catalogue de projets. Le certificat utilise une grille portrait 4/5 (minmax(150px, 230px)) + texte ; les pages sans portrait passent en colonne unique centrée via .cert-grid:not(:has(.cert-photo)).
Chaque section est une pièce : en-tête avec référence mono (Pièce N° 1), filet doré terminé par un losange, titre Bodoni, sous-titre. Rythme vertical : 4.5rem au-dessus d’une pièce, plus d’espace au-dessus des titres qu’en dessous. Le certificat porte un double filet (inset 0.55rem, second filet à 0.97 d’échelle).
Responsive : à 820px le certificat passe en colonne centrée, les stats en deux colonnes resserrées, les fiches de contact en une colonne ; à 576px les boutons deviennent pleine largeur, le monogramme disparaît, les pièces resserrent à 3.2rem.
Profondeur par filets et ombres de papier : les documents portent une ombre courte décalée avec flou (0 1px 2px + 0 14px 30px -20px), qui s’amplifie au survol (0 22px 44px -22px). Le double filet du certificat et les hairlines créent la profondeur d’embossage. Pas de tonal layering coloré, pas de verre.
box-shadow: 0 1px 2px rgba(27,34,51,0.07), 0 14px 30px -20px rgba(27,34,51,0.38)): Les documents au repos (certificat, cartes, fiches, stats).box-shadow: 0 1px 2px rgba(27,34,51,0.08), 0 22px 44px -22px rgba(27,34,51,0.45)): Survol des documents et des boutons. Le déplacement en Y (-2px) accompagne.La Règle du Papier Souleve. L’ombre n’apparaît que comme réponse à l’état (survol, focus). Au repos, le document ne flotte jamais.
Le monde du papier ne s’arrondit pas : rayon de 2px partout, annulé en CSS (border-radius: 0 bootstrap surclassé). Les formes récurrentes sont les losanges (tampons de timeline, extrémité des filets) et le carré. Le sceau est une rosace circulaire SVG à dents périphériques, anneaux concentriques et monogramme — le seul élément rond du système, et il est signe, pas surface. Les portraits sont encadrés dans un cadre photo 4/5 avec passe-partout.
Document plein cadre à double filet : en-tête avec référence mono (Dossier N° BP-2026-001 · Établi à Rimouski) et monogramme BP en or gravure ; grille portrait 4/5 encadré + nom Bodoni gravé, rôle mono sceau, description 66ch, trois sceaux d’action ; pied avec ligne de signature et sceau rosacé animé (seal-in : scale 2.1 → 0.94, rotation -24° → 0°, cubic-bezier(0.22,1,0.36,1), 0.9s, délai 0.25s, désactivé sous prefers-reduced-motion).
Piste à filets gradués (repeating-linear-gradient 25px) avec remplissage sceau hachuré terminé par un trait or de 2px ; étiquette mono avec valeur en pourcentage. Jamais une barre arrondie dégradée.