skycel/Portfolio-Codex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e3f062249bf217810bf898da937496983456a3f1
Portfolio-Codex/docs/stories/4.3.page-decouvrir-parcours.md

9.5 KiB
Raw Blame History

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
/**
 * 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)