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>
48 lines
1.8 KiB
PHP
48 lines
1.8 KiB
PHP
<?php
|
|
/**
|
|
* Carte projet réutilisable
|
|
* @param array $project Données du projet
|
|
*/
|
|
|
|
$title = $project['title'] ?? 'Sans titre';
|
|
$slug = $project['slug'] ?? '#';
|
|
$thumbnail = $project['thumbnail'] ?? 'default-project.webp';
|
|
$technologies = $project['technologies'] ?? [];
|
|
$maxTechs = 4;
|
|
?>
|
|
|
|
<article class="card-interactive group">
|
|
<a href="/projet/<?= htmlspecialchars($slug, ENT_QUOTES, 'UTF-8') ?>" class="block">
|
|
<!-- Thumbnail -->
|
|
<div class="aspect-video overflow-hidden rounded-t-lg bg-surface-alt">
|
|
<img
|
|
src="/assets/img/projects/<?= htmlspecialchars($thumbnail, ENT_QUOTES, 'UTF-8') ?>"
|
|
alt="Aperçu du projet <?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?>"
|
|
width="400"
|
|
height="225"
|
|
loading="lazy"
|
|
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
onerror="this.src='/assets/img/projects/default-project.webp'; this.onerror=null;"
|
|
>
|
|
</div>
|
|
|
|
<!-- Contenu -->
|
|
<div class="card-body">
|
|
<h3 class="text-lg font-semibold text-text-primary mb-3 group-hover:text-primary transition-colors">
|
|
<?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?>
|
|
</h3>
|
|
|
|
<!-- Technologies (badges) -->
|
|
<div class="flex flex-wrap gap-2">
|
|
<?php foreach (array_slice($technologies, 0, $maxTechs) as $tech): ?>
|
|
<span class="badge"><?= htmlspecialchars($tech, ENT_QUOTES, 'UTF-8') ?></span>
|
|
<?php endforeach; ?>
|
|
|
|
<?php if (count($technologies) > $maxTechs): ?>
|
|
<span class="badge badge-muted">+<?= count($technologies) - $maxTechs ?></span>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</article>
|