# Story 4.3: Page Me Découvrir - Parcours et Motivations

## Status

Ready for Dev

## Story

**As a** visiteur,
**I want** en savoir plus sur le développeur en tant que personne,
**so that** je crée une connexion humaine et évalue la compatibilité.

## Acceptance Criteria

1. `/a-propos` affiche les sections : Qui je suis, Mon parcours, Pourquoi ce métier
2. Le ton est sympathique et authentique (pas trop formel, pas trop familier)
3. Le texte est aéré avec des paragraphes courts
4. Une photo professionnelle ou illustration est présente (optionnel mais recommandé)
5. La localisation est mentionnée de façon générale (grande ville, pas adresse précise)

## 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)

- [] **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)

- [] **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

- [] **Task 4 : Créer la section "Pourquoi ce métier"** (AC: 2)
  - [] Motivations personnelles
  - [] Ce qui passionne dans le développement
  - [] Vision et valeurs

## Dev Notes

### Page pages/about.php

```php
<?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', 'pageDescription'));
include_template('navbar', compact('currentPage'));
?>

<main>
    <!-- Section Hero / Qui je suis -->
    <section class="section">
        <div class="container-content">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <!-- Photo -->
                <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>

                <!-- Texte -->
                <div class="order-1 lg:order-2">
                    <h1 class="text-display mb-6">
                        Bonjour, je suis <span class="text-primary">Prénom</span>
                    </h1>

                    <p class="text-xl text-text-secondary mb-6 leading-relaxed">
                        Développeur web passionné basé à <strong>Ville, 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 X ans, 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>

    <!-- Mon Parcours -->
    <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">
                <!-- Timeline -->
                <div class="space-y-8">
                    <!-- Étape 1 -->
                    <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">
                                [Votre formation - école, diplôme, année]
                            </p>
                        </div>
                    </div>

                    <!-- Étape 2 -->
                    <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">
                                [Stages, premiers emplois, projets personnels]
                            </p>
                        </div>
                    </div>

                    <!-- Étape 3 -->
                    <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">
                                [Situation actuelle, spécialisation, objectifs]
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Pourquoi ce métier -->
    <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>

    <!-- CTA -->
    <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'); ?>
```

### Ton Rédactionnel

| À faire | À éviter |
|---------|----------|
| Phrases courtes et directes | Jargon technique excessif |
| Ton conversationnel | Ton trop corporate |
| Anecdotes personnelles | Informations trop personnelles |
| Montrer la passion | Arrogance ou fausse modestie |

### Contenu à Personnaliser

- [ ] Photo de profil professionnelle
- [ ] Ville (pas d'adresse précise)
- [ ] Années d'expérience
- [ ] Formation et diplômes
- [ ] Étapes clés du parcours
- [ ] Motivations personnelles

## Testing

- [] La page `/a-propos` s'affiche correctement
- [] Les 3 sections sont présentes (Qui je suis, Parcours, Pourquoi)
- [] Le ton est approprié (sympathique, authentique)
- [] Les paragraphes sont courts et aérés
- [] Le placeholder photo s'affiche correctement
- [] Les CTA en bas de page fonctionnent
- [] La page est responsive

## Dev Agent Record

### Agent Model Used
Claude Opus 4.5 (claude-opus-4-5-20251101)

### File List
| File | Action | Description |
|------|--------|-------------|
| `pages/about.php` | Modified | Implémentation complète de la page Me Découvrir |

### Completion Notes
- Section "Qui je suis" avec placeholder photo SVG (gradient + icône)
- 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`

### Debug Log References
Aucun problème rencontré.

## Change Log

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