skycel
2c2b893558
Story 3.2 - Router PHP et URLs propres:
- Router PHP léger (43 lignes) avec support {slug}
- Front controller index.php
- .htaccess pour Apache
- Pages: home, projects, project-single, skills, about, contact, 404
Story 3.3 - Page liste projets vedettes:
- Grille responsive (1→2→3 colonnes)
- Template project-card.php réutilisable
- Badges technologies (max 4 + compteur)
- Lazy loading images avec fallback SVG
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
112 lines
5.6 KiB
PHP
112 lines
5.6 KiB
PHP
<?php
|
|
/**
|
|
* Page d'accueil
|
|
*/
|
|
|
|
$pageTitle = 'Accueil';
|
|
$pageDescription = 'Portfolio de développeur web full-stack. Découvrez mes projets, compétences et parcours.';
|
|
$currentPage = 'home';
|
|
|
|
include_template('header', compact('pageTitle', 'pageDescription'));
|
|
include_template('navbar', compact('currentPage'));
|
|
?>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="min-h-[calc(100vh-5rem)] flex items-center justify-center">
|
|
<div class="container-content text-center py-20">
|
|
<!-- Intro -->
|
|
<p class="text-primary font-medium mb-4 animate-fade-in">
|
|
Bonjour, je suis
|
|
</p>
|
|
|
|
<!-- Nom -->
|
|
<h1 class="text-4xl sm:text-5xl lg:text-display font-bold text-text-primary mb-6 animate-fade-in animation-delay-100">
|
|
Prénom <span class="text-primary">NOM</span>
|
|
</h1>
|
|
|
|
<!-- Titre -->
|
|
<p class="text-xl sm:text-2xl lg:text-heading text-text-secondary mb-6 animate-fade-in animation-delay-200">
|
|
Développeur Web Full-Stack
|
|
</p>
|
|
|
|
<!-- Accroche -->
|
|
<p class="text-lg text-text-secondary max-w-2xl mx-auto mb-10 animate-fade-in animation-delay-300">
|
|
Je crée des expériences web modernes, performantes et accessibles.
|
|
<br class="hidden sm:block">Chaque projet est une opportunité de montrer plutôt que de dire.
|
|
</p>
|
|
|
|
<!-- CTA -->
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in animation-delay-300">
|
|
<a href="/projets" class="btn-primary">
|
|
Découvrir mes projets
|
|
</a>
|
|
<a href="/a-propos" class="btn-secondary">
|
|
En savoir plus
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section Navigation Rapide -->
|
|
<section class="section bg-surface">
|
|
<div class="container-content">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Explorez mon portfolio</h2>
|
|
<p class="section-subtitle">
|
|
Découvrez mes réalisations, compétences et parcours
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
|
|
<!-- Carte Projets -->
|
|
<a href="/projets" class="card-interactive group">
|
|
<div class="card-body text-center">
|
|
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
|
|
<svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-subheading mb-2 group-hover:text-primary transition-colors">Projets</h3>
|
|
<p class="text-text-secondary">
|
|
Découvrez mes réalisations web avec démonstrations et explications techniques.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Carte Compétences -->
|
|
<a href="/competences" class="card-interactive group">
|
|
<div class="card-body text-center">
|
|
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
|
|
<svg class="w-8 h-8 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>
|
|
<h3 class="text-subheading mb-2 group-hover:text-primary transition-colors">Compétences</h3>
|
|
<p class="text-text-secondary">
|
|
Technologies maîtrisées et outils utilisés, avec preuves à l'appui.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Carte Me Découvrir -->
|
|
<a href="/a-propos" class="card-interactive group">
|
|
<div class="card-body text-center">
|
|
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
|
|
<svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
|
<h3 class="text-subheading mb-2 group-hover:text-primary transition-colors">Me Découvrir</h3>
|
|
<p class="text-text-secondary">
|
|
Mon parcours, mes motivations et ce qui me passionne au-delà du code.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<?php include_template('footer'); ?>
|