188 lines
7.2 KiB
Markdown
188 lines
7.2 KiB
Markdown
# Story 4.4: Page Me Découvrir - Passions et Hobbies
|
|
|
|
## Status
|
|
|
|
Ready for Dev
|
|
|
|
## Story
|
|
|
|
**As a** visiteur,
|
|
**I want** découvrir les passions du développeur en dehors du code,
|
|
**so that** je vois la personne au-delà du professionnel.
|
|
|
|
## Acceptance Criteria
|
|
|
|
1. Une section "En dehors du code" présente les hobbies et passions
|
|
2. Des preuves visuelles sont incluses si possible (photos d'événements, créations, etc.)
|
|
3. Le contenu reste professionnel (pas d'informations trop personnelles)
|
|
4. Les projets personnels sont mentionnés comme preuve de passion implicite
|
|
5. Le design intègre harmonieusement texte et visuels
|
|
|
|
## Tasks / Subtasks
|
|
|
|
- [] **Task 1 : Ajouter la section dans about.php** (AC: 1)
|
|
- [] Titre "En dehors du code" ou "Mes passions"
|
|
- [] Sous-titre engageant
|
|
|
|
- [] **Task 2 : Lister les hobbies** (AC: 1, 3)
|
|
- [] 3-4 passions maximum (3 passions)
|
|
- [] Description courte pour chaque
|
|
- [] Garder un ton professionnel
|
|
|
|
- [] **Task 3 : Ajouter des visuels** (AC: 2, 5)
|
|
- [] Placeholders SVG avec gradients pour chaque passion
|
|
- [] Grille responsive (1→2→3 colonnes)
|
|
- [] Effet hover sur les cartes
|
|
|
|
- [] **Task 4 : Mentionner les projets personnels** (AC: 4)
|
|
- [] Lien vers GitHub (https://github.com/skycel)
|
|
- [] Carte dédiée aux projets open source
|
|
|
|
## Dev Notes
|
|
|
|
### Section à ajouter dans pages/about.php
|
|
|
|
```php
|
|
<!-- En dehors du code -->
|
|
<section class="section">
|
|
<div class="container-content">
|
|
<div class="section-header">
|
|
<h2 class="section-title">En Dehors du Code</h2>
|
|
<p class="section-subtitle">
|
|
Parce qu'un développeur a aussi une vie en dehors de l'écran.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<!-- Passion 1 -->
|
|
<div class="card group">
|
|
<div class="aspect-video overflow-hidden">
|
|
<img
|
|
src="/assets/img/hobbies/passion-1.webp"
|
|
alt="[Description de la passion]"
|
|
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
loading="lazy"
|
|
>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="text-lg font-semibold mb-2">[Passion 1]</h3>
|
|
<p class="text-text-secondary text-sm">
|
|
[Description courte de cette passion et pourquoi elle compte pour vous]
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Passion 2 -->
|
|
<div class="card group">
|
|
<div class="aspect-video overflow-hidden">
|
|
<img
|
|
src="/assets/img/hobbies/passion-2.webp"
|
|
alt="[Description de la passion]"
|
|
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
loading="lazy"
|
|
>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="text-lg font-semibold mb-2">[Passion 2]</h3>
|
|
<p class="text-text-secondary text-sm">
|
|
[Description courte]
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Passion 3 / Projets personnels -->
|
|
<div class="card group">
|
|
<div class="aspect-video overflow-hidden bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center">
|
|
<svg class="w-16 h-16 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
|
|
</svg>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="text-lg font-semibold mb-2">Projets Open Source</h3>
|
|
<p class="text-text-secondary text-sm mb-3">
|
|
Je contribue à des projets open source et développe mes propres outils sur mon temps libre.
|
|
</p>
|
|
<a href="https://github.com/votre-username" target="_blank" rel="noopener" class="text-primary text-sm hover:underline inline-flex items-center gap-1">
|
|
Voir sur GitHub
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
```
|
|
|
|
### Exemples de Passions Appropriées
|
|
|
|
| Passion | Pourquoi c'est bien | Ce qu'il faut éviter |
|
|
|---------|---------------------|----------------------|
|
|
| Sport (course, escalade) | Montre discipline et dépassement | Détails trop personnels |
|
|
| Musique/instrument | Créativité, pratique régulière | Photos de soirées |
|
|
| Voyages | Ouverture d'esprit, curiosité | Lieux trop identifiables |
|
|
| Lecture/apprentissage | Curiosité intellectuelle | Opinions politiques |
|
|
| Projets DIY/maker | Créativité technique | - |
|
|
| Photographie | Sens esthétique | Photos personnelles |
|
|
|
|
### Images des Hobbies
|
|
|
|
```
|
|
assets/img/hobbies/
|
|
├── passion-1.webp # 400x225 (16:9)
|
|
├── passion-2.webp
|
|
├── passion-3.webp
|
|
└── open-source.webp # Ou utiliser une icône
|
|
```
|
|
|
|
### Équilibre Pro/Perso
|
|
|
|
Le contenu doit :
|
|
- ✅ Humaniser le développeur
|
|
- ✅ Montrer des qualités transférables (discipline, créativité)
|
|
- ✅ Rester professionnel
|
|
- ❌ Ne pas inclure de vie privée
|
|
- ❌ Ne pas inclure d'opinions controversées
|
|
- ❌ Ne pas en dire trop (3-4 passions max)
|
|
|
|
## Testing
|
|
|
|
- [] La section "En dehors du code" est présente
|
|
- [] 3 passions sont affichées avec visuels (placeholders SVG)
|
|
- [] Le contenu reste professionnel
|
|
- [] Les placeholders sont légers (pas de lazy loading nécessaire)
|
|
- [] Le lien GitHub fonctionne (target="_blank", rel="noopener")
|
|
- [] La section est responsive (1→2→3 colonnes)
|
|
|
|
## Dev Agent Record
|
|
|
|
### Agent Model Used
|
|
Claude Opus 4.5 (claude-opus-4-5-20251101)
|
|
|
|
### File List
|
|
| File | Action | Description |
|
|
|------|--------|-------------|
|
|
| `pages/about.php` | Modified | Ajout section "En dehors du code" |
|
|
|
|
### Completion Notes
|
|
- 3 cartes passion avec placeholders SVG et gradients colorés
|
|
- Passion 1 : Musique (icône note, gradient purple/pink)
|
|
- Passion 2 : Jeux vidéo (icône ticket, gradient green/cyan)
|
|
- Passion 3 : Projets Open Source (icône code, gradient primary)
|
|
- Lien GitHub vers https://github.com/skycel
|
|
- Chaque carte a un effet hover sur le groupe
|
|
- Design cohérent avec les cartes du reste du site
|
|
- Ton professionnel : chaque passion est reliée à des compétences transférables
|
|
- Note: Les placeholders peuvent être remplacés par des vraies photos dans `/assets/img/hobbies/`
|
|
|
|
### 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) |
|