Portfolio-Skycel/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 = 'a-propos';

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-alt">
                        <!-- Placeholder si pas de photo -->
                        <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-primary/20 to-primary/5">
                            <svg class="w-32 h-32 text-primary/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Texte -->
                <div class="order-1 lg:order-2">
                    <h1 class="text-3xl lg:text-display font-bold text-text-primary 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 class="text-text-primary">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">
                        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">
            <div class="section-header">
                <h2 class="section-title">Mon Parcours</h2>
            </div>

            <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 text-text-primary mb-2">Découverte du code</h3>
                            <p class="text-text-secondary leading-relaxed">
                                Mes premiers pas dans le développement, par curiosité et passion pour la technologie.
                                J'ai commencé par des projets personnels, apprenant HTML, CSS et JavaScript.
                            </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 text-text-primary mb-2">Formation et spécialisation</h3>
                            <p class="text-text-secondary leading-relaxed">
                                Approfondissement des compétences à travers une formation dédiée.
                                Découverte du backend avec PHP, des bases de données et des bonnes pratiques de développement.
                            </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 text-text-primary mb-2">Projets concrets</h3>
                            <p class="text-text-secondary leading-relaxed">
                                Réalisation de projets pour des clients et des projets personnels.
                                Chaque projet est une opportunité d'apprendre et de s'améliorer.
                            </p>
                        </div>
                    </div>

                    <!-- Étape 4 -->
                    <div class="flex gap-6">
                        <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary flex items-center justify-center">
                            <span class="text-white font-bold">4</span>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-text-primary mb-2">Aujourd'hui</h3>
                            <p class="text-text-secondary leading-relaxed">
                                Je continue à me former et à explorer de nouvelles technologies.
                                Mon objectif : créer des sites web performants, accessibles et agréables à utiliser.
                            </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-2xl lg:text-heading font-bold text-text-primary 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>

    <!-- En dehors du code -->
    <section class="section bg-surface">
        <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 : Musique -->
                <div class="card group overflow-hidden">
                    <div class="aspect-video overflow-hidden bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center">
                        <svg class="w-16 h-16 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
                        </svg>
                    </div>
                    <div class="card-body">
                        <h3 class="text-lg font-semibold text-text-primary mb-2">Musique</h3>
                        <p class="text-text-secondary text-sm">
                            Passionné par la création musicale et la MAO.
                            La musique développe la créativité et la rigueur, des qualités que j'applique aussi dans le code.
                        </p>
                    </div>
                </div>

                <!-- Passion 2 : Gaming -->
                <div class="card group overflow-hidden">
                    <div class="aspect-video overflow-hidden bg-gradient-to-br from-green-500/20 to-cyan-500/20 flex items-center justify-center">
                        <svg class="w-16 h-16 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/>
                        </svg>
                    </div>
                    <div class="card-body">
                        <h3 class="text-lg font-semibold text-text-primary mb-2">Jeux vidéo</h3>
                        <p class="text-text-secondary text-sm">
                            Le gaming a éveillé ma curiosité pour l'informatique.
                            Aujourd'hui, c'est aussi une source d'inspiration pour l'UX et le game design.
                        </p>
                    </div>
                </div>

                <!-- Passion 3 : Projets Open Source -->
                <div class="card group overflow-hidden">
                    <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="1.5" 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 text-text-primary mb-2">Projets Open Source</h3>
                        <p class="text-text-secondary text-sm mb-3">
                            Je développe des projets personnels et explore de nouvelles technologies sur mon temps libre.
                        </p>
                        <a href="https://github.com/skycel" 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>

    <!-- Témoignages -->
    <?php $testimonials = getTestimonials(); ?>
    <?php if (!empty($testimonials)): ?>
        <section class="section">
            <div class="container-content">
                <div class="section-header">
                    <h2 class="section-title">Ce Qu'ils Disent</h2>
                    <p class="section-subtitle">
                        Retours de clients et collaborateurs.
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <?php foreach ($testimonials as $testimonial): ?>
                        <?php include_template('testimonial', ['testimonial' => $testimonial, 'showProjectLink' => true]); ?>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>
    <?php endif; ?>

    <!-- CTA -->
    <section class="section bg-surface">
        <div class="container-content text-center">
            <h2 class="text-2xl lg:text-heading font-bold text-text-primary 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'); ?>