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>
58 lines
2.3 KiB
PHP
58 lines
2.3 KiB
PHP
<?php
|
|
/**
|
|
* Carte projet compacte (projets secondaires)
|
|
* @param array $project Données du projet
|
|
*/
|
|
|
|
$title = $project['title'] ?? 'Sans titre';
|
|
$context = $project['context'] ?? '';
|
|
$url = $project['url'] ?? null;
|
|
$technologies = $project['technologies'] ?? [];
|
|
$maxTechs = 3;
|
|
|
|
// Tronquer la description à ~100 caractères
|
|
$shortContext = strlen($context) > 100
|
|
? substr($context, 0, 100) . '...'
|
|
: $context;
|
|
?>
|
|
|
|
<article class="card hover:border-primary/30 transition-colors">
|
|
<div class="card-body flex flex-col sm:flex-row sm:items-center gap-4">
|
|
<!-- Titre et description -->
|
|
<div class="flex-grow min-w-0">
|
|
<?php if ($url): ?>
|
|
<a href="<?= htmlspecialchars($url, ENT_QUOTES, 'UTF-8') ?>"
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="text-lg font-semibold text-text-primary hover:text-primary transition-colors inline-flex items-center gap-2">
|
|
<?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?>
|
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
|
</svg>
|
|
</a>
|
|
<?php else: ?>
|
|
<h3 class="text-lg font-semibold text-text-primary">
|
|
<?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?>
|
|
</h3>
|
|
<?php endif; ?>
|
|
|
|
<?php if ($shortContext): ?>
|
|
<p class="text-text-secondary text-sm mt-1 truncate">
|
|
<?= htmlspecialchars($shortContext, ENT_QUOTES, 'UTF-8') ?>
|
|
</p>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<!-- Technologies -->
|
|
<div class="flex flex-wrap gap-2 sm:flex-shrink-0">
|
|
<?php foreach (array_slice($technologies, 0, $maxTechs) as $tech): ?>
|
|
<span class="badge text-xs"><?= htmlspecialchars($tech, ENT_QUOTES, 'UTF-8') ?></span>
|
|
<?php endforeach; ?>
|
|
|
|
<?php if (count($technologies) > $maxTechs): ?>
|
|
<span class="badge badge-muted text-xs">+<?= count($technologies) - $maxTechs ?></span>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</article>
|