2026-03-01 18:43:32 +00:00 · 2026-03-01 18:43:32 +00:00
13 changed files with 444 additions and 0 deletions
@@ -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.
@@ -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.
@@ -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
@@ -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.
@@ -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
@@ -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.
@@ -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`
@@ -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`
@@ -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;
+  }
+}
@@ -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/*/<date>/` à chaque itération.
@@ -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"
+  ]
+}
@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Votre Nom — Site personnel</title>
+    <meta
+      name="description"
+      content="Site personnel statique prêt pour GitHub Pages : présentation, projets et contact."
+    />
+    <link rel="stylesheet" href="assets/styles.css" />
+  </head>
+  <body>
+    <header class="site-header">
+      <div class="container nav-wrap">
+        <a class="brand" href="#top">Votre Nom</a>
+        <nav aria-label="Navigation principale">
+          <ul>
+            <li><a href="#a-propos">À propos</a></li>
+            <li><a href="#projets">Projets</a></li>
+            <li><a href="#contact">Contact</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <main id="top" class="container">
+      <section class="hero" aria-labelledby="hero-title">
+        <p class="eyebrow">GitHub Pages • HTML/CSS pur</p>
+        <h1 id="hero-title">Je conçois des expériences web claires et efficaces.</h1>
+        <p class="hero-text">
+          Ceci est une base de site personnel prête à déployer. Personnalisez ce
+          contenu avec votre identité, votre activité et vos réalisations.
+        </p>
+        <p class="hero-actions">
+          <a class="btn btn-primary" href="#projets">Voir mes projets</a>
+          <a class="btn btn-secondary" href="#contact">Me contacter</a>
+        </p>
+      </section>
+
+      <section id="a-propos" class="panel" aria-labelledby="about-title">
+        <h2 id="about-title">À propos</h2>
+        <p>
+          Bonjour, je suis <strong>Votre Nom</strong>. J'aide à transformer des
+          idées en produits concrets, avec une attention particulière à la
+          simplicité, la performance et la maintenabilité.
+        </p>
+      </section>
+
+      <section id="projets" class="panel" aria-labelledby="projects-title">
+        <h2 id="projects-title">Projets</h2>
+        <div class="cards">
+          <article class="card">
+            <h3>Projet 01</h3>
+            <p>Landing page orientée conversion avec design responsive.</p>
+          </article>
+          <article class="card">
+            <h3>Projet 02</h3>
+            <p>Refonte d'interface avec amélioration de lisibilité mobile.</p>
+          </article>
+          <article class="card">
+            <h3>Projet 03</h3>
+            <p>Template statique déployé sur GitHub Pages sans build.</p>
+          </article>
+        </div>
+      </section>
+
+      <section id="contact" class="panel" aria-labelledby="contact-title">
+        <h2 id="contact-title">Contact</h2>
+        <ul class="contact-list">
+          <li><a href="mailto:vous@example.com">vous@example.com</a></li>
+          <li><a href="https://github.com/username">GitHub</a></li>
+          <li><a href="https://www.linkedin.com/in/username/">LinkedIn</a></li>
+        </ul>
+      </section>
+    </main>
+
+    <footer class="site-footer">
+      <div class="container">
+        <small>© 2026 Votre Nom — Site personnel GitHub Pages.</small>
+      </div>
+    </footer>
+  </body>
+</html>
@@ -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.