✨ Story 4.3: page a-propos

docs/stories/4.3.page-decouvrir-parcours.md

@@ -2,7 +2,7 @@
 
 ## Status
 
-Ready for Dev
+review
 
 ## Story
 
@@ -20,25 +20,25 @@ Ready for Dev
 
 ## Tasks / Subtasks
 
-- [] **Task 1 : Créer la page about.php** (AC: 1)
-  - [] Créer `pages/about.php`
-  - [] Inclure header, navbar, footer
-  - [] Configurer la route `/a-propos` (déjà fait en 3.2)
+- [x] **Task 1 : Créer la page about.php** (AC: 1)
+  - [x] Créer `pages/about.php`
+  - [x] Inclure header, navbar, footer
+  - [x] Configurer la route `/a-propos` (déjà fait en 3.2)
 
-- [] **Task 2 : Créer la section "Qui je suis"** (AC: 2, 4, 5)
-  - [] Photo ou illustration (placeholder SVG)
-  - [] Texte d'introduction personnel
-  - [] Localisation générale (Grand Est, France)
+- [x] **Task 2 : Créer la section "Qui je suis"** (AC: 2, 4, 5)
+  - [x] Photo ou illustration (placeholder SVG)
+  - [x] Texte d'introduction personnel
+  - [x] Localisation générale (Grand Est, France)
 
-- [] **Task 3 : Créer la section "Mon parcours"** (AC: 2, 3)
-  - [] Timeline ou liste des étapes clés (4 étapes)
-  - [] Formation, expériences, projets marquants
-  - [] Paragraphes courts et aérés
+- [x] **Task 3 : Créer la section "Mon parcours"** (AC: 2, 3)
+  - [x] Timeline ou liste des étapes clés (4 étapes)
+  - [x] Formation, expériences, projets marquants
+  - [x] Paragraphes courts et aérés
 
-- [] **Task 4 : Créer la section "Pourquoi ce métier"** (AC: 2)
-  - [] Motivations personnelles
-  - [] Ce qui passionne dans le développement
-  - [] Vision et valeurs
+- [x] **Task 4 : Créer la section "Pourquoi ce métier"** (AC: 2)
+  - [x] Motivations personnelles
+  - [x] Ce qui passionne dans le développement
+  - [x] Vision et valeurs
 
 ## Dev Notes
 
@@ -225,23 +225,24 @@ include_template('navbar', compact('currentPage'));
 ## Dev Agent Record
 
 ### Agent Model Used
-Claude Opus 4.5 (claude-opus-4-5-20251101)
+GPT-5 Codex
 
 ### File List
 | File | Action | Description |
 |------|--------|-------------|
 | `pages/about.php` | Modified | Implémentation complète de la page Me Découvrir |
+| `tests/about.test.php` | Created | Tests page about |
+| `tests/run.ps1` | Modified | Ajout tests about |
 
 ### Completion Notes
-- Section "Qui je suis" avec placeholder photo SVG (gradient + icône)
+- Section "Qui je suis" avec placeholder photo
 - Prénom personnalisé : "Célian"
 - Localisation générale : "Grand Est, France"
 - Timeline de 4 étapes pour le parcours
-- L'étape "Aujourd'hui" est mise en avant (badge plein)
 - Section "Pourquoi le développement" centrée avec emphases
 - CTA vers /projets et /contact
 - Ton authentique et sympathique
-- Note: Le placeholder peut être remplacé par une vraie photo dans `/assets/img/profile.webp`
+- Tests: `powershell -ExecutionPolicy Bypass -File tests/run.ps1`
 
 ### Debug Log References
 Aucun problème rencontré.
@@ -251,4 +252,4 @@ Aucun problème rencontré.
 | Date | Version | Description | Author |
 |------|---------|-------------|--------|
 | 2026-01-22 | 0.1 | Création initiale | Sarah (PO) |
-| 2026-01-23 | 1.0 | Implémentation complète | James (Dev) |
+| 2026-02-04 | 1.0 | Implémentation complète | Amelia |

pages/about.php

@@ -1,16 +1,149 @@
 <?php
+/**
+ * Page Me Découvrir
+ */
+
 $pageTitle = 'Me Découvrir';
+$pageDescription = 'Découvrez mon parcours, mes motivations et ce qui me passionne en tant que développeur web.';
 $currentPage = 'about';
 
-include_template('header', compact('pageTitle'));
+include_template('header', compact('pageTitle', 'pageDescription'));
 include_template('navbar', compact('currentPage'));
 ?>
 
-<main class="min-h-screen">
-    <div class="container-content py-20">
-        <h1 class="text-heading mb-4">Me Découvrir</h1>
-        <p class="text-text-secondary">Le parcours arrive bientôt.</p>
+<main>
+    <section class="section">
+        <div class="container-content">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                <div class="order-2 lg:order-1">
+                    <div class="aspect-square max-w-md mx-auto lg:mx-0 rounded-2xl overflow-hidden bg-surface">
+                        <img
+                            src="/assets/img/profile.webp"
+                            alt="Photo de profil"
+                            class="w-full h-full object-cover"
+                            loading="lazy"
+                        >
                     </div>
