From b10f2863cc4ae832263c91bae8ac809a9b768563 Mon Sep 17 00:00:00 2001 From: Ladebeze66 Date: Wed, 22 Apr 2026 14:16:53 +0200 Subject: [PATCH] etape1et2refonte --- app/Competences/page.jsx | 2 +- app/assets/main.css | 87 -------------------- app/components/ChatBot.js | 6 +- app/components/ContactForm.tsx | 10 +-- app/components/ContentSection.tsx | 6 +- app/components/ContentSectionCompetences.tsx | 4 +- app/components/Footer.jsx | 2 +- app/components/ModalGlossaire.tsx | 4 +- app/contact/page.js | 10 +-- app/globals.css | 5 +- app/layout.tsx | 6 +- app/page.tsx | 4 +- app/portfolio/page.jsx | 4 +- docs-site-interne/REFONTE-VISUELLE.md | 4 +- docs-site-interne/feuille-de-route.md | 3 +- 15 files changed, 36 insertions(+), 121 deletions(-) diff --git a/app/Competences/page.jsx b/app/Competences/page.jsx index eece9fb..b728e69 100644 --- a/app/Competences/page.jsx +++ b/app/Competences/page.jsx @@ -61,7 +61,7 @@ export default function Page() {
-

{competence.name}

+

{competence.name}

{competence.description}

diff --git a/app/assets/main.css b/app/assets/main.css index 86c7964..ab74bb6 100644 --- a/app/assets/main.css +++ b/app/assets/main.css @@ -1,89 +1,3 @@ -@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap'); - -.font-orbitron-24 { - font-family: 'Orbitron', sans-serif; - font-size: 24px; - color: #333333; -} - -.font-orbitron-16 { - font-family: 'Orbitron', sans-serif; - font-size: 16px; - color: #333333; -} - -.font-orbitron-12 { - font-family: 'Orbitron', sans-serif; - font-size: 12px; - color: #333333; -} - -.font-orbitron-24-bold { - font-family: 'Orbitron', sans-serif; - font-size: 24px; - font-weight: bold; - color: #333333; -} - -.font-orbitron-24-italic { - font-family: 'Orbitron', sans-serif; - font-size: 24px; - font-style: italic; - color: #333333; -} - -.font-orbitron-24-bold-italic { - font-family: 'Orbitron', sans-serif; - font-size: 24px; - font-weight: bold; - font-style: italic; - color: #333333; -} - -.font-orbitron-16-bold { - font-family: 'Orbitron', sans-serif; - font-size: 16px; - font-weight: bold; - color: #333333; -} - -.font-orbitron-16-italic { - font-family: 'Orbitron', sans-serif; - font-size: 16px; - font-style: italic; - color: #333333; -} - -.font-orbitron-16-bold-italic { - font-family: 'Orbitron', sans-serif; - font-size: 16px; - font-weight: bold; - font-style: italic; - color: #333333; -} - -.font-orbitron-12-bold { - font-family: 'Orbitron', sans-serif; - font-size: 12px; - font-weight: bold; - color: #333333; -} - -.font-orbitron-12-italic { - font-family: 'Orbitron', sans-serif; - font-size: 12px; - font-style: italic; - color: #333333; -} - -.font-orbitron-12-bold-italic { - font-family: 'Orbitron', sans-serif; - font-size: 12px; - font-weight: bold; - font-style: italic; - color: #333333; -} - @tailwind base; @tailwind components; @tailwind utilities; @@ -166,4 +80,3 @@ grid-template-columns: repeat(2, minmax(150px, 1fr)) !important; } } - diff --git a/app/components/ChatBot.js b/app/components/ChatBot.js index 4808f2e..6c25f5d 100644 --- a/app/components/ChatBot.js +++ b/app/components/ChatBot.js @@ -29,7 +29,7 @@ export default function ChatBot({ onClose }) { return (
- đź’¬ GrasBot + đź’¬ GrasBot
@@ -37,7 +37,7 @@ export default function ChatBot({ onClose }) { {messages.map((msg, index) => (
{msg.text} @@ -53,7 +53,7 @@ export default function ChatBot({ onClose }) {
setQuestion(e.target.value)} diff --git a/app/components/ContactForm.tsx b/app/components/ContactForm.tsx index 7ae9f2f..9cfa622 100644 --- a/app/components/ContactForm.tsx +++ b/app/components/ContactForm.tsx @@ -50,14 +50,14 @@ export default function ContactForm() { onSubmit={handleSubmit} className="max-w-lg mx-auto p-6 bg-white shadow-lg rounded-lg animate-fade-in" > -

đź“© Contactez-moi

+

đź“© Contactez-moi

setName(e.target.value)} - className="w-full p-3 border border-gray-300 font-orbitron-16-bold rounded mb-3 focus:outline-none focus:ring-2 focus:ring-blue-400" + className="w-full p-3 border border-gray-300 font-headline font-bold rounded mb-3 focus:outline-none focus:ring-2 focus:ring-blue-400" required /> @@ -66,7 +66,7 @@ export default function ContactForm() { placeholder="Votre email" value={email} onChange={(e) => setEmail(e.target.value)} - className="w-full p-3 border border-gray-300 rounded font-orbitron-16-bold mb-3 focus:outline-none focus:ring-2 focus:ring-blue-400" + className="w-full p-3 border border-gray-300 rounded font-headline font-bold mb-3 focus:outline-none focus:ring-2 focus:ring-blue-400" required /> @@ -74,7 +74,7 @@ export default function ContactForm() { placeholder="Votre message" value={message} onChange={(e) => setMessage(e.target.value)} - className="w-full p-3 border border-gray-300 rounded mb-3 font-orbitron-16-bold focus:outline-none focus:ring-2 focus:ring-blue-400" + className="w-full p-3 border border-gray-300 rounded mb-3 font-headline font-bold focus:outline-none focus:ring-2 focus:ring-blue-400" required /> @@ -82,7 +82,7 @@ export default function ContactForm() { type="submit" disabled={isLoading} className={`w-full py-3 rounded transition ${ - isLoading ? "bg-gray-400 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-600 text-white font-orbitron-16-bold" + isLoading ? "bg-gray-400 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-600 text-white font-headline font-bold" }`} > {isLoading ? "⏳ Envoi..." : "Envoyer"} diff --git a/app/components/ContentSection.tsx b/app/components/ContentSection.tsx index f278da5..1e3537a 100644 --- a/app/components/ContentSection.tsx +++ b/app/components/ContentSection.tsx @@ -57,11 +57,11 @@ export default function ContentSection({ collection, slug, titleClass, contentCl return (
-

{name}

+

{name}

-
+
{richText}
@@ -71,7 +71,7 @@ export default function ContentSection({ collection, slug, titleClass, contentCl href={link} target="_blank" rel="noopener noreferrer" - className="bg-white/65 rounded-md p-1 text-red-700 hover:underline transition duration-300 ease-in-out transform hover:scale-105 font-orbitron-16-bold hover:text-blue-700" + className="bg-white/65 rounded-md p-1 text-red-700 hover:underline transition duration-300 ease-in-out transform hover:scale-105 font-headline font-bold hover:text-blue-700" > {linkText || "Voir plus/lien externe"} diff --git a/app/components/ContentSectionCompetences.tsx b/app/components/ContentSectionCompetences.tsx index a043fab..be839c4 100644 --- a/app/components/ContentSectionCompetences.tsx +++ b/app/components/ContentSectionCompetences.tsx @@ -129,11 +129,11 @@ export default function ContentSectionCompetences({ return (
-

+

{name}

-
+
{contentWithLinks}
{selectedMot && setSelectedMot(null)} />} diff --git a/app/components/Footer.jsx b/app/components/Footer.jsx index d166e59..f7e2cc3 100644 --- a/app/components/Footer.jsx +++ b/app/components/Footer.jsx @@ -11,7 +11,7 @@ export default function Footer() { return (
-
+

© {new Date().getFullYear()} Gras-Calvet Fernand

diff --git a/app/components/ModalGlossaire.tsx b/app/components/ModalGlossaire.tsx index d78fed0..6ab7a82 100644 --- a/app/components/ModalGlossaire.tsx +++ b/app/components/ModalGlossaire.tsx @@ -49,8 +49,8 @@ export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) {
{/* Description */}
-

{mot.mot_clef}

-

{mot.description}

+

{mot.mot_clef}

+

{mot.description}

diff --git a/app/contact/page.js b/app/contact/page.js index 5422b1d..a26f6b8 100644 --- a/app/contact/page.js +++ b/app/contact/page.js @@ -6,22 +6,22 @@ export default function ContactPage() { return (
-

+

📬 Correspondance

-

+

Vous pouvez me contacter via ce formulaire ou sur mes réseaux sociaux.

-

+

LinkedIn: Fernand Gras-Calvet

-

+

Facebook: Fernand Gras-Calvet

-

+

Email: grascalvet.fernand@gmail.com

diff --git a/app/globals.css b/app/globals.css index e800142..f991f3d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,6 +1,6 @@ /* 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. */ + Voir docs-site-interne/REFONTE-VISUELLE.md. Les anciennes classes font-orbitron-* + ont été retirées à l'étape 3 de la refonte (2026-04-22). */ @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'); @@ -23,6 +23,7 @@ word-wrap: normal; white-space: nowrap; direction: ltr; + font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } diff --git a/app/layout.tsx b/app/layout.tsx index 2c1c266..4efe296 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -89,7 +89,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) {/* Header */}
-

+

Portfolio Gras-Calvet Fernand

@@ -108,7 +108,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) {/* Menu desktop */}
-

{project.name}

-

+

{project.name}

+

{project.description}

diff --git a/docs-site-interne/REFONTE-VISUELLE.md b/docs-site-interne/REFONTE-VISUELLE.md index ba9a47c..5ce8386 100644 --- a/docs-site-interne/REFONTE-VISUELLE.md +++ b/docs-site-interne/REFONTE-VISUELLE.md @@ -1,7 +1,7 @@ # Refonte visuelle — Direction "Digital Atelier" **Créé :** 2026-04-22 -**Statut :** en cours (étape 1/8 terminée) +**Statut :** en cours (étapes 1-3/8 terminées) **Source d'inspiration :** `stitch_V1/` (design newsletter Stitch — `DESIGN.md` et `code.html`). **Audit préalable :** [`captures/AUDIT-VISUEL.md`](./captures/AUDIT-VISUEL.md). @@ -56,7 +56,7 @@ Chaque étape = un lot cohérent + éventuelle mise à jour de `captures/AUDIT-V |---|-------|---------------------|--------| | 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 | +| 3 | Migration typographique globale (Orbitron → Manrope / Newsreader) | `app/**/*.{tsx,jsx,js}`, `app/assets/main.css` | **fait** (2026-04-22) | | 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 | diff --git a/docs-site-interne/feuille-de-route.md b/docs-site-interne/feuille-de-route.md index 4ae25d5..927ca80 100644 --- a/docs-site-interne/feuille-de-route.md +++ b/docs-site-interne/feuille-de-route.md @@ -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) | 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. | +| 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-3 (tokens + garde-fou + migration typo globale) 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 | @@ -38,3 +38,4 @@ Document vivant : ajuster les statuts et dates au fil du travail. | 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)). | +| 2026-04-22 | Refonte visuelle — étape 3 : migration typographique globale. Toutes les classes `font-orbitron-*` (12 définitions CSS, 29 occurrences dans 11 fichiers) remplacées par `font-headline` Manrope + tailles/poids Tailwind explicites. Import Google Fonts Orbitron supprimé de `app/assets/main.css`. |