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

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

<!-- 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