skycel/Portfolio-Codex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
Portfolio-Codex/docs/stories/2.4.sections-navigation-rapide.md

6.7 KiB
Raw Permalink Blame History

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