✨ Story 2.3: page accueil hero

2026-02-04 16:58:07 +01:00
parent 8dd68ef584
commit a1092c9f60
10 changed files with 137 additions and 87 deletions
--- a/assets/css/output.css
+++ b/assets/css/output.css
--- a/docs/stories/2.3.page-accueil-accroche.md
+++ b/docs/stories/2.3.page-accueil-accroche.md
@@ -2,7 +2,7 @@

 ## Status

-Ready for Dev
+review

 ## Story

@@ -21,31 +21,31 @@ Ready for Dev

 ## 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
+- [x] **Task 1 : Créer la page home.php** (AC: 4)
+  - [x] Créer `pages/home.php` (implémenté dans index.php, migration avec routeur)
+  - [x] 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)
+- [x] **Task 2 : Créer la section Hero** (AC: 1, 3)
+  - [x] Ajouter le nom/prénom du développeur
+  - [x] Ajouter le titre "Développeur Web Full-Stack"
+  - [x] Ajouter une phrase d'accroche percutante
+  - [x] Centrer verticalement et horizontalement
+  - [x] 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
+- [x] **Task 3 : Ajouter les CTA** (AC: 2)
+  - [x] Bouton principal "Découvrir mes projets" (btn-primary)
+  - [x] Bouton secondaire "En savoir plus" (btn-secondary) optionnel
+  - [x] Liens vers /projets et /a-propos

- [] **Task 4 : Rendre responsive** (AC: 5)
-  - [] Mobile : texte plus petit, padding réduit
-  - [] Desktop : taille maximale, centré
+- [x] **Task 4 : Rendre responsive** (AC: 5)
+  - [x] Mobile : texte plus petit, padding réduit
+  - [x] 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)
+- [x] **Task 5 : Ajouter les animations** (AC: 6)
+  - [x] Fade-in sur le titre (animate-fade-in)
+  - [x] Fade-in décalé sur le sous-titre (animation-delay-100)
+  - [x] Fade-in décalé sur les boutons (animation-delay-200)

 ## Dev Notes

@@ -141,33 +141,42 @@ Les classes sont déjà définies dans input.css :

 | Date | Version | Description | Author |
 |------|---------|-------------|--------|
+| 2026-02-04 | 0.1 | Implementation story 2.3 | 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/home.test.ps1: home page coverage

 ### 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
+- Hero section créée dans pages/home.php (routeur story 3.2)
 - 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()
+- CSS régénéré via `npm run build`
+- Tests: `powershell -ExecutionPolicy Bypass -File tests/run.ps1`

 ### File List

 | Fichier | Action |
 |---------|--------|
-| `index.php` | Modifié (Hero section) |
+| `pages/home.php` | Créé |
+| `index.php` | Modifié (inclut home.php) |
 | `assets/css/output.css` | Regénéré |
+| `tests/home.test.ps1` | Créé |
+| `tests/run.ps1` | Modifié |
+| `tests/structure.test.ps1` | Modifié |
+| `tests/templates.test.ps1` | Modifié |
+| `tests/canary.test.ps1` | Modifié |
+| `tests/navbar.test.ps1` | Modifié |

 ## QA Results

--- a/index.php
+++ b/index.php
@@ -1,52 +1,4 @@
 <?php
-// index.php - Page Canary
+// index.php - Point d'entrée temporaire

