From 662f5857522ad63e4c71a6ea32d0b006dfca08b1 Mon Sep 17 00:00:00 2001 From: Ladebeze66 Date: Wed, 22 Apr 2026 14:06:18 +0200 Subject: [PATCH] etape1et2refonte --- app/globals.css | 19 ++++++ docs-site-interne/REFONTE-VISUELLE.md | 75 ++++++++++++++++++++++++ docs-site-interne/feuille-de-route.md | 6 +- tailwind.config.ts | 83 +++++++++++++++++++++++++++ 4 files changed, 181 insertions(+), 2 deletions(-) create mode 100644 docs-site-interne/REFONTE-VISUELLE.md diff --git a/app/globals.css b/app/globals.css index 2464ad0..e800142 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,3 +1,8 @@ +/* Polices Stitch "Digital Atelier" : Manrope (titres/UI) + Newsreader (corps éditorial). + Voir docs-site-interne/REFONTE-VISUELLE.md. Les classes font-orbitron-* héritées + vivent encore côté app/assets/main.css tant que la migration typo n'est pas faite. */ +@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Newsreader:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap'); @tailwind base; @tailwind components; @@ -8,6 +13,20 @@ --foreground: #171717; } +/* Icônes Material Symbols : utilitaire name. */ +.material-symbols-outlined { + font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; +} + @media (prefers-color-scheme: dark) { :root { --background: #0a0a0a; diff --git a/docs-site-interne/REFONTE-VISUELLE.md b/docs-site-interne/REFONTE-VISUELLE.md new file mode 100644 index 0000000..ba9a47c --- /dev/null +++ b/docs-site-interne/REFONTE-VISUELLE.md @@ -0,0 +1,75 @@ +# Refonte visuelle — Direction "Digital Atelier" + +**Créé :** 2026-04-22 +**Statut :** en cours (étape 1/8 terminée) +**Source d'inspiration :** `stitch_V1/` (design newsletter Stitch — `DESIGN.md` et `code.html`). +**Audit préalable :** [`captures/AUDIT-VISUEL.md`](./captures/AUDIT-VISUEL.md). + +## 1. Règle de garde-fou (validée utilisateur) + +> **On emprunte au Stitch la direction artistique** (palette, typographie, layering tonal, radius, ombres ambient) **et deux ou trois composants signatures** (frame image, pull-quote, bouton jewel). **On n'emprunte ni la mise en page en colonne unique, ni la bottom nav, ni le rythme vertical newsletter.** Le **wallpaper** et le couple **header / drawer mobile** du site restent la fondation. + +Concrètement, `stitch_V1/DESIGN.md` fait foi (système). `stitch_V1/code.html` sert d'illustration : il ne fait pas foi quand il contredit `DESIGN.md` (ex. il utilise des `border border-outline-variant` que DESIGN.md interdit — règle "No-Line"). + +Chaque commit de refonte doit être relisable à l'aune de cette règle : s'il introduit une colonne unique `max-w-xl` globale, une bottom nav ou des bordures 1px opaques, il est à corriger. + +## 2. Arbitrages actés + +| Sujet | Décision | +|-------|----------| +| Photo de profil home | Portrait carré arrondi `rounded-sheet` (1.5 rem) + frame `bg-primary p-1` | +| Listes portfolio / compétences | Grille asymétrique 2/3 + 1/3 ; carousel réservé aux galeries intra-fiche | +| Orbitron | Retiré partout, remplacé par `Manrope` (titres) + `Newsreader` (corps) | +| Opacité cartes sur wallpaper | 85 % + `backdrop-blur-vellum` (≈ 20 px) pour la "sheet of vellum" | +| Icônes | `Material Symbols Outlined` (déjà utilisées dans la newsletter Stitch et Listmonk) | +| Mode sombre | Light-only pour cette refonte | +| Cercles animés `circle-one` / `circle-two` | Repalette vers `primary` / `primary-container` (au lieu de rose/indigo) | +| Compteur de visites | Migré dans le footer, en `text-[10px] uppercase tracking-[0.3em] text-outline` | + +## 3. Design tokens portés dans `tailwind.config.ts` + +Voir le fichier pour la liste exhaustive. Rappel des plus utilisés : + +| Token | Hex | Usage | +|-------|-----|-------| +| `primary` | `#26445d` | CTAs, headlines, frames image | +| `primary-container` | `#3e5c76` | dégradé CTA, drawer mobile | +| `primary-fixed` | `#cce5ff` | pastilles, badges, barres de citation | +| `secondary` | `#516169` | sous-titres, méta | +| `surface` | `#f8fafa` | base de page alternative au wallpaper | +| `surface-container-low` | `#f2f4f4` | sections secondaires | +| `surface-container-lowest` | `#ffffff` | cartes principales (posées à 85 % sur wallpaper) | +| `on-surface` | `#191c1d` | texte principal (jamais `#000`) | +| `outline-variant` | `#c3c7cd` | ghost-border à 15 % d'opacité max | + +Radius additifs : `rounded-sheet` (1.5 rem) pour cartes principales, `rounded-tile` (1 rem) pour éléments imbriqués. Les radius Tailwind (`rounded-xl`, etc.) ne sont pas écrasés pour ne pas casser les composants existants. + +Ombres : `shadow-ambient` (40 px / 6 %) pour les cartes flottantes, `shadow-jewel` (4 px offset) pour CTAs primaires. + +Polices : `font-headline` (Manrope) et `font-body` (Newsreader), importées via `app/globals.css`. + +## 4. Plan d'exécution (8 étapes) + +Chaque étape = un lot cohérent + éventuelle mise à jour de `captures/AUDIT-VISUEL.md` et nouvelles captures. + +| # | Étape | Fichiers principaux | Statut | +|---|-------|---------------------|--------| +| 1 | Fondations : tokens Tailwind + import polices + icônes | `tailwind.config.ts`, `app/globals.css` | **fait** (2026-04-22) | +| 2 | Garde-fou doc + mise à jour feuille de route | `docs-site-interne/REFONTE-VISUELLE.md`, `docs-site-interne/feuille-de-route.md` | **fait** (2026-04-22) | +| 3 | Migration typographique globale (Orbitron → Manrope / Newsreader) | `app/**/*.{tsx,jsx,js}`, `app/assets/main.css` | à faire | +| 4 | Layout racine : header No-Line, burger ghost, palette cercles, compteur migré, drawer | `app/layout.tsx`, `app/globals.css` | à faire | +| 5 | Home : hero vellum, portrait frame, takeaways, pull-quote, CTAs | `app/page.tsx` | à faire | +| 6 | Listes portfolio + compétences : grille asymétrique, cartes éditoriales | `app/portfolio/page.jsx`, `app/competences/page.jsx`, composants `Carousel*` | à faire | +| 7 | Fiches détail + modale glossaire + GrasBot (jewel flottant) | `app/portfolio/[slug]/page.tsx`, `app/competences/[slug]/page.tsx`, `app/components/ModalGlossaire.tsx`, `app/components/ChatBot.js` | à faire | +| 8 | Contact + Footer éditorial | `app/contact/page.js`, `app/components/ContactForm.tsx`, `app/components/Footer.jsx` | à faire | + +## 5. Checklist relecture (à passer à la fin de chaque étape) + +- [ ] Aucune colonne unique globale `max-w-xl` (c'est le format newsletter). +- [ ] Aucune bottom nav fixe (déjà couvert par header + drawer). +- [ ] Aucune bordure 1px pleine (`border border-*`) sur un composant de contenu — sauf ghost-border à 15 % max. +- [ ] Aucune utilisation de `#000` pur — toujours `on-surface` / `on-background`. +- [ ] Le wallpaper reste perceptible entre / autour des cartes. +- [ ] La hiérarchie Manrope / Newsreader est respectée (pas de Orbitron résiduel). +- [ ] Les CTAs principaux ont `shadow-jewel`. +- [ ] Radius Stitch (`rounded-sheet` / `rounded-tile`) utilisés sur les cartes de la refonte. diff --git a/docs-site-interne/feuille-de-route.md b/docs-site-interne/feuille-de-route.md index 35427c2..4ae25d5 100644 --- a/docs-site-interne/feuille-de-route.md +++ b/docs-site-interne/feuille-de-route.md @@ -1,6 +1,6 @@ # Feuille de route -**Dernière mise à jour :** 2026-04-01 +**Dernière mise à jour :** 2026-04-22 Document vivant : ajuster les statuts et dates au fil du travail. @@ -8,7 +8,7 @@ Document vivant : ajuster les statuts et dates au fil du travail. | ID | Sujet | Statut | Notes | |----|--------|--------|--------| -| R1 | Moderniser l’UI (design system, cohérence typo/couleurs) | À faire | S’appuyer sur Tailwind existant | +| R1 | Moderniser l’UI (design system, cohérence typo/couleurs) | En cours | Direction "Digital Atelier" inspirée de `stitch_V1/` ; cadrage et plan dans [`REFONTE-VISUELLE.md`](./REFONTE-VISUELLE.md). Étapes 1-2 (tokens + garde-fou) faites le 2026-04-22. | | R2 | Homogénéiser TS vs JS dans `app/` | À faire | Migrer progressivement les `.jsx`/`.js` | | R3 | Centraliser config API (Strapi + LLM) via `.env` | À faire | Remplacer URLs en dur où pertinent | | R4 | Revoir `layout.tsx` (server vs client, perf SEO) | À faire | Évaluer extraction header/footer | @@ -36,3 +36,5 @@ Document vivant : ajuster les statuts et dates au fil du travail. | 2026-04-01 | Reprise après coupure : vérification complétude ; enrichissement de `04-api-llm-et-chatbot.md` ; suppression de `test.txt`. | | 2026-04-01 | Index captures (`captures/INDEX.md`), `captures/README.md`, `07-reference-visuelle-captures.md`, skill `.cursor/skills/site-portfolio-evolution/SKILL.md`. | | 2026-04-01 | Captures WebP intégrées au dépôt ; INDEX et README `captures/` alignés sur les noms réels (slug portfolio / compétence documentés). | +| 2026-04-22 | Audit visuel complet (`captures/AUDIT-VISUEL.md`), correctifs layout (option 1 + compensation header + drawer mobile). | +| 2026-04-22 | Refonte visuelle "Digital Atelier" — étape 1 (tokens Tailwind : palette Stitch, `font-headline` Manrope + `font-body` Newsreader, `rounded-sheet/tile`, `shadow-ambient/jewel`) et étape 2 (garde-fou + plan dans [`REFONTE-VISUELLE.md`](./REFONTE-VISUELLE.md)). | diff --git a/tailwind.config.ts b/tailwind.config.ts index 3ed78b9..ea8fa44 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -11,11 +11,73 @@ export default { colors: { background: "var(--background)", foreground: "var(--foreground)", + + // --- Design tokens Stitch "Digital Atelier" (voir docs-site-interne/REFONTE-VISUELLE.md) + // Primaire : indigo-ardoise, pour CTAs, accents, headlines. + primary: "#26445d", + "primary-container": "#3e5c76", + "on-primary": "#ffffff", + "on-primary-container": "#b5d4f2", + "primary-fixed": "#cce5ff", + "primary-fixed-dim": "#abcae8", + "on-primary-fixed": "#001d31", + "on-primary-fixed-variant": "#2b4963", + "inverse-primary": "#abcae8", + + // Secondaire : neutres chauds intermédiaires (sous-titres, meta). + secondary: "#516169", + "secondary-container": "#d2e2ec", + "on-secondary": "#ffffff", + "on-secondary-container": "#55656d", + "secondary-fixed": "#d5e5ef", + "secondary-fixed-dim": "#b9c9d3", + "on-secondary-fixed": "#0e1d25", + "on-secondary-fixed-variant": "#3a4951", + + // Tertiaire : utilisé ponctuellement (citations, anecdotes). + tertiary: "#334453", + "tertiary-container": "#4a5b6b", + "on-tertiary": "#ffffff", + "on-tertiary-container": "#c1d2e5", + "tertiary-fixed": "#d3e4f7", + "tertiary-fixed-dim": "#b7c8db", + "on-tertiary-fixed": "#0b1d2b", + "on-tertiary-fixed-variant": "#384858", + + // Surfaces : empilement tonal façon "sheets of vellum". + surface: "#f8fafa", + "surface-bright": "#f8fafa", + "surface-dim": "#d8dada", + "surface-variant": "#e1e3e3", + "surface-tint": "#43617c", + "surface-container-lowest": "#ffffff", + "surface-container-low": "#f2f4f4", + "surface-container": "#eceeee", + "surface-container-high": "#e6e8e9", + "surface-container-highest": "#e1e3e3", + "inverse-surface": "#2e3131", + "inverse-on-surface": "#eff1f1", + + // Textes : jamais de #000000, on-surface est la teinte la plus sombre. + "on-surface": "#191c1d", + "on-surface-variant": "#42474d", + "on-background": "#191c1d", + + // Outline : 15 % d'opacité max sur les "ghost borders", jamais plein. + outline: "#73777d", + "outline-variant": "#c3c7cd", + + // Erreurs. + error: "#ba1a1a", + "error-container": "#ffdad6", + "on-error": "#ffffff", + "on-error-container": "#93000a", }, screens: { 'mobile-landscape': { 'raw': '(max-width: 767px) and (orientation: landscape)' }, }, fontFamily: { + // Legacy (conservées tant que la migration typo n'est pas faite). sans: ['Helvetica', 'Arial', 'sans-serif'], serif: ['Georgia', 'serif'], mono: ['Courier New', 'monospace'], @@ -25,6 +87,27 @@ export default { exo2: ['Exo 2', 'sans-serif'], audiowide: ['Audiowide', 'sans-serif'], bebas: ['Bebas Neue', 'sans-serif'], + + // Stitch "Digital Atelier" : Manrope pour titres/UI, Newsreader pour corps éditorial. + headline: ['Manrope', 'system-ui', 'sans-serif'], + body: ['Newsreader', 'Georgia', 'serif'], + label: ['Manrope', 'system-ui', 'sans-serif'], + }, + borderRadius: { + // Additifs : ne remplacent pas les radius Tailwind (xl, 2xl, etc.) pour ne rien casser. + // À utiliser explicitement sur les nouveaux composants de la refonte. + sheet: "1.5rem", // cartes principales (Stitch "xl") + tile: "1rem", // éléments imbriqués (Stitch "lg") + }, + boxShadow: { + // Ombres ambient façon lumière naturelle (DESIGN.md §4 : ressenties, pas vues). + ambient: "0 40px 60px -20px rgba(25, 28, 29, 0.06)", + "ambient-sm": "0 24px 40px -16px rgba(25, 28, 29, 0.05)", + // "Jewel" : CTAs primaires, légère empreinte tactile 4px. + jewel: "0 4px 0 0 #1b3245", + }, + backdropBlur: { + vellum: "20px", }, }, },