diff --git a/architecture/site-github-pages-architecture.md b/architecture/site-github-pages-architecture.md new file mode 100644 index 0000000..5bded03 --- /dev/null +++ b/architecture/site-github-pages-architecture.md @@ -0,0 +1,35 @@ +# Architecture — Site personnel statique GitHub Pages + +- **Date**: 2026-03-01 +- **Gate visée**: G1 Arch Freeze +- **Responsable (agent)**: Architect + +## Vue d'ensemble +Architecture front statique en 2 fichiers: +- `index.html`: structure sémantique (header/nav/main/sections/footer) +- `assets/styles.css`: thème, layout responsive, composants visuels + +## Interfaces +- **Entrée**: navigateur web moderne +- **Sortie**: rendu d'un site vitrine personnel +- **Hébergement**: GitHub Pages (branch `main`, root) + +## Structure UI +- Bloc `hero` avec CTA. +- Section `#a-propos` pour la présentation. +- Section `#projets` avec grille de cartes. +- Section `#contact` avec liens sortants. + +## Contraintes techniques +- Aucun JS requis pour la version initiale. +- Chemins relatifs uniquement (`assets/styles.css`). +- CSS pur (variables, grid, media queries). + +## Budgets +- Poids page + CSS < 80KB (source non compressée). +- Temps de chargement perçu < 1s sur connexion standard (contenu statique). + +## Validation +- Smoke test HTTP local. +- Vérification ancres + rendu responsive. +- Capture visuelle de preuve. diff --git a/artifacts/architect/2026-03-01/g1-arch-freeze-v2.md b/artifacts/architect/2026-03-01/g1-arch-freeze-v2.md new file mode 100644 index 0000000..325b977 --- /dev/null +++ b/artifacts/architect/2026-03-01/g1-arch-freeze-v2.md @@ -0,0 +1,5 @@ +# G1 Arch Freeze Evidence (v2) + +- Architecture UI détaillée: hero, about, projets, contact. +- Contraintes GitHub Pages (chemins relatifs, statique sans build) confirmées. +- Budgets et stratégie de validation ajustés. diff --git a/artifacts/architect/2026-03-01/g1-arch-freeze.md b/artifacts/architect/2026-03-01/g1-arch-freeze.md new file mode 100644 index 0000000..0a3a68f --- /dev/null +++ b/artifacts/architect/2026-03-01/g1-arch-freeze.md @@ -0,0 +1,5 @@ +# G1 Arch Freeze Evidence + +- Architecture statique validée: `index.html` + `assets/styles.css` +- Interfaces et contraintes de chemins relatifs définies +- Budgets simplifiés documentés diff --git a/artifacts/pm-spec/2026-03-01/g0-spec-freeze-v2.md b/artifacts/pm-spec/2026-03-01/g0-spec-freeze-v2.md new file mode 100644 index 0000000..20fd2b6 --- /dev/null +++ b/artifacts/pm-spec/2026-03-01/g0-spec-freeze-v2.md @@ -0,0 +1,5 @@ +# G0 Spec Freeze Evidence (v2) + +- Spécification orientée « site personnel » finalisée. +- AC mis à jour avec navigation ancrée et contenu vitrine. +- Non-goals, risques et TODO de personnalisation documentés. diff --git a/artifacts/pm-spec/2026-03-01/g0-spec-freeze.md b/artifacts/pm-spec/2026-03-01/g0-spec-freeze.md new file mode 100644 index 0000000..dc03a59 --- /dev/null +++ b/artifacts/pm-spec/2026-03-01/g0-spec-freeze.md @@ -0,0 +1,6 @@ +# G0 Spec Freeze Evidence + +- Spec créée: `specs/site-github-pages-spec.md` +- AC définis: AC1..AC4 +- Non-goals et risques documentés +- TODO ajoutés pour informations manquantes diff --git a/artifacts/qa-test/2026-03-01/g2-implement-v2.md b/artifacts/qa-test/2026-03-01/g2-implement-v2.md new file mode 100644 index 0000000..c03ab24 --- /dev/null +++ b/artifacts/qa-test/2026-03-01/g2-implement-v2.md @@ -0,0 +1,6 @@ +# G2 Implement Evidence (v2) + +Implémentation livrée: +- `index.html` transformé en template de site personnel complet. +- `assets/styles.css` enrichi (navigation sticky, sections, cartes projets, responsive). +- Documentation de déploiement mise à jour. diff --git a/artifacts/qa-test/2026-03-01/g3-verification-v2.md b/artifacts/qa-test/2026-03-01/g3-verification-v2.md new file mode 100644 index 0000000..5c020d1 --- /dev/null +++ b/artifacts/qa-test/2026-03-01/g3-verification-v2.md @@ -0,0 +1,7 @@ +# G3 Verification Evidence (v2) + +Vérifications exécutées: +- `python3 -m http.server 4173` +- `curl -I http://127.0.0.1:4173/` -> `HTTP/1.0 200 OK` +- `rg 'href="/' index.html` (attendu: aucune occurrence) +- Capture Playwright: `artifacts/qa-test/2026-03-01/site-home-v2.png` diff --git a/artifacts/qa-test/2026-03-01/g3-verification.md b/artifacts/qa-test/2026-03-01/g3-verification.md new file mode 100644 index 0000000..f4bdb76 --- /dev/null +++ b/artifacts/qa-test/2026-03-01/g3-verification.md @@ -0,0 +1,7 @@ +# G3 Verification Evidence + +Exécuté: +- `python3 -m http.server 4173` (serveur local) +- `curl -I http://127.0.0.1:4173/` -> `HTTP/1.0 200 OK` +- Capture visuelle via Playwright: + - `artifacts/qa-test/2026-03-01/site-home.png` diff --git a/assets/styles.css b/assets/styles.css new file mode 100644 index 0000000..92bbc9c --- /dev/null +++ b/assets/styles.css @@ -0,0 +1,192 @@ +:root { + --bg: #0f172a; + --surface: #111827; + --surface-soft: #1f2937; + --text: #e5e7eb; + --muted: #9ca3af; + --primary: #22d3ee; + --primary-strong: #06b6d4; + --border: #334155; +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; + line-height: 1.6; + background: radial-gradient(circle at top, #1e293b 0%, var(--bg) 45%); + color: var(--text); +} + +.container { + width: min(1000px, 92vw); + margin: 0 auto; +} + +.site-header { + position: sticky; + top: 0; + z-index: 20; + backdrop-filter: blur(8px); + background: rgba(15, 23, 42, 0.75); + border-bottom: 1px solid var(--border); +} + +.nav-wrap { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.8rem 0; +} + +.brand { + color: var(--text); + text-decoration: none; + font-weight: 700; +} + +nav ul { + list-style: none; + display: flex; + gap: 1rem; + margin: 0; + padding: 0; +} + +nav a { + color: var(--muted); + text-decoration: none; + font-weight: 500; +} + +nav a:hover, +nav a:focus-visible { + color: var(--text); +} + +.hero { + padding: 4.5rem 0 2.2rem; +} + +.eyebrow { + color: var(--primary); + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + margin: 0; + font-size: 0.8rem; +} + +h1 { + font-size: clamp(2rem, 5vw, 3.2rem); + line-height: 1.2; + margin: 0.6rem 0 1rem; +} + +.hero-text { + max-width: 64ch; + margin: 0 0 1.4rem; + color: var(--muted); +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 0.7rem; +} + +.btn { + display: inline-block; + padding: 0.65rem 1rem; + border-radius: 0.7rem; + text-decoration: none; + font-weight: 600; +} + +.btn-primary { + background: var(--primary); + color: #0b1120; +} + +.btn-primary:hover, +.btn-primary:focus-visible { + background: var(--primary-strong); +} + +.btn-secondary { + border: 1px solid var(--border); + color: var(--text); +} + +.panel { + background: linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%); + border: 1px solid var(--border); + border-radius: 14px; + padding: 1.1rem 1.2rem; + margin: 1rem 0; +} + +h2 { + margin-top: 0.2rem; +} + +.cards { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.9rem; +} + +.card { + background: rgba(2, 6, 23, 0.45); + border: 1px solid var(--border); + border-radius: 10px; + padding: 0.9rem; +} + +.card h3 { + margin-top: 0.1rem; +} + +.contact-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 0.3rem; +} + +.contact-list a { + color: var(--primary); + text-decoration: none; +} + +.contact-list a:hover, +.contact-list a:focus-visible { + text-decoration: underline; +} + +.site-footer { + border-top: 1px solid var(--border); + color: var(--muted); + padding: 1.2rem 0 2.2rem; + margin-top: 1.6rem; +} + +@media (max-width: 760px) { + .nav-wrap { + flex-direction: column; + gap: 0.7rem; + } + + .cards { + grid-template-columns: 1fr; + } +} diff --git a/docs/github-pages-deploy.md b/docs/github-pages-deploy.md new file mode 100644 index 0000000..1875651 --- /dev/null +++ b/docs/github-pages-deploy.md @@ -0,0 +1,26 @@ +# Déploiement GitHub Pages (site personnel) + +## Prérequis +- `index.html` présent à la racine. +- `assets/styles.css` référencé en chemin relatif. +- Branche principale à jour. + +## Déploiement +1. GitHub > dépôt > **Settings** > **Pages**. +2. Dans **Build and deployment**: + - **Source**: Deploy from a branch + - **Branch**: `main` + `/ (root)` +3. Enregistrer. +4. Attendre l'URL générée par GitHub Pages. + +## Vérification post-déploiement +- Ouvrir l'URL publique. +- Vérifier les sections: héro, à-propos, projets, contact. +- Vérifier les ancres du menu. + +## Personnalisation rapide +- Modifier le nom, le pitch et les projets dans `index.html`. +- Ajuster couleurs/espacements dans `assets/styles.css`. + +## Traçabilité +- Mettre à jour `evidence/manifest.json` et `artifacts/*//` à chaque itération. diff --git a/evidence/manifest.json b/evidence/manifest.json new file mode 100644 index 0000000..be6df67 --- /dev/null +++ b/evidence/manifest.json @@ -0,0 +1,23 @@ +{ + "date": "2026-03-01", + "change": "Refonte en site personnel GitHub Pages avec navigation, sections et personnalisation", + "gates_satisfied": ["G0", "G1", "G2", "G3"], + "artifacts": [ + "artifacts/pm-spec/2026-03-01/g0-spec-freeze-v2.md", + "artifacts/architect/2026-03-01/g1-arch-freeze-v2.md", + "artifacts/qa-test/2026-03-01/g2-implement-v2.md", + "artifacts/qa-test/2026-03-01/g3-verification-v2.md" + ], + "docs": [ + "specs/site-github-pages-spec.md", + "architecture/site-github-pages-architecture.md", + "docs/github-pages-deploy.md" + ], + "implementation": [ + "index.html", + "assets/styles.css" + ], + "notes": [ + "TODO branding et liens réels maintenus dans la spec pour itération suivante" + ] +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..3dfe5b3 --- /dev/null +++ b/index.html @@ -0,0 +1,84 @@ + + + + + + Votre Nom — Site personnel + + + + +
+
+ Votre Nom + +
+
+ +
+
+

