✨ Story 4.3: page a-propos
This commit is contained in:
145
pages/about.php
145
pages/about.php
@@ -1,16 +1,149 @@
|
||||
<?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'));
|
||||
include_template('header', compact('pageTitle', 'pageDescription'));
|
||||
include_template('navbar', compact('currentPage'));
|
||||
?>
|
||||
|
||||
<main class="min-h-screen">
|
||||
<div class="container-content py-20">
|
||||
<h1 class="text-heading mb-4">Me Découvrir</h1>
|
||||
<p class="text-text-secondary">Le parcours arrive bientôt.</p>
|
||||
</div>
|
||||
<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'); ?>
|
||||
Reference in New Issue
Block a user