Portfolio-Codex/docs/stories/3.5.projets-secondaires.md

# 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

1. Sur `/projets`, une section "Autres projets" liste les projets où category = "secondaire"
2. Chaque projet secondaire affiche : titre, courte description (1 ligne), technologies
3. Le format est compact (liste ou petites cartes)
4. Les projets secondaires peuvent avoir un lien externe direct (optionnel)
5. 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

```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
<?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) |