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

/competences affiche une liste des technologies de développement (HTML, CSS, JS, PHP, etc.)
Chaque technologie est liée aux projets qui l'utilisent (liens cliquables)
Les technologies sont groupées par catégorie (Frontend, Backend, Outils, etc.)
Un indicateur visuel montre le nombre de projets utilisant chaque technologie
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
/**
 * 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

/**
 * 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)

7.4 KiB Raw Blame History