GitHub Pages • HTML/CSS pur

+

Je conçois des expériences web claires et efficaces.

+

+ Ceci est une base de site personnel prête à déployer. Personnalisez ce + contenu avec votre identité, votre activité et vos réalisations. +

+

+ Voir mes projets + Me contacter +

+
+ +
+

À propos

+

+ Bonjour, je suis Votre Nom. J'aide à transformer des + idées en produits concrets, avec une attention particulière à la + simplicité, la performance et la maintenabilité. +

+
+ +
+

Projets

+
+
+

Projet 01

+

Landing page orientée conversion avec design responsive.

+
+
+

Projet 02

+

Refonte d'interface avec amélioration de lisibilité mobile.

+
+
+

Projet 03

+

Template statique déployé sur GitHub Pages sans build.

+
+
+
+ +
+

Contact

+ +
+
+ + + + diff --git a/specs/site-github-pages-spec.md b/specs/site-github-pages-spec.md new file mode 100644 index 0000000..b9fc737 --- /dev/null +++ b/specs/site-github-pages-spec.md @@ -0,0 +1,43 @@ +# Spécification — Site web personnel adapté GitHub Pages + +- **Date**: 2026-03-01 +- **Gate visée**: G0 Spec Freeze +- **Responsable (agent)**: PM/Spec + +## Objectif +Créer un site web personnel statique, élégant et simple à maintenir, prêt à être publié sur GitHub Pages sans pipeline de build. + +## Contexte +Le premier bootstrap était trop générique. Le besoin utilisateur est maintenant explicite: « site adapté pour github pages et pour mon site web ». + +## Exigences fonctionnelles +1. Le site expose `index.html` à la racine du dépôt. +2. Le site inclut une navigation ancrée: `À propos`, `Projets`, `Contact`. +3. Le site inclut une section héro claire avec proposition de valeur. +4. Le site inclut une section projets (cartes) et une section contact (liens). +5. Tous les liens d'assets utilisent des chemins relatifs compatibles GitHub Pages. + +## Exigences non-fonctionnelles +- 100% statique (HTML + CSS), sans dépendances npm. +- Responsive mobile/desktop. +- Accessibilité de base (contraste correct, structure sémantique, focus visible). + +## Critères d'acceptation (AC) +- AC1: Le site affiche une identité de site personnel (pas un simple placeholder technique). +- AC2: Les ancres de navigation fonctionnent (`#a-propos`, `#projets`, `#contact`). +- AC3: Le rendu mobile ne casse pas la grille de cartes. +- AC4: Déploiement GitHub Pages documenté et test local effectué. + +## Non-objectifs +- Pas de blog dynamique. +- Pas d'injection de contenu CMS/API. +- Pas de formulaire backend. + +## Risques +- Branding incomplet si le nom/profession ne sont pas fournis. +- Liens externes non finalisés si les profils sociaux ne sont pas donnés. + +## TODO / Informations manquantes +- TODO: remplacer « Votre Nom » par votre identité réelle. +- TODO: renseigner vos vrais liens (GitHub, LinkedIn, email). +- TODO: ajouter vos projets réels dans la section dédiée.