skycel/Portfolio-Codex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Story 2.4: navigation rapide

Browse Source
This commit is contained in:
skycel
2026-02-04 17:00:33 +01:00
parent a1092c9f60
commit c9369df683
5 changed files with 106 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/output.css
View File

File diff suppressed because one or more lines are too long

51
docs/stories/2.4.sections-navigation-rapide.md
View File

@@ -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)
- [] Créer une section avec titre "Explorez mon portfolio"
- [] Ajouter les 3 cartes de navigation
- [x] **Task 1 : Ajouter la section sous le hero** (AC: 1)
- [x] Créer une section avec titre "Explorez mon portfolio"
- [x] Ajouter les 3 cartes de navigation
- [] **Task 2 : Créer les cartes de navigation** (AC: 2)
- [] Carte Projets : icône, titre, description, lien
- [] Carte Compétences : icône, titre, description, lien
- [] Carte Me Découvrir : icône, titre, description, lien
- [x] **Task 2 : Créer les cartes de navigation** (AC: 2)
- [x] Carte Projets : icône, titre, description, lien
- [x] Carte Compétences : icône, titre, description, lien
- [x] Carte Me Découvrir : icône, titre, description, lien
- [] **Task 3 : Implémenter la grille responsive** (AC: 3)
- [] 1 colonne sur mobile (grid-cols-1)
- [] 3 colonnes sur desktop (md:grid-cols-3)
- [] Gap approprié entre les cartes (gap-6 lg:gap-8)
- [x] **Task 3 : Implémenter la grille responsive** (AC: 3)
- [x] 1 colonne sur mobile (grid-cols-1)
- [x] 3 colonnes sur desktop (md:grid-cols-3)
- [x] Gap approprié entre les cartes (gap-6 lg:gap-8)
- [] **Task 4 : Ajouter les effets hover** (AC: 4)
- [] Utiliser la classe card-interactive
- [] Élévation + ombre au hover
- [x] **Task 4 : Ajouter les effets hover** (AC: 4)
- [x] Utiliser la classe card-interactive
- [x] Élévation + ombre au hover
- [] **Task 5 : Intégrer les icônes** (AC: 5)
- [] Utiliser Heroicons (SVG inline)
- [] Taille cohérente (w-8 h-8 dans conteneur w-16 h-16)
- [] Couleur primary
- [x] **Task 5 : Intégrer les icônes** (AC: 5)
- [x] Utiliser Heroicons (SVG inline)
- [x] Taille cohérente (w-8 h-8 dans conteneur w-16 h-16)
- [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

55
pages/home.php
View File

@@ -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'); ?>

21
tests/quicknav.test.ps1 Normal file
View File

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

1
tests/run.ps1
View File

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