212 lines
7.4 KiB
Markdown
212 lines
7.4 KiB
Markdown
# Story 4.1: Page Compétences - Technologies Liées aux Projets
|
|
|
|
## Status
|
|
|
|
Ready for Dev
|
|
|
|
## Story
|
|
|
|
**As a** visiteur,
|
|
**I want** voir les compétences techniques du développeur liées aux projets réalisés,
|
|
**so that** je vérifie qu'il maîtrise les technologies dont j'ai besoin.
|
|
|
|
## Acceptance Criteria
|
|
|
|
1. `/competences` affiche une liste des technologies de développement (HTML, CSS, JS, PHP, etc.)
|
|
2. Chaque technologie est liée aux projets qui l'utilisent (liens cliquables)
|
|
3. Les technologies sont groupées par catégorie (Frontend, Backend, Outils, etc.)
|
|
4. Un indicateur visuel montre le nombre de projets utilisant chaque technologie
|
|
5. Le design utilise des badges/tags cohérents avec les pages projets
|
|
|
|
## Tasks / Subtasks
|
|
|
|
- [] **Task 1 : Créer la page skills.php** (AC: 1)
|
|
- [] Mettre à jour `pages/skills.php`
|
|
- [] Inclure header, navbar, footer
|
|
- [] Route `/competences` déjà configurée
|
|
|
|
- [] **Task 2 : Créer la structure de données des technologies**
|
|
- [] Définir les catégories : Frontend, Backend, Base de données, DevOps
|
|
- [] Lister les technologies par catégorie
|
|
- [] Comptage automatique via getProjectCountByTech()
|
|
|
|
- [] **Task 3 : Afficher les technologies groupées** (AC: 3)
|
|
- [] Section par catégorie avec icône
|
|
- [] Titre de catégorie
|
|
- [] Liste des technologies
|
|
|
|
- [] **Task 4 : Lier aux projets** (AC: 2, 4)
|
|
- [] Compter les projets par technologie
|
|
- [] Afficher le compteur en badge
|
|
- [] Tooltip avec nombre de projets
|
|
|
|
- [] **Task 5 : Styler avec les badges** (AC: 5)
|
|
- [] Technologies avec projets: fond coloré + compteur
|
|
- [] Technologies sans projet: grisées
|
|
- [] Effet hover
|
|
|
|
## Dev Notes
|
|
|
|
### Page pages/skills.php
|
|
|
|
```php
|
|
<?php
|
|
/**
|
|
* Page Compétences
|
|
*/
|
|
|
|
$pageTitle = 'Compétences';
|
|
$pageDescription = 'Mes compétences techniques en développement web : langages, frameworks et outils.';
|
|
$currentPage = 'skills';
|
|
|
|
// Récupérer toutes les technologies depuis les projets
|
|
$projects = getProjects();
|
|
$techCount = [];
|
|
|
|
foreach ($projects as $project) {
|
|
foreach ($project['technologies'] ?? [] as $tech) {
|
|
$techCount[$tech] = ($techCount[$tech] ?? 0) + 1;
|
|
}
|
|
}
|
|
|
|
// Catégoriser les technologies
|
|
$categories = [
|
|
'Frontend' => ['HTML', 'CSS', 'JavaScript', 'TypeScript', 'React', 'Vue.js', 'Tailwind CSS', 'Bootstrap', 'SASS'],
|
|
'Backend' => ['PHP', 'Node.js', 'Python', 'Laravel', 'Express', 'Symfony'],
|
|
'Base de données' => ['MySQL', 'PostgreSQL', 'MongoDB', 'SQLite', 'Redis'],
|
|
'DevOps & Outils' => ['Git', 'Docker', 'Linux', 'Nginx', 'Apache', 'CI/CD'],
|
|
];
|
|
|
|
include_template('header', compact('pageTitle', 'pageDescription'));
|
|
include_template('navbar', compact('currentPage'));
|
|
?>
|
|
|
|
<main>
|
|
<section class="section">
|
|
<div class="container-content">
|
|
<div class="section-header">
|
|
<h1 class="section-title">Compétences</h1>
|
|
<p class="section-subtitle">
|
|
Technologies que j'utilise au quotidien, liées à mes projets réels.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Technologies par catégorie -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
|
|
<?php foreach ($categories as $category => $techs): ?>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h2 class="text-subheading mb-6"><?= htmlspecialchars($category) ?></h2>
|
|
|
|
<div class="flex flex-wrap gap-3">
|
|
<?php foreach ($techs as $tech): ?>
|
|
<?php $count = $techCount[$tech] ?? 0; ?>
|
|
<?php if ($count > 0): ?>
|
|
<a href="/projets?tech=<?= urlencode($tech) ?>"
|
|
class="group flex items-center gap-2 px-4 py-2 bg-surface-light rounded-lg hover:bg-primary/20 transition-colors">
|
|
<span class="font-medium text-text-primary group-hover:text-primary">
|
|
<?= htmlspecialchars($tech) ?>
|
|
</span>
|
|
<span class="text-xs px-2 py-0.5 bg-primary/20 text-primary rounded-full">
|
|
<?= $count ?>
|
|
</span>
|
|
</a>
|
|
<?php else: ?>
|
|
<span class="flex items-center gap-2 px-4 py-2 bg-surface-light/50 rounded-lg text-text-muted">
|
|
<?= htmlspecialchars($tech) ?>
|
|
</span>
|
|
<?php endif; ?>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section outils (Story 4.2) sera ajoutée ici -->
|
|
</main>
|
|
|
|
<?php include_template('footer'); ?>
|
|
```
|
|
|
|
### Logique de Comptage
|
|
|
|
```php
|
|
/**
|
|
* Compte les projets par technologie
|
|
*/
|
|
function getProjectCountByTech(): array
|
|
{
|
|
$projects = getProjects();
|
|
$count = [];
|
|
|
|
foreach ($projects as $project) {
|
|
foreach ($project['technologies'] ?? [] as $tech) {
|
|
$count[$tech] = ($count[$tech] ?? 0) + 1;
|
|
}
|
|
}
|
|
|
|
return $count;
|
|
}
|
|
|
|
/**
|
|
* Récupère les projets utilisant une technologie
|
|
*/
|
|
function getProjectsByTech(string $tech): array
|
|
{
|
|
return array_filter(getProjects(), function($project) use ($tech) {
|
|
return in_array($tech, $project['technologies'] ?? []);
|
|
});
|
|
}
|
|
```
|
|
|
|
### Catégories de Technologies
|
|
|
|
| Catégorie | Technologies |
|
|
|-----------|--------------|
|
|
| Frontend | HTML, CSS, JS, React, Vue, Tailwind, etc. |
|
|
| Backend | PHP, Node.js, Python, Laravel, etc. |
|
|
| Base de données | MySQL, PostgreSQL, MongoDB, etc. |
|
|
| DevOps & Outils | Git, Docker, Linux, CI/CD, etc. |
|
|
|
|
## Testing
|
|
|
|
- [] La page `/competences` s'affiche correctement
|
|
- [] Les technologies sont groupées par catégorie
|
|
- [] Le compteur de projets est affiché
|
|
- [] Les technologies avec projets ont un tooltip
|
|
- [] Les technologies sans projet sont grisées
|
|
- [] Le design est cohérent avec le reste du site
|
|
|
|
## Dev Agent Record
|
|
|
|
### Agent Model Used
|
|
Claude Opus 4.5 (claude-opus-4-5-20251101)
|
|
|
|
### File List
|
|
| File | Action | Description |
|
|
|------|--------|-------------|
|
|
| `includes/functions.php` | Modified | Ajout getProjectCountByTech() et getProjectsByTech() |
|
|
| `pages/skills.php` | Modified | Implémentation complète de la page compétences |
|
|
|
|
### Completion Notes
|
|
- Page `/competences` avec 4 catégories de technologies (Frontend, Backend, Base de données, DevOps & Outils)
|
|
- Icône SVG pour chaque catégorie
|
|
- Compteur de projets affiché en badge pour chaque technologie
|
|
- Tooltip avec nombre de projets au survol
|
|
- Technologies sans projet associé affichées en grisé
|
|
- Design cohérent avec les cartes du reste du site
|
|
- Note: Les liens vers `/projets?tech=X` ont été retirés (filtrage à implémenter dans une future story)
|
|
|
|
### 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) |
|