Story 1.1: initialisation projet
This commit is contained in:
169
docs/stories/3.5.projets-secondaires.md
Normal file
169
docs/stories/3.5.projets-secondaires.md
Normal file
@@ -0,0 +1,169 @@
|
||||
# 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) |
|
||||
Reference in New Issue
Block a user