✨ Story 2.4: navigation rapide

docs/stories/2.4.sections-navigation-rapide.md

@@ -2,7 +2,7 @@
 
 ## Status
 
-Ready for Dev
+review
 
 ## Story
 
@@ -20,28 +20,28 @@ Ready for Dev
 
 ## Tasks / Subtasks
 
-- [] **Task 1 : Ajouter la section sous le hero** (AC: 1)
+- [x] **Task 1 : Ajouter la section sous le hero** (AC: 1)
-  - [] Créer une section avec titre "Explorez mon portfolio"
+  - [x] Créer une section avec titre "Explorez mon portfolio"
-  - [] Ajouter les 3 cartes de navigation
+  - [x] Ajouter les 3 cartes de navigation
 
-- [] **Task 2 : Créer les cartes de navigation** (AC: 2)
+- [x] **Task 2 : Créer les cartes de navigation** (AC: 2)
-  - [] Carte Projets : icône, titre, description, lien
+  - [x] Carte Projets : icône, titre, description, lien
-  - [] Carte Compétences : icône, titre, description, lien
+  - [x] Carte Compétences : icône, titre, description, lien
-  - [] Carte Me Découvrir : icône, titre, description, lien
+  - [x] Carte Me Découvrir : icône, titre, description, lien
 
-- [] **Task 3 : Implémenter la grille responsive** (AC: 3)
+- [x] **Task 3 : Implémenter la grille responsive** (AC: 3)
-  - [] 1 colonne sur mobile (grid-cols-1)
+  - [x] 1 colonne sur mobile (grid-cols-1)
-  - [] 3 colonnes sur desktop (md:grid-cols-3)
+  - [x] 3 colonnes sur desktop (md:grid-cols-3)
-  - [] Gap approprié entre les cartes (gap-6 lg:gap-8)
+  - [x] Gap approprié entre les cartes (gap-6 lg:gap-8)
 
-- [] **Task 4 : Ajouter les effets hover** (AC: 4)
+- [x] **Task 4 : Ajouter les effets hover** (AC: 4)
-  - [] Utiliser la classe card-interactive
+  - [x] Utiliser la classe card-interactive
-  - [] Élévation + ombre au hover
+  - [x] Élévation + ombre au hover
 
-- [] **Task 5 : Intégrer les icônes** (AC: 5)
+- [x] **Task 5 : Intégrer les icônes** (AC: 5)
-  - [] Utiliser Heroicons (SVG inline)
+  - [x] Utiliser Heroicons (SVG inline)
-  - [] Taille cohérente (w-8 h-8 dans conteneur w-16 h-16)
+  - [x] Taille cohérente (w-8 h-8 dans conteneur w-16 h-16)
-  - [] Couleur primary
+  - [x] Couleur primary
 
 ## Dev Notes
 
@@ -139,33 +139,38 @@ Ready for Dev
 
 | Date | Version | Description | Author |
 |------|---------|-------------|--------|
+| 2026-02-04 | 0.1 | Implementation story 2.4 | Amelia |
 | 2026-01-22 | 0.1 | Création initiale | Sarah (PO) |
 
 ## Dev Agent Record
 
 ### Agent Model Used
 
-Claude Opus 4.5 (claude-opus-4-5-20251101)
+GPT-5 Codex
 
 ### Debug Log References
 
-_Aucun_
+- tests/quicknav.test.ps1: quick navigation coverage
 
 ### Completion Notes List
 
-- Section navigation rapide ajoutée sous le hero dans index.php
+- Section navigation rapide ajoutée sous le hero dans pages/home.php
 - 3 cartes : Projets, Compétences, Me Découvrir
 - Grille responsive : grid-cols-1 mobile, md:grid-cols-3 tablet+
 - Icônes Heroicons SVG inline (squares-2x2, code-bracket, user)
 - Effets hover via card-interactive + group-hover sur titres
 - Conteneurs d'icônes avec bg-primary/10 → bg-primary/20 au hover
