255 lines
9.5 KiB
Markdown
255 lines
9.5 KiB
Markdown
# 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) |
|