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

Une section "En dehors du code" présente les hobbies et passions
Des preuves visuelles sont incluses si possible (photos d'événements, créations, etc.)
Le contenu reste professionnel (pas d'informations trop personnelles)
Les projets personnels sont mentionnés comme preuve de passion implicite
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

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

7.2 KiB Raw Blame History