Story 1.1: initialisation projet
This commit is contained in:
172
docs/stories/2.4.sections-navigation-rapide.md
Normal file
172
docs/stories/2.4.sections-navigation-rapide.md
Normal file
@@ -0,0 +1,172 @@
|
||||
# Story 2.4: Sections de Navigation Rapide sur l'Accueil
|
||||
|
||||
## Status
|
||||
|
||||
Ready for Dev
|
||||
|
||||
## Story
|
||||
|
||||
**As a** visiteur,
|
||||
**I want** voir un aperçu des sections principales sur la page d'accueil,
|
||||
**so that** je navigue rapidement vers ce qui m'intéresse.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
1. Sous le hero, des cartes/blocs présentent les sections : Projets, Compétences, Me Découvrir
|
||||
2. Chaque bloc a un titre, une courte description, et un lien vers la page correspondante
|
||||
3. Les blocs sont disposés en grille responsive (1 colonne mobile, 3 colonnes desktop)
|
||||
4. Les blocs ont un effet hover subtil
|
||||
5. L'ensemble reste cohérent avec le design global
|
||||
|
||||
## 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
|
||||
|
||||
- [] **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
|
||||
|
||||
- [] **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)
|
||||
|
||||
- [] **Task 4 : Ajouter les effets hover** (AC: 4)
|
||||
- [] Utiliser la classe card-interactive
|
||||
- [] É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
|
||||
|
||||
## Dev Notes
|
||||
|
||||
### Code à ajouter dans pages/home.php
|
||||
|
||||
```php
|
||||
<!-- Après la section Hero -->
|
||||
|
||||
<!-- Section Navigation Rapide -->
|
||||
<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">
|
||||
<!-- Carte Projets -->
|
||||
<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>
|
||||
|
||||
<!-- Carte Compétences -->
|
||||
<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>
|
||||
|
||||
<!-- Carte Me Découvrir -->
|
||||
<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>
|
||||
```
|
||||
|
||||
### Icônes Heroicons Utilisées
|
||||
|
||||
| Carte | Icône | Description |
|
||||
|-------|-------|-------------|
|
||||
| Projets | squares-2x2 | Grille de carrés |
|
||||
| Compétences | code-bracket | Chevrons de code |
|
||||
| Me Découvrir | user | Silhouette utilisateur |
|
||||
|
||||
### Responsive
|
||||
|
||||
| Breakpoint | Colonnes |
|
||||
|------------|----------|
|
||||
| Mobile (< 768px) | 1 colonne |
|
||||
| Tablet (≥ 768px) | 3 colonnes |
|
||||
| Desktop | 3 colonnes avec gap plus large |
|
||||
|
||||
## Testing
|
||||
|
||||
- [ ] Les 3 cartes sont visibles sous le hero
|
||||
- [ ] Chaque carte a une icône, titre et description
|
||||
- [ ] Les liens redirigent vers les bonnes pages
|
||||
- [ ] L'effet hover fonctionne (élévation + ombre)
|
||||
- [ ] Mobile : cartes empilées verticalement
|
||||
- [ ] Desktop : 3 cartes côte à côte
|
||||
|
||||
## Change Log
|
||||
|
||||
| Date | Version | Description | Author |
|
||||
|------|---------|-------------|--------|
|
||||
| 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)
|
||||
|
||||
### Debug Log References
|
||||
|
||||
_Aucun_
|
||||
|
||||
### Completion Notes List
|
||||
|
||||
- Section navigation rapide ajoutée sous le hero dans index.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
|
||||
|
||||
### File List
|
||||
|
||||
| Fichier | Action |
|
||||
|---------|--------|
|
||||
| `index.php` | Modifié (section navigation) |
|
||||
| `assets/css/output.css` | Regénéré |
|
||||
|
||||
## QA Results
|
||||
|
||||
_À compléter par le QA agent_
|
||||
Reference in New Issue
Block a user