🚀 Feature: Router PHP + Pages projets (Stories 3.2 & 3.3)
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>
This commit is contained in:
116
index.php
116
index.php
@@ -1,113 +1,19 @@
|
||||
<?php
|
||||
/**
|
||||
* Page d'accueil
|
||||
* Front Controller - Point d'entrée unique
|
||||
*/
|
||||
|
||||
require_once __DIR__ . '/includes/functions.php';
|
||||
require_once __DIR__ . '/includes/router.php';
|
||||
|
||||
$pageTitle = 'Accueil';
|
||||
$pageDescription = 'Portfolio de développeur web full-stack. Découvrez mes projets, compétences et parcours.';
|
||||
$currentPage = 'home';
|
||||
$router = new Router();
|
||||
|
||||
include_template('header', compact('pageTitle', 'pageDescription'));
|
||||
include_template('navbar', compact('currentPage'));
|
||||
?>
|
||||
$router
|
||||
->add('/', 'pages/home.php')
|
||||
->add('/projets', 'pages/projects.php')
|
||||
->add('/projet/{slug}', 'pages/project-single.php')
|
||||
->add('/competences', 'pages/skills.php')
|
||||
->add('/a-propos', 'pages/about.php')
|
||||
->add('/contact', 'pages/contact.php');
|
||||
|
||||
<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'); ?>
|
||||
$router->dispatch();
|
||||
|
||||
Reference in New Issue
Block a user