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

cap01

Browse Source
This commit is contained in:
Ladebeze66 2026-04-22 13:19:19 +02:00
parent b558faa19b
commit d0224df2fc
5 changed files with 44 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/Footer.jsx
View File

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

21
app/globals.css
View File

@ -15,10 +15,18 @@
} }
} }
html {
overflow-x: hidden;
max-width: 100%;
}
body { body {
color: var(--foreground); color: var(--foreground);
background: var(--background); background: var(--background);
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
max-width: 100%;
min-width: 0;
overflow-x: hidden;
} }
@keyframes fade-in { @keyframes fade-in {
@ -60,15 +68,18 @@ body {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
min-height: 100vh; min-height: 100vh;
width: 100vw; /* 🔥 Assure que le wallpaper couvre TOUT l’écran */ /* 100% plutôt que 100vw évite le débordement horizontal (barre de scroll) au zoom */
min-width: 100vw; /* 🔥 Évite qu’il soit tronqué sur les grandes pages */ width: 100%;
min-width: 0;
left: 0;
right: 0;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.bg-wallpaper { .bg-wallpaper {
width: 200vw; /* 🔥 Étend le wallpaper sur toute la largeur disponible */ /* Ne pas utiliser 200vw : double la largeur de page et déstabilise le zoom / dézoom */
min-width: 200vw; /* 🔥 Évite qu’il soit limité par le contenu */ width: 100%;
min-width: 0;
} }
} }

14
app/layout.tsx
View File

@ -26,8 +26,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
return ( return (
<html lang="fr"> <html lang="fr">
<body> <body className="min-w-0 overflow-x-hidden antialiased">
<div className="relative min-h-[100dvh] w-full grid grid-rows-[auto_1fr_auto]"> <div className="relative grid min-h-[100dvh] w-full min-w-0 grid-rows-[auto_1fr_auto]">
{/* Conserve le fond en plein écran */} {/* Conserve le fond en plein écran */}
<div className="absolute inset-0 bg-wallpaper"></div> <div className="absolute inset-0 bg-wallpaper"></div>
@ -41,9 +41,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
</div> </div>
{/* Header */} {/* Header */}
<header className="relative h-16 md:h-16 z-20 bg-white/50 backdrop-blur-md border-b-2 border-gray-500 px-4 py-2 md:px-6 fixed top-0 left-0 w-full shadow-md"> <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="max-w-4xl mx-auto flex items-center justify-between"> <div className="mx-auto flex max-w-4xl min-w-0 items-center justify-between gap-2">
<h2 className="text-xl md:text-2xl font-orbitron-24-bold-italic"> <h2 className="min-w-0 truncate pr-1 text-xl font-orbitron-24-bold-italic md:text-2xl">
Portfolio Gras-Calvet Fernand Portfolio Gras-Calvet Fernand
</h2> </h2>
@ -82,11 +82,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
</div> </div>
)} )}
<main className="relative z-10"> <main className="relative z-10 w-full min-w-0 max-w-full min-h-0">
{children} {children}
</main> </main>
<div className="relative z-10 w-full min-w-0 shrink-0">
<Footer /> <Footer />
</div>
<div className="absolute bottom-0 right-0 p-4 text-sm text-gray-500"> <div className="absolute bottom-0 right-0 p-4 text-sm text-gray-500">
NV : {visitCount} NV : {visitCount}

4
app/page.tsx
View File

