Ladebeze66/devsite
1
0
Fork 0
mirror of https://github.com/Ladebeze66/devsite.git synced 2026-05-11 16:56:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

etape1et2refonte

Browse Source
This commit is contained in:
Ladebeze66 2026-04-22 14:16:53 +02:00
parent 662f585752
commit b10f2863cc
15 changed files with 36 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Competences/page.jsx
View File

@ -61,7 +61,7 @@ export default function Page() {
<CarouselCompetences images={images} className="w-full h-full object-cover" />
</div>
<div className="flex-grow overflow-y-auto max-h-32 hide-scrollbar show-scrollbar">
<p className="font-orbitron-16-bold text-xl mb-2">{competence.name}</p>
<p className="font-headline font-bold text-xl mb-2">{competence.name}</p>
<p className="text-gray-700 text-sm hover:text-base transition-all duration-200 ease-in-out">
{competence.description}
</p>

87
app/assets/main.css
View File

@ -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;
}
}

6
app/components/ChatBot.js
View File

@ -29,7 +29,7 @@ export default function ChatBot({ onClose }) {
return (
<div className="flex flex-col w-96 bg-white/70 shadow-lg rounded-lg border border-gray-300">
<div className="bg-blue-600 text-white p-3 rounded-t-lg flex justify-between items-center">
<span className="font-orbitron-16-bold">💬 GrasBot</span>
<span className="font-headline font-bold">💬 GrasBot</span>
<button className="text-white hover:text-red-400 text-xl" onClick={onClose}>❌</button>
</div>
@ -37,7 +37,7 @@ export default function ChatBot({ onClose }) {
{messages.map((msg, index) => (
<div
key={index}
className={`p-2 rounded-lg text-white font-orbitron-12 ${msg.sender === "user" ? "bg-blue-500 ml-auto" : "bg-gray-500 mr-auto"}`}
className={`p-2 rounded-lg text-white font-headline text-xs ${msg.sender === "user" ? "bg-blue-500 ml-auto" : "bg-gray-500 mr-auto"}`}
style={{ maxWidth: "80%" }}
>
{msg.text}
@ -53,7 +53,7 @@ export default function ChatBot({ onClose }) {
<div className="flex p-3 border-t border-gray-300">
<input
type="text"
className="flex-1 p-2 border border-gray-300 font-orbitron-12 rounded-l-lg focus:outline-none"
className="flex-1 p-2 border border-gray-300 font-headline text-xs rounded-l-lg focus:outline-none"
placeholder="Posez votre question..."
value={question}
onChange={(e) => setQuestion(e.target.value)}

10
app/components/ContactForm.tsx
View File

@ -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"
>
<h2 className="text-2xl font-orbitron-16-bold mb-4 text-center">📩 Contactez-moi</h2>
<h2 className="text-2xl font-headline font-bold mb-4 text-center">📩 Contactez-moi</h2>
<input
type="text"
placeholder="Votre nom"
value={name}
onChange={(e) => 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"}

6
app/components/ContentSection.tsx
View File

@ -57,11 +57,11 @@ export default function ContentSection({ collection, slug, titleClass, contentCl
return (
<div className="max-w-3xl mx-auto p-6">
<h1 className={titleClass || "bg-white/50 rounded-md text-3xl mb-6 font-orbitron-24-bold p-2 text-blue-700"}>{name}</h1>
<h1 className={titleClass || "bg-white/50 rounded-md text-3xl mb-6 font-headline font-extrabold tracking-tight p-2 text-blue-700"}>{name}</h1>
<Carousel images={images} className="w-full h-64" />
<div className={contentClass || "bg-white/80 rounded-md p-4 font-orbitron-16-bold shadow-md mt-6"}>
<div className={contentClass || "bg-white/80 rounded-md p-4 font-headline font-bold shadow-md mt-6"}>
<ReactMarkdown>{richText}</ReactMarkdown>
</div>
@ -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"}
</a>

4
app/components/ContentSectionCompetences.tsx
View File

@ -129,11 +129,11 @@ export default function ContentSectionCompetences({
return (
<div className="max-w-3xl mx-auto p-6">
<h1 className={titleClass || "bg-white/60 rounded-md p-1 text-2xl mb-6 font-orbitron-16-bold text-blue-700"}>
<h1 className={titleClass || "bg-white/60 rounded-md p-1 text-2xl mb-6 font-headline font-bold text-blue-700"}>
{name}
</h1>
<CarouselCompetences images={images} className="w-full h-64" />
<div className={contentClass || "bg-white/70 rounded-md p-4 mt-6 text-lg font-orbitron-16-bold text-black-700"}>
<div className={contentClass || "bg-white/70 rounded-md p-4 mt-6 text-lg font-headline font-bold text-black-700"}>
<ReactMarkdown rehypePlugins={[rehypeRaw]}>{contentWithLinks}</ReactMarkdown>
</div>
{selectedMot && <ModalGlossaire mot={selectedMot} onClose={() => setSelectedMot(null)} />}

2
app/components/Footer.jsx
View File

@ -11,7 +11,7 @@ export default function Footer() {
return (
<footer className="min-h-[80px] w-full min-w-0 rounded-lg bg-white/50 backdrop-blur">
<div className="mx-auto flex max-w-4xl min-w-0 flex-col items-center px-4 py-6 font-orbitron-12 text-sm text-gray-700">
<div className="mx-auto flex max-w-4xl min-w-0 flex-col items-center px-4 py-6 font-headline text-sm text-gray-700">
<p>&copy; {new Date().getFullYear()} Gras-Calvet Fernand</p>
</div>
</footer>

4
app/components/ModalGlossaire.tsx
View File

@ -49,8 +49,8 @@ export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) {
<div className="flex flex-col md:flex-row gap-6 h-full">
{/* Description */}
<div className="md:w-1/2">
<h2 className="text-3xl font-orbitron-16-bold mb-4">{mot.mot_clef}</h2>
<p className="font-orbitron-12-bold text-gray-700 mb-6">{mot.description}</p>
<h2 className="text-3xl font-headline font-bold mb-4">{mot.mot_clef}</h2>
<p className="font-headline font-bold text-xs text-gray-700 mb-6">{mot.description}</p>
</div>
<div className="md:w-1/2 h-full">

10
app/contact/page.js
View File

@ -6,22 +6,22 @@ export default function ContactPage() {
return (
<div className="max-w-3xl mx-auto p-6 flex flex-col justify-top min-h-screen">
<h1 className="bg-white/50 rounded-md text-3xl font-orbitron-24-bold text-center mb-6 border-b-4 border-blue-500 pb-2">
<h1 className="bg-white/50 rounded-md text-3xl font-headline font-extrabold tracking-tight text-center mb-6 border-b-4 border-blue-500 pb-2">
📬 Correspondance
</h1>
<p className="bg-white/70 rounded-md font-orbitron-16 text-lg text-center border-b-4 border-blue-500 pb-2 mb-4">
<p className="bg-white/70 rounded-md font-headline text-lg text-center border-b-4 border-blue-500 pb-2 mb-4">
Vous pouvez me contacter via ce formulaire ou sur mes réseaux sociaux.
</p>
<div className="bg-white/80 rounded-md flex flex-col items-center space-y-4 mb-6">
<p className="text-blue-500 font-orbitron-16-bold">
<p className="text-blue-500 font-headline font-bold">
LinkedIn: Fernand Gras-Calvet
</p>
<p className="text-blue-500 font-orbitron-16-bold">
<p className="text-blue-500 font-headline font-bold">
Facebook: Fernand Gras-Calvet
</p>
<p className="text-blue-500 font-orbitron-16-bold">
<p className="text-blue-500 font-headline font-bold">
Email: grascalvet.fernand@gmail.com
</p>
</div>

5
app/globals.css
View File

@ -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;
}

6
app/layout.tsx
View File

@ -89,7 +89,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
{/* Header */}
<header className="fixed left-0 top-0 z-20 h-16 w-full min-w-0 border-b-2 border-gray-500 bg-white/50 px-4 py-2 shadow-md backdrop-blur-md md:h-16 md:px-6">
<div className="mx-auto flex max-w-4xl min-w-0 items-center justify-between gap-2">
<h2 className="min-w-0 truncate pr-1 text-xl font-orbitron-24-bold-italic md:text-2xl">
<h2 className="min-w-0 truncate pr-1 text-xl font-headline font-extrabold italic tracking-tight md:text-2xl">
Portfolio Gras-Calvet Fernand
</h2>
@ -108,7 +108,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
{/* Menu desktop */}
<nav className="hidden md:flex">
<ul className="flex gap-x-4 text-black-500 font-orbitron-16-bold">
<ul className="flex gap-x-4 text-black-500 font-headline font-bold">
<li><NavLink text="Accueil" path="/" /></li>
<li><NavLink text="Portfolio" path="/portfolio" /></li>
<li><NavLink text="Compétences" path="/competences" /></li>
@ -139,7 +139,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
role="dialog"
aria-modal="true"
aria-label="Menu de navigation"
className={`mobile-drawer-panel relative z-10 h-full w-[70%] max-w-sm bg-gray-900/70 backdrop-blur-md border-r border-white/10 shadow-2xl flex flex-col gap-3 px-6 pt-20 pb-8 text-white font-orbitron-24-bold tracking-wide transition-transform duration-300 ease-out ${
className={`mobile-drawer-panel relative z-10 h-full w-[70%] max-w-sm bg-gray-900/70 backdrop-blur-md border-r border-white/10 shadow-2xl flex flex-col gap-3 px-6 pt-20 pb-8 text-white font-headline font-extrabold text-2xl tracking-tight transition-transform duration-300 ease-out ${
isMenuOpen ? "translate-x-0" : "-translate-x-full"
}`}
onClick={scheduleAutoClose}

4
app/page.tsx
View File

@ -79,7 +79,7 @@ export default function HomePage() {
return (
<main className="mx-auto mb-3 flex w-full min-w-0 max-w-full flex-col items-center justify-center rounded-lg bg-white/55 p-4 sm:max-w-2xl sm:p-6 md:max-w-3xl lg:max-w-4xl xl:max-w-5xl">
<h1 className="text-3xl font-orbitron-24-bold-italic text-gray-800 mb-4">{title}</h1>
<h1 className="text-3xl font-headline font-extrabold italic tracking-tight text-gray-800 mb-4">{title}</h1>
{imageUrl ? (
<div className="relative w-64 h-64 rounded-full overflow-hidden shadow-lg border-4 border-gray-300 transition-transform duration-300 hover:scale-110 hover:rotate-3">
@ -91,7 +91,7 @@ export default function HomePage() {
</div>
)}
<div className="mt-6 w-full min-w-0 max-w-2xl px-4 text-center text-lg font-orbitron-16-bold text-black-700 sm:px-6">
<div className="mt-6 w-full min-w-0 max-w-2xl px-4 text-center text-lg font-headline font-bold text-black-700 sm:px-6">
<ReactMarkdown>{cv}</ReactMarkdown>
</div>
</main>

4
app/portfolio/page.jsx
View File

@ -62,8 +62,8 @@ export default function Page() {
</div>
<div className="flex-grow overflow-y-auto max-h-32 hide-scrollbar show-scrollbar">
<p className="font-orbitron-16-bold text-xl mb-2">{project.name}</p>
<p className="text-gray-700 text-sm font-orbitron-12 hover:text-base transition-all duration-200 ease-in-out">
<p className="font-headline font-bold text-xl mb-2">{project.name}</p>
<p className="text-gray-700 text-sm font-headline hover:text-base transition-all duration-200 ease-in-out">
{project.description}
</p>
</div>

4
docs-site-interne/REFONTE-VISUELLE.md
View File

@ -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 |

3
docs-site-interne/feuille-de-route.md
View File

@ -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`. |