+- CSS régénéré via `npm run build`
+- Tests: `powershell -ExecutionPolicy Bypass -File tests/run.ps1`
 
 ### File List
 
 | Fichier | Action |
 |---------|--------|
-| `index.php` | Modifié (section navigation) |
+| `pages/home.php` | Modifié (section navigation) |
 | `assets/css/output.css` | Regénéré |
+| `tests/quicknav.test.ps1` | Créé |
+| `tests/run.ps1` | Modifié |
 
 ## QA Results
 

pages/home.php

@@ -43,6 +43,61 @@ include_template('navbar', compact('currentPage'));
             </div>
         </div>
     </section>
+
+    <section class="section bg-surface">
+        <div class="container-content">
+            <div class="section-header">
+                <h2 class="section-title">Explorez mon portfolio</h2>
+                <p class="section-subtitle">
+                    Découvrez mes réalisations, compétences et parcours
+                </p>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
+                <a href="/projets" class="card-interactive group">
+                    <div class="card-body text-center">
+                        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
+                            <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
+                            </svg>
+                        </div>
+                        <h3 class="text-subheading mb-2 group-hover:text-primary transition-colors">Projets</h3>
+                        <p class="text-text-secondary">
+                            Découvrez mes réalisations web avec démonstrations et explications techniques.
+                        </p>
+                    </div>
+                </a>
+
+                <a href="/competences" class="card-interactive group">
+                    <div class="card-body text-center">
+                        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
+                            <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
+                            </svg>
+                        </div>
+                        <h3 class="text-subheading mb-2 group-hover:text-primary transition-colors">Compétences</h3>
+                        <p class="text-text-secondary">
+                            Technologies maîtrisées et outils utilisés, avec preuves à l'appui.
+                        </p>
+                    </div>
+                </a>
+
+                <a href="/a-propos" class="card-interactive group">
+                    <div class="card-body text-center">
+                        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
+                            <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+                            </svg>
+                        </div>
+                        <h3 class="text-subheading mb-2 group-hover:text-primary transition-colors">Me Découvrir</h3>
+                        <p class="text-text-secondary">
+                            Mon parcours, mes motivations et ce qui me passionne au-delà du code.
+                        </p>
+                    </div>
+                </a>
+            </div>
+        </div>
+    </section>
 </main>
 
 <?php include_template('footer'); ?>

tests/quicknav.test.ps1

@@ -0,0 +1,21 @@
+$ErrorActionPreference = 'Stop'
+
+function Assert-True {
+  param(
+    [bool]$Condition,
+    [string]$Message
+  )
+  if (-not $Condition) { throw $Message }
+}
+
+Assert-True (Test-Path 'pages/home.php') 'Missing pages/home.php'
+$homeContent = Get-Content -Raw 'pages/home.php'
+Assert-True ($homeContent -match 'Explorez mon portfolio') 'Home missing quick nav section title'
+Assert-True ($homeContent -match 'href="/projets"') 'Home missing projects link'
+Assert-True ($homeContent -match 'href="/competences"') 'Home missing skills link'
+Assert-True ($homeContent -match 'href="/a-propos"') 'Home missing about link'
+Assert-True ($homeContent -match 'grid-cols-1') 'Home missing mobile grid'
+Assert-True ($homeContent -match 'md:grid-cols-3') 'Home missing desktop grid'
+Assert-True ($homeContent -match 'card-interactive') 'Home missing hover card class'
+
+'OK'

tests/run.ps1

@@ -7,4 +7,5 @@ $here = Split-Path -Parent $MyInvocation.MyCommand.Path
 & (Join-Path $here 'navbar.test.ps1')
 & (Join-Path $here 'cta.test.ps1')
 & (Join-Path $here 'home.test.ps1')
+& (Join-Path $here 'quicknav.test.ps1')
 'OK'