Story 1.1: initialisation projet
This commit is contained in:
254
docs/stories/4.3.page-decouvrir-parcours.md
Normal file
254
docs/stories/4.3.page-decouvrir-parcours.md
Normal file
@@ -0,0 +1,254 @@
|
||||
# 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) |
|
||||
Reference in New Issue
Block a user