234 lines
11 KiB
PHP
234 lines
11 KiB
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">
|
|
<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">
|
|
<div class="card group">
|
|
<div class="aspect-video overflow-hidden bg-gradient-to-br from-purple-500/20 to-pink-500/10 flex items-center justify-center">
|
|
<svg class="w-16 h-16 text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-2v13"/>
|
|
<circle cx="6" cy="18" r="3"/>
|
|
<circle cx="18" cy="16" r="3"/>
|
|
</svg>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="text-lg font-semibold mb-2">Musique</h3>
|
|
<p class="text-text-secondary text-sm">
|
|
Pratique régulière qui cultive la rigueur et l'écoute, des qualités utiles pour le travail d'équipe.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card group">
|
|
<div class="aspect-video overflow-hidden bg-gradient-to-br from-emerald-500/20 to-cyan-500/10 flex items-center justify-center">
|
|
<svg class="w-16 h-16 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h8a4 4 0 014 4v2a4 4 0 01-4 4H8a4 4 0 01-4-4v-2a4 4 0 014-4z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11h2M15 11h2"/>
|
|
</svg>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3 class="text-lg font-semibold mb-2">Jeux vidéo</h3>
|
|
<p class="text-text-secondary text-sm">
|
|
Passion qui nourrit la curiosité, l'optimisation et la recherche d'expériences fluides.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<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/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>
|
|
|
|
<?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]); ?>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<?php endif; ?>
|
|
|
|
<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'); ?>
|