Story 1.1: initialisation projet
This commit is contained in:
174
docs/stories/2.3.page-accueil-accroche.md
Normal file
174
docs/stories/2.3.page-accueil-accroche.md
Normal file
@@ -0,0 +1,174 @@
|
||||
# Story 2.3: Page d'Accueil avec Accroche
|
||||
|
||||
## Status
|
||||
|
||||
Ready for Dev
|
||||
|
||||
## Story
|
||||
|
||||
**As a** visiteur,
|
||||
**I want** voir une page d'accueil avec une accroche claire et engageante,
|
||||
**so that** je comprends immédiatement qui est le développeur et ce qu'il propose.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
1. La page d'accueil affiche une section "hero" avec : nom/prénom, titre (développeur web), et une phrase d'accroche
|
||||
2. Un bouton secondaire CTA invite à découvrir les projets
|
||||
3. Le design est aéré et la typographie met en valeur l'accroche
|
||||
4. La page inclut la navbar et le footer
|
||||
5. Le contenu est centré et responsive
|
||||
6. Les animations sont subtiles (fade-in au chargement)
|
||||
|
||||
## 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
|
||||
- [ ] 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)
|
||||
|
||||
- [] **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
|
||||
|
||||
- [] **Task 4 : Rendre responsive** (AC: 5)
|
||||
- [] Mobile : texte plus petit, padding réduit
|
||||
- [] 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)
|
||||
|
||||
## Dev Notes
|
||||
|
||||
### Structure pages/home.php
|
||||
|
||||
```php
|
||||
<?php
|
||||
/**
|
||||
* Page d'accueil
|
||||
*/
|
||||
|
||||
$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>
|
||||
<!-- Hero Section -->
|
||||
<section class="min-h-[calc(100vh-5rem)] flex items-center justify-center">
|
||||
<div class="container-content text-center py-20">
|
||||
<!-- Nom -->
|
||||
<p class="text-primary font-medium mb-4 animate-fade-in">
|
||||
Bonjour, je suis
|
||||
</p>
|
||||
|
||||
<!-- Titre principal -->
|
||||
<h1 class="text-display text-text-primary mb-6 animate-fade-in animation-delay-100">
|
||||
Prénom <span class="text-primary">NOM</span>
|
||||
</h1>
|
||||
|
||||
<!-- Sous-titre -->
|
||||
<p class="text-heading text-text-secondary mb-6 animate-fade-in animation-delay-200">
|
||||
Développeur Web Full-Stack
|
||||
</p>
|
||||
|
||||
<!-- Accroche -->
|
||||
<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>
|
||||
|
||||
<!-- CTA -->
|
||||
<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'); ?>
|
||||
```
|
||||
|
||||
### Mise à jour du Router (index.php)
|
||||
|
||||
```php
|
||||
$router
|
||||
->add('/', 'pages/home.php')
|
||||
// ... autres routes
|
||||
```
|
||||
|
||||
### Responsive
|
||||
|
||||
| Breakpoint | Adaptations |
|
||||
|------------|-------------|
|
||||
| Mobile | text-3xl pour H1, padding réduit |
|
||||
| Desktop | text-display (2.5rem), max-w-2xl pour l'accroche |
|
||||
|
||||
### Animations
|
||||
|
||||
Les classes sont déjà définies dans input.css :
|
||||
- `.animate-fade-in` : opacity 0 → 1
|
||||
- `.animate-fade-in-up` : opacity + translateY
|
||||
- `.animation-delay-100/200/300` : délais
|
||||
|
||||
## Testing
|
||||
|
||||
- [ ] Le nom et titre sont visibles et centrés
|
||||
- [ ] L'accroche est lisible et bien espacée
|
||||
- [ ] Les boutons CTA sont cliquables
|
||||
- [ ] Les animations se jouent au chargement
|
||||
- [ ] La page est responsive (mobile/desktop)
|
||||
- [ ] La navbar et le footer sont présents
|
||||
|
||||
## Change Log
|
||||
|
||||
| Date | Version | Description | Author |
|
||||
|------|---------|-------------|--------|
|
||||
| 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)
|
||||
|
||||
### Debug Log References
|
||||
|
||||
_Aucun_
|
||||
|
||||
### 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
|
||||
- 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()
|
||||
|
||||
### File List
|
||||
|
||||
| Fichier | Action |
|
||||
|---------|--------|
|
||||
| `index.php` | Modifié (Hero section) |
|
||||
| `assets/css/output.css` | Regénéré |
|
||||
|
||||
## QA Results
|
||||
|
||||
_À compléter par le QA agent_
|
||||
Reference in New Issue
Block a user