@ -78,7 +78,7 @@ export default function HomePage() {
const imageUrl = homepage.photo?.url ? `${apiUrl}${homepage.photo.url}` : null; const imageUrl = homepage.photo?.url ? `${apiUrl}${homepage.photo.url}` : null;
return ( return (
<main className="w-full mx-auto flex flex-col items-center justify-center p-6 bg-white/55 rounded-lg mt-12 mb-3 sm:max-w-2xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl"> <main className="mx-auto mb-3 mt-12 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-orbitron-24-bold-italic text-gray-800 mb-4">{title}</h1>
{imageUrl ? ( {imageUrl ? (
@ -91,7 +91,7 @@ export default function HomePage() {
</div> </div>
)} )}
<div className="mt-6 text-lg text-black-700 max-w-2xl font-orbitron-16-bold px-6 text-center"> <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">
<ReactMarkdown>{cv}</ReactMarkdown> <ReactMarkdown>{cv}</ReactMarkdown>
</div> </div>
</main> </main>

23
docs-site-interne/captures/AUDIT-VISUEL.md
View File

@ -5,7 +5,7 @@
## Objectif ## Objectif
Recenser les **problèmes visuels** et de **mise en forme** pour les **corriger** avec traçabilité (voir aussi les changements dans le code : `app/layout.tsx`, `app/ClientRootLayout.tsx`, `app/page.tsx`, `app/globals.css`). Recenser les **problèmes visuels** et de **mise en forme** pour les **corriger** avec traçabilité (code : `app/layout.tsx`, `app/page.tsx`, `app/components/Footer.jsx`, `app/globals.css`).
## Légende ## Légende
@ -22,7 +22,7 @@ Recenser les **problèmes visuels** et de **mise en forme** pour les **corriger*
| Fichier | `01-layout-header-nav-desktop.webp` | | Fichier | `01-layout-header-nav-desktop.webp` |
| **Navigateur** | Google Chrome | | **Navigateur** | Google Chrome |
| **Constats** | Aucun problème majeur. | | **Constats** | Aucun problème majeur. Mise en page root renforcée (min-w-0, overflow-x) en parallèle de l’option 1 zoom. |
| **Statut** | `OK` | | **Statut** | `OK` |
--- ---
@ -31,20 +31,25 @@ Recenser les **problèmes visuels** et de **mise en forme** pour les **corriger*
| Fichier | `02-layout-nav-mobile-ouverte.webp` | | Fichier | `02-layout-nav-mobile-ouverte.webp` |
| **Route** | `/` | | **Route** | `/` |
| **Code** | `app/ClientRootLayout.tsx` (header, overlay menu) | | **Code** | `app/layout.tsx` (header, overlay menu) |
### Constats (validés) ### Constats (validés)
- Bouton **menu burger** trop imposant et « gris » (gros bloc) — à rendre plus discret. - Bouton **menu burger** trop imposant et « gris » (gros bloc) — à rendre plus discret.
- Côté **dézoom** (pinch) sur mobile : le **texte Strapi** + **header** se décalent à gauche, effet d’**incohérence** visuelle. - Côté **dézoom** (pinch) sur mobile : le **texte Strapi** + **header** se décalent à gauche, effet d’**incohérence** visuelle.
### Piste / correctif appliqué (2026-04-28) ### Piste / correctif appliqué (2026-04-28) — option 1 (CSS / layout seulement)
- **Burger** : taille **32×32** (`h-8 w-8`), fond **blanc/ léger**, **bordure** fine au lieu du gros `p-2 bg-gray-300` ; icône sur une ligne ; **même bouton** affiche **✕** quand le menu est ouvert (évite l’icône toujours identique) ; `aria-label` / `aria-expanded`. - **Burger** : à affiner (taille, contraste) si besoin — voir capture actuelle.
- **Décalage au zoom** : `body` + `html` en **`overflow-x: hidden`**, conteneurs en **`min-w-0` / `max-w-full`**, `viewport` explicite (`width=device-width`, `initialScale=1`) via **`app/layout.tsx`** (serveur). Un seul **`<main>`** côté layout ; la home utilise un **`div role="main"`** pour le contenu (évite double `<main>`). - **Décalage au zoom (sans bloquer le zoom)** : pas de `maximum-scale` ni de meta viewport qui impose le zoom. Renfort uniquement côté **CSS** :
- **Remarque accessibilité** : le **verrouillage total du zoom** (`user-scalable=no` / `maximum-scale=1`) n’a **pas** été activé : cela pénalise la lecture (WCAG). On a privilégié **mise en page** + **overflow**. Si le problème de dézoom reste, on pourra itérer (contraintes de largeur du markdown, etc.). - `html` / `body` : `overflow-x: hidden`, `min-width: 0`, `max-width: 100%` dans `app/globals.css` ;
- grille racine, `<header>`, `<main>`, footer : `min-w-0`, `w-full` / `max-w-full` là où c’est utile (`app/layout.tsx`, `app/components/Footer.jsx`) ;
- **`.bg-wallpaper`** : `width: 100%` (plus de `200vw` sur mobile) pour éviter le double de largeur de page et le débordement au pinch-zoom ;
- page d’**accueil** : conteneur principal + bloc texte en `min-w-0` / `max-w-full` (`app/page.tsx`).
| **Statut** | `fait` (à valider sur appareil réel) | **Accessibilité** : le **verrouillage total du zoom** n’a **pas** été retenu (hors demande) ; on privilégie la mise en page. Si le dézoom reste gênant, on pourra itérer (contraintes sur le markdown, etc.).
| **Statut** | `fait` (à valider sur appareil réel) — opt-in zoom non appliqué pour l’instant |
--- ---
@ -58,5 +63,5 @@ Recenser les **problèmes visuels** et de **mise en forme** pour les **corriger*
## Suite ## Suite
| Prochain | Fichier | | Prochain | Fichier |
|----------|--------| |----------|---------|
| 04 | `04-accueil-hero-mobile.webp` puis 05… | | 04 | `04-accueil-hero-mobile.webp` puis 05… |