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