Story 3.5: Liste des Projets Secondaires

Status

Ready for Dev

Story

As a visiteur, I want voir une liste simplifiée des projets secondaires, so that je découvre l'étendue du travail sans page dédiée pour chaque.

Acceptance Criteria

Sur /projets, une section "Autres projets" liste les projets où category = "secondaire"
Chaque projet secondaire affiche : titre, courte description (1 ligne), technologies
Le format est compact (liste ou petites cartes)
Les projets secondaires peuvent avoir un lien externe direct (optionnel)
La section est visuellement distincte des projets vedettes (séparateur, titre de section)

Tasks / Subtasks

[] Task 1 : Ajouter la section dans projects.php (AC: 1, 5)
- [] Récupérer les projets secondaires
- [] Ajouter un titre de section "Autres projets"
- [] Ajouter un séparateur visuel
[] Task 2 : Créer le template project-card-compact.php (AC: 2, 3)
- [] Format liste horizontale
- [] Titre cliquable (si URL)
- [] Description courte (truncate si nécessaire)
- [] Badges technologies (3 max)
[] Task 3 : Gérer les liens (AC: 4)
- [] Si URL → lien externe (nouvel onglet)
- [] Si pas d'URL → texte simple

Dev Notes

Section à ajouter dans pages/projects.php

<!-- Après la grille des projets vedettes -->

<?php if (!empty($secondaryProjects)): ?>
    <!-- Séparateur -->
    <hr class="border-border my-16">

    <!-- Section projets secondaires -->
    <section>
        <h2 class="text-heading mb-8">Autres projets</h2>

        <div class="space-y-4">
            <?php foreach ($secondaryProjects as $project): ?>
                <?php include_template('project-card-compact', ['project' => $project]); ?>
            <?php endforeach; ?>
        </div>
    </section>
<?php endif; ?>

Template templates/project-card-compact.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-border transition-colors">
    <div class="card-body flex flex-col sm:flex-row sm:items-center gap-4">
        <!-- Titre et description -->
        <div class="flex-grow">
            <?php if ($url): ?>
                <a href="<?= htmlspecialchars($url) ?>"
                   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) ?>
                    <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 else: ?>
                <h3 class="text-lg font-semibold text-text-primary">
                    <?= htmlspecialchars($title) ?>
                </h3>
            <?php endif; ?>

            <?php if ($shortContext): ?>
                <p class="text-text-secondary text-sm mt-1">
                    <?= htmlspecialchars($shortContext) ?>
                </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) ?></span>
            <?php endforeach; ?>

            <?php if (count($technologies) > $maxTechs): ?>
                <span class="badge badge-muted text-xs">+<?= count($technologies) - $maxTechs ?></span>
            <?php endif; ?>
        </div>
    </div>
</article>

Différences Vedettes vs Secondaires

Aspect	Projets Vedettes	Projets Secondaires
Format	Carte avec image	Ligne compacte
Image	Thumbnail	Aucune
Lien	Page dédiée	Lien externe direct
Description	Non affichée dans la liste	1 ligne
Technologies	4 max	3 max

Testing

[] La section "Autres projets" apparaît sous les projets vedettes
[] Seuls les projets "secondaire" sont listés (1 projet)
[] Chaque projet affiche : titre, description courte, badges
[] Le titre est cliquable si URL disponible
[] Le lien s'ouvre dans un nouvel onglet (target="_blank")
[] Le design est distinct des projets vedettes (séparateur hr)

Dev Agent Record

Agent Model Used

Claude Opus 4.5 (claude-opus-4-5-20251101)

File List

File	Action	Description
`pages/projects.php`	Modified	Ajout section projets secondaires
`templates/project-card-compact.php`	Created	Template carte compacte

Completion Notes

Section "Autres projets" avec séparateur visuel (hr)
Template compact: titre + description tronquée (100 chars) + badges (3 max)
Lien externe avec icône SVG si URL disponible
rel="noopener" pour sécurité
1 projet secondaire affiché: "Site Vitrine Restaurant"

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)

5.6 KiB Raw Permalink Blame History