-require_once __DIR__ . '/includes/functions.php';
-
-include_template('header', [
-    'pageTitle' => 'Portfolio en construction',
-    'pageDescription' => 'Mon portfolio de développeur web arrive bientôt. Restez connectés !'
-]);
-
-include_template('navbar', [
-    'currentPage' => 'home'
-]);
-?>
-
-<main class="min-h-screen flex items-center justify-center">
-    <div class="container-content text-center py-20">
-        <h1 class="text-display text-text-primary mb-4 animate-fade-in">
-            Portfolio <span class="text-primary">en construction</span>
-        </h1>
-
-        <p class="text-xl text-text-secondary mb-8 max-w-2xl mx-auto animate-fade-in animation-delay-100">
-            Je prépare quelque chose de génial pour vous.
-            <br>Revenez bientôt pour découvrir mes projets !
-        </p>
-
-        <div class="flex justify-center gap-4 mb-12 animate-fade-in animation-delay-200">
-            <span class="badge">PHP</span>
-            <span class="badge">Tailwind CSS</span>
-            <span class="badge badge-primary">En cours</span>
-        </div>
-
-        <div class="card max-w-md mx-auto animate-fade-in animation-delay-300">
-            <div class="card-body">
-                <h3 class="text-subheading mb-2">Infrastructure validée</h3>
-                <p class="text-text-secondary mb-4">
-                    PHP, Tailwind CSS et le serveur fonctionnent correctement.
-                </p>
-                <div class="flex gap-4 justify-center">
-                    <span class="btn-primary">Bouton Primary</span>
-                    <span class="btn-secondary">Bouton Secondary</span>
-                </div>
-            </div>
-        </div>
-
-        <p class="text-text-muted text-sm mt-12">
-            Testé sur mobile, tablette et desktop.
-        </p>
-    </div>
-</main>
-
-<?php include_template('footer'); ?>
+require_once __DIR__ . '/pages/home.php';
--- a/pages/home.php
+++ b/pages/home.php
@@ -0,0 +1,48 @@
+<?php
+/**
+ * Page d'accueil
+ */
+
+require_once __DIR__ . '/../includes/functions.php';
+
+$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>
+    <section class="min-h-[calc(100vh-5rem)] flex items-center justify-center">
+        <div class="container-content text-center py-20">
+            <p class="text-primary font-medium mb-4 animate-fade-in">
+                Bonjour, je suis
+            </p>
+
+            <h1 class="text-display text-text-primary mb-6 animate-fade-in animation-delay-100">
+                Célian <span class="text-primary">Skycel</span>
+            </h1>
+
+            <p class="text-heading text-text-secondary mb-6 animate-fade-in animation-delay-200">
+                Développeur Web Full-Stack
+            </p>
+
+            <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>
+
+            <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'); ?>
--- a/tests/canary.test.ps1
+++ b/tests/canary.test.ps1
@@ -10,9 +10,17 @@ function Assert-True {

 Assert-True (Test-Path 'index.php') 'Missing index.php'
 $index = Get-Content -Raw 'index.php'
-Assert-True ($index -match 'Portfolio') 'index.php missing Portfolio text'
-Assert-True ($index -match 'text-primary') 'index.php missing text-primary class'
-Assert-True ($index -match 'badge') 'index.php missing badge class'
-Assert-True ($index -match 'btn-primary') 'index.php missing btn-primary class'
+if ($index -match 'pages/home.php') {
+  Assert-True (Test-Path 'pages/home.php') 'Missing pages/home.php'
+  $homeContent = Get-Content -Raw 'pages/home.php'
+  Assert-True ($homeContent -match 'Portfolio') 'home.php missing Portfolio text'
+  Assert-True ($homeContent -match 'text-primary') 'home.php missing text-primary class'
+  Assert-True ($homeContent -match 'btn-primary') 'home.php missing btn-primary class'
+} else {
+  Assert-True ($index -match 'Portfolio') 'index.php missing Portfolio text'
+  Assert-True ($index -match 'text-primary') 'index.php missing text-primary class'
+  Assert-True ($index -match 'badge') 'index.php missing badge class'
+  Assert-True ($index -match 'btn-primary') 'index.php missing btn-primary class'
+}

 'OK'
--- a/tests/home.test.ps1
+++ b/tests/home.test.ps1
@@ -0,0 +1,22 @@
+$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 'Découvrir mes projets') 'Home missing CTA projects'
+Assert-True ($homeContent -match 'En savoir plus') 'Home missing CTA about'
+Assert-True ($homeContent -match 'animate-fade-in') 'Home missing animations'
+Assert-True ($homeContent -match 'include_template\(\x27navbar\x27') 'Home missing navbar include'
+
+Assert-True (Test-Path 'index.php') 'Missing index.php'
+$index = Get-Content -Raw 'index.php'
+Assert-True ($index -match 'pages/home.php') 'index.php missing home include'
+
+'OK'
--- a/tests/navbar.test.ps1
+++ b/tests/navbar.test.ps1
@@ -20,6 +20,10 @@ Assert-True ($js -match 'initNavbarScroll') 'Missing initNavbarScroll'

 Assert-True (Test-Path 'index.php') 'Missing index.php'
 $index = Get-Content -Raw 'index.php'
-Assert-True ($index -match "include_template\('navbar'") 'index.php missing navbar include'
+if (-not ($index -match "include_template\('navbar'")) {
+  Assert-True (Test-Path 'pages/home.php') 'Missing pages/home.php for navbar include'
+  $homeContent = Get-Content -Raw 'pages/home.php'
+  Assert-True ($homeContent -match "include_template\('navbar'") 'pages/home.php missing navbar include'
+}

 'OK'
--- a/tests/run.ps1
+++ b/tests/run.ps1
@@ -6,4 +6,5 @@ $here = Split-Path -Parent $MyInvocation.MyCommand.Path
 & (Join-Path $here 'canary.test.ps1')
 & (Join-Path $here 'navbar.test.ps1')
 & (Join-Path $here 'cta.test.ps1')
+& (Join-Path $here 'home.test.ps1')
 'OK'
--- a/tests/structure.test.ps1
+++ b/tests/structure.test.ps1
@@ -31,7 +31,9 @@ Assert-True (Test-Path 'logs/.gitkeep') 'Missing logs/.gitkeep'
 Assert-True (Test-Path 'index.php') 'Missing index.php'
 $index = Get-Content -Raw 'index.php'
 if (-not ($index -match 'Hello World')) {
-  Assert-True ($index -match 'Portfolio') 'index.php missing expected content'
+  if (-not ($index -match 'Portfolio')) {
+    Assert-True ($index -match 'pages/home.php') 'index.php missing expected content'
+  }
 }
 if (-not ($index -match 'meta name="viewport"')) {
  Assert-True (Test-Path 'templates/header.php') 'Missing templates/header.php for viewport meta'
--- a/tests/templates.test.ps1
+++ b/tests/templates.test.ps1
@@ -26,7 +26,11 @@ Assert-True ($footer -match '</body>') 'Footer missing closing body'

 Assert-True (Test-Path 'index.php') 'Missing index.php'
 $index = Get-Content -Raw 'index.php'
-Assert-True ($index -match 'include_template\(') 'index.php missing include_template usage'
+if (-not ($index -match 'include_template\(')) {
+  Assert-True (Test-Path 'pages/home.php') 'Missing pages/home.php for templates usage'
+  $homeContent = Get-Content -Raw 'pages/home.php'
+  Assert-True ($homeContent -match 'include_template\(') 'pages/home.php missing include_template usage'
+}

 Assert-True (Test-Path 'assets/js/main.js') 'Missing assets/js/main.js'