+                </div>
+
+                <div class="order-1 lg:order-2">
+                    <h1 class="text-display mb-6">
+                        Bonjour, je suis <span class="text-primary">Célian</span>
+                    </h1>
+
+                    <p class="text-xl text-text-secondary mb-6 leading-relaxed">
+                        Développeur web passionné basé dans le <strong>Grand Est, France</strong>.
+                        Je crée des expériences numériques qui allient performance,
+                        accessibilité et design soigné.
+                    </p>
+
+                    <p class="text-text-secondary leading-relaxed">
+                        Depuis plusieurs années, je transforme des idées en solutions web concrètes.
+                        Mon approche : comprendre les besoins, proposer des solutions pragmatiques,
+                        et livrer un travail dont je suis fier.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="section bg-surface">
+        <div class="container-content">
+            <h2 class="text-heading mb-12 text-center">Mon Parcours</h2>
+
+            <div class="max-w-3xl mx-auto">
+                <div class="space-y-8">
+                    <div class="flex gap-6">
+                        <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
+                            <span class="text-primary font-bold">1</span>
+                        </div>
+                        <div>
+                            <h3 class="text-lg font-semibold mb-2">Formation</h3>
+                            <p class="text-text-secondary">
+                                Formation web et autodidaxie, avec un focus sur les bases solides du frontend et du backend.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="flex gap-6">
+                        <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
+                            <span class="text-primary font-bold">2</span>
+                        </div>
+                        <div>
+                            <h3 class="text-lg font-semibold mb-2">Premières Expériences</h3>
+                            <p class="text-text-secondary">
+                                Projets personnels et missions concrètes, pour apprendre à livrer des interfaces propres et fiables.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="flex gap-6">
+                        <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
+                            <span class="text-primary font-bold">3</span>
+                        </div>
+                        <div>
+                            <h3 class="text-lg font-semibold mb-2">Aujourd'hui</h3>
+                            <p class="text-text-secondary">
+                                Développement d'expériences web modernes, avec une attention particulière aux détails, à la performance et à l'accessibilité.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="flex gap-6">
+                        <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
+                            <span class="text-primary font-bold">4</span>
+                        </div>
+                        <div>
+                            <h3 class="text-lg font-semibold mb-2">Demain</h3>
+                            <p class="text-text-secondary">
+                                Continuer à progresser sur des projets ambitieux et collaborer avec des équipes motivées.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="container-content">
+            <div class="max-w-3xl mx-auto text-center">
+                <h2 class="text-heading mb-8">Pourquoi le Développement Web ?</h2>
+
+                <div class="space-y-6 text-text-secondary text-lg leading-relaxed">
+                    <p>
+                        Ce qui me passionne dans le développement, c'est la possibilité de
+                        <strong class="text-text-primary">créer quelque chose à partir de rien</strong>.
+                        Une idée, du code, et soudain un site web existe et aide des gens.
+                    </p>
+
+                    <p>
+                        J'aime particulièrement le challenge de rendre les choses
+                        <strong class="text-text-primary">simples pour l'utilisateur</strong>,
+                        même quand elles sont complexes sous le capot.
+                    </p>
+
+                    <p>
+                        Mon objectif : livrer un travail dont je suis fier, avec des solutions
+                        qui durent dans le temps et qui sont agréables à utiliser.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="section bg-surface">
+        <div class="container-content text-center">
+            <h2 class="text-heading mb-4">Envie d'en savoir plus ?</h2>
+            <p class="text-text-secondary mb-8">
+                Découvrez mes réalisations ou contactez-moi directement.
+            </p>
+            <div class="flex flex-wrap justify-center gap-4">
+                <a href="/projets" class="btn-primary">Voir mes projets</a>
+                <a href="/contact" class="btn-secondary">Me contacter</a>
+            </div>
+        </div>
+    </section>
 </main>
 
 <?php include_template('footer'); ?>

tests/about.test.php

@@ -0,0 +1,19 @@
+<?php
+require_once __DIR__ . '/../includes/functions.php';
+
+function assertTrue($cond, $msg) {
+    if (!$cond) {
+        fwrite(STDERR, $msg . PHP_EOL);
+        exit(1);
+    }
+}
+
+$content = file_get_contents(__DIR__ . '/../pages/about.php');
+assertTrue(strpos($content, 'Bonjour, je suis') !== false, 'missing who section');
+assertTrue(strpos($content, 'Mon Parcours') !== false, 'missing parcours section');
+assertTrue(strpos($content, 'Pourquoi le Développement Web') !== false, 'missing why section');
+assertTrue(strpos($content, 'Grand Est, France') !== false, 'missing location');
+assertTrue(strpos($content, '/assets/img/profile.webp') !== false, 'missing profile image');
+assertTrue(strpos($content, 'Me contacter') !== false, 'missing CTA');
+
+fwrite(STDOUT, "OK\n");

tests/run.ps1

@@ -17,4 +17,5 @@ php (Join-Path $here 'projects-secondary.test.php')
 php (Join-Path $here 'images.test.php')
 php (Join-Path $here 'skills.test.php')
 php (Join-Path $here 'tools.test.php')
+php (Join-Path $here 'about.test.php')
 'OK'