50 lines
2.0 KiB
PHP
50 lines
2.0 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.svg';
|
|
$technologies = $project['technologies'] ?? [];
|
|
$maxTechs = 4;
|
|
?>
|
|
|
|
<article class="card-interactive group">
|
|
<a href="/projet/<?= htmlspecialchars($slug, ENT_QUOTES, 'UTF-8') ?>" class="block">
|
|
<div class="aspect-thumbnail overflow-hidden">
|
|
<picture>
|
|
<source
|
|
srcset="/assets/img/projects/<?= htmlspecialchars($thumbnail, ENT_QUOTES, 'UTF-8') ?>"
|
|
type="image/webp"
|
|
>
|
|
<img
|
|
src="/assets/img/projects/<?= htmlspecialchars(str_replace('.webp', '.jpg', $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.onerror=null;this.src='/assets/img/projects/default-project.svg';"
|
|
>
|
|
</picture>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<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>
|