# 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) |