13 KiB
13 KiB
Story 3.4: Page Projet Individuelle
Status
Ready for Dev
Story
As a visiteur, I want consulter une page dédiée pour chaque projet vedette, so that je comprends le contexte, la solution technique et vois le résultat.
Acceptance Criteria
- L'URL
/projet/{slug}affiche le projet correspondant au slug - Le slug est récupéré depuis le router (pas depuis $_GET)
- La page affiche les sections : Contexte, Solution technique, Travail d'équipe (si applicable), Durée, Témoignage (si disponible)
- Un bouton/lien permet de visiter le projet en ligne (ou affiche "Non disponible")
- Les technologies sont affichées sous forme de badges
- Des captures d'écran sont affichées si disponibles (galerie simple)
- Un lien "Retour aux projets" permet de revenir à la liste
- Si le slug n'existe pas, la page 404 est affichée
Tasks / Subtasks
-
[] Task 1 : Créer la page project-single.php (AC: 1, 2, 8)
- [] Créer
pages/project-single.php - [] Récupérer le slug depuis
$GLOBALS['routeParams'] - [] Charger le projet avec
getProjectBySlug() - [] Rediriger vers 404 si projet non trouvé
- [] Créer
-
[] Task 2 : Afficher les informations principales (AC: 3, 5)
- [] Titre du projet
- [] Badges technologies
- [] Section Contexte
- [] Section Solution technique
- [] Section Travail d'équipe (si non null)
- [] Durée du projet
-
[] Task 3 : Ajouter le lien vers le projet (AC: 4)
- [] Bouton "Voir le projet en ligne" si URL disponible
- [] Bouton "Voir sur GitHub" si URL GitHub disponible
- [] Message "Projet non disponible en ligne" si aucun lien
-
[] Task 4 : Afficher la galerie de captures (AC: 6)
- [] Grille de screenshots
- [] Lazy loading sur les images
- Lightbox optionnel (amélioration future)
-
[] Task 5 : Ajouter le témoignage (AC: 3)
- [] Placeholder préparé pour Story 4.5
- Récupérer le témoignage lié au projet (Story 4.5)
-
[] Task 6 : Ajouter la navigation (AC: 7)
- [] Breadcrumb en haut de page
- [] Lien "Retour aux projets"
- [] CTA "Me contacter" en bas
Dev Notes
Page pages/project-single.php
<?php
/**
* Page projet individuelle
*/
// Récupérer le slug depuis le router
$slug = $GLOBALS['routeParams'][0] ?? null;
if (!$slug) {
http_response_code(404);
include __DIR__ . '/404.php';
exit;
}
$project = getProjectBySlug($slug);
if (!$project) {
http_response_code(404);
include __DIR__ . '/404.php';
exit;
}
// Récupérer le témoignage lié (si existe)
$testimonial = getTestimonialByProject($slug);
$pageTitle = $project['title'];
$pageDescription = $project['context'] ?? "Découvrez le projet {$project['title']}";
$currentPage = 'projects';
include_template('header', compact('pageTitle', 'pageDescription'));
include_template('navbar', compact('currentPage'));
?>
<main>
<article class="section">
<div class="container-content">
<!-- Breadcrumb -->
<nav class="breadcrumb mb-8">
<a href="/" class="breadcrumb-link">Accueil</a>
<span class="text-text-muted">/</span>
<a href="/projets" class="breadcrumb-link">Projets</a>
<span class="text-text-muted">/</span>
<span class="breadcrumb-current"><?= htmlspecialchars($project['title']) ?></span>
</nav>
<!-- Header du projet -->
<header class="mb-12">
<h1 class="text-display mb-4"><?= htmlspecialchars($project['title']) ?></h1>
<!-- Technologies -->
<div class="flex flex-wrap gap-2 mb-6">
<?php foreach ($project['technologies'] ?? [] as $tech): ?>
<span class="badge badge-primary"><?= htmlspecialchars($tech) ?></span>
<?php endforeach; ?>
</div>
<!-- Boutons d'action -->
<div class="flex flex-wrap gap-4">
<?php if (!empty($project['url'])): ?>
<a href="<?= htmlspecialchars($project['url']) ?>" target="_blank" rel="noopener" class="btn-primary">
Voir le projet en ligne
<svg class="w-4 h-4" 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 endif; ?>
<?php if (!empty($project['github'])): ?>
<a href="<?= htmlspecialchars($project['github']) ?>" target="_blank" rel="noopener" class="btn-secondary">
Voir sur GitHub
</a>
<?php endif; ?>
<?php if (empty($project['url']) && empty($project['github'])): ?>
<span class="text-text-muted italic">Projet non disponible en ligne</span>
<?php endif; ?>
</div>
</header>
<!-- Image principale -->
<?php if (!empty($project['thumbnail'])): ?>
<div class="mb-12 rounded-lg overflow-hidden">
<img
src="/assets/img/projects/<?= htmlspecialchars($project['thumbnail']) ?>"
alt="<?= htmlspecialchars($project['title']) ?>"
class="w-full"
loading="lazy"
>
</div>
<?php endif; ?>
<!-- Contenu -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
<!-- Colonne principale -->
<div class="lg:col-span-2 space-y-10">
<!-- Contexte -->
<?php if (!empty($project['context'])): ?>
<section>
<h2 class="text-heading mb-4">Contexte</h2>
<p class="text-text-secondary leading-relaxed">
<?= nl2br(htmlspecialchars($project['context'])) ?>
</p>
</section>
<?php endif; ?>
<!-- Solution technique -->
<?php if (!empty($project['solution'])): ?>
<section>
<h2 class="text-heading mb-4">Solution Technique</h2>
<p class="text-text-secondary leading-relaxed">
<?= nl2br(htmlspecialchars($project['solution'])) ?>
</p>
</section>
<?php endif; ?>
<!-- Travail d'équipe -->
<?php if (!empty($project['teamwork'])): ?>
<section>
<h2 class="text-heading mb-4">Travail d'Équipe</h2>
<p class="text-text-secondary leading-relaxed">
<?= nl2br(htmlspecialchars($project['teamwork'])) ?>
</p>
</section>
<?php endif; ?>
<!-- Galerie -->
<?php if (!empty($project['screenshots'])): ?>
<section>
<h2 class="text-heading mb-4">Captures d'écran</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<?php foreach ($project['screenshots'] as $screenshot): ?>
<img
src="/assets/img/projects/<?= htmlspecialchars($screenshot) ?>"
alt="Capture d'écran - <?= htmlspecialchars($project['title']) ?>"
class="rounded-lg"
loading="lazy"
>
<?php endforeach; ?>
</div>
</section>
<?php endif; ?>
</div>
<!-- Sidebar -->
<aside class="space-y-6">
<!-- Durée -->
<div class="card">
<div class="card-body">
<h3 class="text-sm font-medium text-text-muted mb-1">Durée du projet</h3>
<p class="text-lg font-semibold"><?= htmlspecialchars($project['duration'] ?? 'Non spécifiée') ?></p>
</div>
</div>
<!-- Témoignage -->
<?php if ($testimonial): ?>
<div class="testimonial">
<blockquote class="text-text-secondary italic mb-4">
"<?= htmlspecialchars($testimonial['quote']) ?>"
</blockquote>
<footer>
<p class="font-medium text-text-primary"><?= htmlspecialchars($testimonial['author_name']) ?></p>
<p class="text-sm text-text-muted">
<?= htmlspecialchars($testimonial['author_role']) ?>
<?php if (!empty($testimonial['author_company'])): ?>
- <?= htmlspecialchars($testimonial['author_company']) ?>
<?php endif; ?>
</p>
</footer>
</div>
<?php endif; ?>
</aside>
</div>
<!-- Navigation bas de page -->
<footer class="mt-16 pt-8 border-t border-border flex flex-wrap justify-between items-center gap-4">
<a href="/projets" class="btn-ghost">
← Retour aux projets
</a>
<a href="/contact" class="btn-primary">
Me contacter
</a>
</footer>
</div>
</article>
</main>
<?php include_template('footer'); ?>
Structure de la Page
┌─────────────────────────────────────────┐
│ Breadcrumb │
├─────────────────────────────────────────┤
│ TITRE DU PROJET │
│ [Badge] [Badge] [Badge] │
│ [Voir en ligne] [GitHub] │
├─────────────────────────────────────────┤
│ [Image principale] │
├─────────────────────────────────────────┤
│ CONTENU │ SIDEBAR │
│ ───────────── │ │
│ Contexte │ Durée │
│ Solution technique │ │
│ Travail d'équipe │ Témoignage │
│ Captures d'écran │ │
├─────────────────────────────────────────┤
│ [← Retour] [Me contacter] │
└─────────────────────────────────────────┘
Testing
- []
/projet/ecommerce-xyzaffiche le bon projet - []
/projet/inexistantaffiche la page 404 - [] Toutes les sections s'affichent correctement
- [] Le bouton "Voir en ligne" fonctionne (si URL)
- [] Le bouton "Voir sur GitHub" fonctionne (si GitHub)
- [] Le breadcrumb est navigable
- [] Les images sont en lazy loading
- [] La page est responsive
Dev Agent Record
Agent Model Used
Claude Opus 4.5 (claude-opus-4-5-20251101)
File List
| File | Action | Description |
|---|---|---|
pages/project-single.php |
Modified | Page projet individuelle complète |
Completion Notes
- Récupération slug via router ($GLOBALS['routeParams'])
- Redirection 404 si projet non trouvé
- Sections: Contexte, Solution technique, Travail d'équipe (conditionnel)
- Boutons: Voir en ligne + GitHub avec icônes SVG
- Galerie screenshots en grille 2 colonnes
- Sidebar avec durée du projet
- Breadcrumb accessible avec aria-label
- Navigation: retour + CTA contact
- Lazy loading + fallback onerror sur images
- Témoignage: placeholder préparé pour Story 4.5
Debug Log References
Aucun problème rencontré.
Change Log
| Date | Version | Description | Author |
|---|---|---|---|
| 2026-01-22 | 0.1 | Création initiale | Sarah (PO) |
| 2026-01-23 | 1.0 | Implémentation complète | James (Dev) |