Portfolio-Codex/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 class="section">
        <div class="container-content">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <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>

                <div class="order-1 lg:order-2">
                    <h1 class="text-display mb-6">
                        Bonjour, je suis <span class="text-primary">Célian</span>
                    </h1>

                    <p class="text-xl text-text-secondary mb-6 leading-relaxed">
                        Développeur web passionné basé dans le <strong>Grand Est, 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 plusieurs années, 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>

    <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">
                <div class="space-y-8">
                    <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">
                                Formation web et autodidaxie, avec un focus sur les bases solides du frontend et du backend.
                            </p>
                        </div>
                    </div>

                    <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">
                                Projets personnels et missions concrètes, pour apprendre à livrer des interfaces propres et fiables.
                            </p>
                        </div>
                    </div>

                    <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">
                                Développement d'expériences web modernes, avec une attention particulière aux détails, à la performance et à l'accessibilité.
                            </p>
                        </div>
                    </div>

                    <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">4</span>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold mb-2">Demain</h3>
                            <p class="text-text-secondary">
                                Continuer à progresser sur des projets ambitieux et collaborer avec des équipes motivées.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

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

    <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'); ?>