mirror of
https://github.com/Ladebeze66/devsite.git
synced 2026-05-12 01:06:26 +02:00
etape1et2refonte
This commit is contained in:
parent
2ff2f4bf42
commit
662f585752
@ -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 <span class="material-symbols-outlined">name</span>. */
|
||||
.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;
|
||||
|
||||
75
docs-site-interne/REFONTE-VISUELLE.md
Normal file
75
docs-site-interne/REFONTE-VISUELLE.md
Normal file
@ -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.
|
||||
@ -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)). |
|
||||
|
||||
@ -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",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user