skycel
1711f8f723
Story 3.4 - Page projet individuelle: - Breadcrumb, header avec badges technologies - Boutons "Voir en ligne" / "GitHub" - Sections: Contexte, Solution, Travail d'équipe - Galerie screenshots, sidebar durée - Navigation retour + CTA contact Story 3.5 - Projets secondaires: - Section "Autres projets" sur /projets - Template project-card-compact.php - Format liste avec lien externe direct Story 3.6 - Optimisation images: - Fonction projectImage() avec <picture> WebP + fallback JPG - Dimensions explicites (400x225, 800x450, 1200x675) - Lazy loading configurable Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
47 lines
1.6 KiB
PHP
47 lines
1.6 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">
|
|
<?= projectImage(
|
|
$thumbnail,
|
|
"Aperçu du projet " . $title,
|
|
400,
|
|
225,
|
|
true,
|
|
"w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
) ?>
|
|
</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>
|