Portfolio-Codex/docs/stories/2.3.page-accueil-accroche.md

Story 2.3: Page d'Accueil avec Accroche

Status

Ready for Dev

Story

As a visiteur, I want voir une page d'accueil avec une accroche claire et engageante, so that je comprends immédiatement qui est le développeur et ce qu'il propose.

Acceptance Criteria

1. La page d'accueil affiche une section "hero" avec : nom/prénom, titre (développeur web), et une phrase d'accroche
2. Un bouton secondaire CTA invite à découvrir les projets
3. Le design est aéré et la typographie met en valeur l'accroche
4. La page inclut la navbar et le footer
5. Le contenu est centré et responsive
6. Les animations sont subtiles (fade-in au chargement)

Tasks / Subtasks

• [] Task 1 : Créer la page home.php (AC: 4)

  • [] Créer pages/home.php (implémenté dans index.php, migration avec routeur)
  • [] Inclure header, navbar et footer
  • Configurer le routeur pour servir cette page sur / (story 3.2)

• [] Task 2 : Créer la section Hero (AC: 1, 3)

  • [] Ajouter le nom/prénom du développeur
  • [] Ajouter le titre "Développeur Web Full-Stack"
  • [] Ajouter une phrase d'accroche percutante
  • [] Centrer verticalement et horizontalement
  • [] Appliquer la typographie (text-display)

• [] Task 3 : Ajouter les CTA (AC: 2)

  • [] Bouton principal "Découvrir mes projets" (btn-primary)
  • [] Bouton secondaire "En savoir plus" (btn-secondary) optionnel
  • [] Liens vers /projets et /a-propos

• [] Task 4 : Rendre responsive (AC: 5)

  • [] Mobile : texte plus petit, padding réduit
  • [] Desktop : taille maximale, centré

• [] Task 5 : Ajouter les animations (AC: 6)

  • [] Fade-in sur le titre (animate-fade-in)
  • [] Fade-in décalé sur le sous-titre (animation-delay-100)
  • [] Fade-in décalé sur les boutons (animation-delay-200)

Dev Notes

Structure pages/home.php

<?php
/**
 * Page d'accueil
 */

$pageTitle = 'Accueil';
$pageDescription = 'Portfolio de développeur web full-stack. Découvrez mes projets, compétences et parcours.';
$currentPage = 'home';

include_template('header', compact('pageTitle', 'pageDescription'));
include_template('navbar', compact('currentPage'));
?>

<main>
    <!-- Hero Section -->
    <section class="min-h-[calc(100vh-5rem)] flex items-center justify-center">
        <div class="container-content text-center py-20">
            <!-- Nom -->
            <p class="text-primary font-medium mb-4 animate-fade-in">
                Bonjour, je suis
            </p>

            <!-- Titre principal -->
            <h1 class="text-display text-text-primary mb-6 animate-fade-in animation-delay-100">
                Prénom <span class="text-primary">NOM</span>
            </h1>

            <!-- Sous-titre -->
            <p class="text-heading text-text-secondary mb-6 animate-fade-in animation-delay-200">
                Développeur Web Full-Stack
            </p>

            <!-- Accroche -->
            <p class="text-xl text-text-secondary max-w-2xl mx-auto mb-10 animate-fade-in animation-delay-300">
                Je crée des expériences web modernes, performantes et accessibles.
                <br>Chaque projet est une opportunité de montrer plutôt que de dire.
            </p>

            <!-- CTA -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in animation-delay-300">
                <a href="/projets" class="btn-primary">
                    Découvrir mes projets
                </a>
                <a href="/a-propos" class="btn-secondary">
                    En savoir plus
                </a>
            </div>
        </div>
    </section>
</main>

<?php include_template('footer'); ?>

Mise à jour du Router (index.php)

$router
    ->add('/', 'pages/home.php')
    // ... autres routes

Responsive

Breakpoint	Adaptations
Mobile	text-3xl pour H1, padding réduit
Desktop	text-display (2.5rem), max-w-2xl pour l'accroche

Animations

Les classes sont déjà définies dans input.css :

• .animate-fade-in : opacity 0 → 1
• .animate-fade-in-up : opacity + translateY
• .animation-delay-100/200/300 : délais

Testing

• Le nom et titre sont visibles et centrés
• L'accroche est lisible et bien espacée
• Les boutons CTA sont cliquables
• Les animations se jouent au chargement
• La page est responsive (mobile/desktop)
• La navbar et le footer sont présents

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

• Hero section créée dans index.php (migration vers pages/home.php avec routeur story 3.2)
• Typographie responsive : text-4xl → text-5xl → text-display
• Animations fade-in avec délais progressifs (100, 200, 300ms)
• CTA : btn-primary (projets) + btn-secondary (à propos)
• Centrage vertical avec min-h-[calc(100vh-5rem)] et flex
• Header, navbar, footer inclus via compact()

File List

Fichier	Action
index.php	Modifié (Hero section)
assets/css/output.css	Regénéré

QA Results

À compléter par le QA agent