Story 4.2: Page Compétences - Outils Démontrables

Status

Ready for Dev

Story

As a visiteur, I want voir les outils maîtrisés avec des preuves concrètes, so that je vérifie les compétences au-delà des simples affirmations.

Acceptance Criteria

Une section "Outils démontrables" liste les outils avec liens de preuve (Git → GitHub, Notion → page publique, etc.)
Chaque outil a : nom, icône/logo, lien vers la preuve externe
Une section "Autres outils" liste les outils non démontrables avec contexte d'utilisation
Le design distingue clairement les deux types d'outils
Les liens externes s'ouvrent dans un nouvel onglet

Tasks / Subtasks

[] Task 1 : Définir la structure des outils
- [] Créer un tableau d'outils démontrables avec liens
- [] Créer un tableau d'autres outils avec contexte
[] Task 2 : Ajouter la section "Outils démontrables" (AC: 1, 2)
- [] Titre de section
- [] Grille d'outils avec icône et lien
- [] Effet hover
[] Task 3 : Ajouter la section "Autres outils" (AC: 3)
- [] Titre de section
- [] Liste avec description du contexte
- [] Style différent (moins mis en avant)
[] Task 4 : Implémenter les liens externes (AC: 4, 5)
- [] target="_blank" et rel="noopener"
- [] Icône "lien externe" visuelle

Dev Notes

Données des Outils

// Outils démontrables (avec preuves)
$demonstrableTools = [
    [
        'name' => 'Git / GitHub',
        'icon' => 'github',
        'url' => 'https://github.com/votre-username',
        'description' => 'Historique de commits et projets publics'
    ],
    [
        'name' => 'VS Code',
        'icon' => 'vscode',
        'url' => null, // pas de lien mais démontrable via code
        'description' => 'Éditeur principal, configuration partagée'
    ],
    [
        'name' => 'Figma',
        'icon' => 'figma',
        'url' => 'https://figma.com/@votre-username',
        'description' => 'Maquettes et prototypes'
    ],
    [
        'name' => 'Notion',
        'icon' => 'notion',
        'url' => 'https://notion.so/votre-page-publique',
        'description' => 'Organisation et documentation'
    ],
    [
        'name' => 'Docker',
        'icon' => 'docker',
        'url' => 'https://hub.docker.com/u/votre-username',
        'description' => 'Images et configurations'
    ],
];

// Autres outils (sans preuve directe)
$otherTools = [
    ['name' => 'Photoshop', 'context' => 'Retouche d\'images et création graphique'],
    ['name' => 'Insomnia', 'context' => 'Test d\'APIs REST'],
    ['name' => 'DBeaver', 'context' => 'Administration de bases de données'],
    ['name' => 'FileZilla', 'context' => 'Transfert FTP/SFTP'],
    ['name' => 'Trello', 'context' => 'Gestion de projet Kanban'],
];

Section à ajouter dans pages/skills.php

<!-- Outils démontrables -->
<section class="section bg-surface">
    <div class="container-content">
        <h2 class="text-heading mb-8">Outils Démontrables</h2>
        <p class="text-text-secondary mb-8">
            Ces outils sont accompagnés de preuves vérifiables.
        </p>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <?php foreach ($demonstrableTools as $tool): ?>
                <a href="<?= htmlspecialchars($tool['url']) ?>"
                   target="_blank"
                   rel="noopener"
                   class="card-interactive group">
                    <div class="card-body flex items-start gap-4">
                        <!-- Icône -->
                        <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                            <span class="text-2xl text-primary">
                                <?= getToolIcon($tool['icon']) ?>
                            </span>
                        </div>

                        <!-- Contenu -->
                        <div class="flex-grow">
                            <h3 class="font-semibold text-text-primary group-hover:text-primary transition-colors flex items-center gap-2">
                                <?= htmlspecialchars($tool['name']) ?>
                                <svg class="w-4 h-4 opacity-50" 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>
                            </h3>
                            <p class="text-sm text-text-muted mt-1">
                                <?= htmlspecialchars($tool['description']) ?>
                            </p>
                        </div>
                    </div>
                </a>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- Autres outils -->
<section class="section">
    <div class="container-content">
        <h2 class="text-heading mb-8">Autres Outils</h2>
        <p class="text-text-secondary mb-8">
            Outils utilisés régulièrement dans mes projets.
        </p>

        <div class="flex flex-wrap gap-4">
            <?php foreach ($otherTools as $tool): ?>
                <div class="group relative">
                    <span class="badge text-sm cursor-help">
                        <?= htmlspecialchars($tool['name']) ?>
                    </span>
                    <!-- Tooltip -->
                    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-surface-light text-text-secondary text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap">
                        <?= htmlspecialchars($tool['context']) ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

Icônes des Outils

Utiliser des SVG inline ou une sprite d'icônes pour les outils :

function getToolIcon(string $icon): string
{
    $icons = [
        'github' => '<svg>...</svg>',
        'vscode' => '<svg>...</svg>',
        'figma' => '<svg>...</svg>',
        'notion' => '<svg>...</svg>',
        'docker' => '<svg>...</svg>',
    ];

    return $icons[$icon] ?? '🔧';
}

Testing

[] La section "Outils démontrables" affiche les outils avec liens
[] Les liens s'ouvrent dans un nouvel onglet
[] L'icône "lien externe" est visible
[] La section "Autres outils" est visuellement distincte
[] Les tooltips fonctionnent au hover
[] Le design est responsive

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 fonction getToolIcon() avec SVG
`pages/skills.php`	Modified	Ajout sections outils démontrables et autres outils

Completion Notes

Fonction getToolIcon() avec icônes SVG pour GitHub, VS Code, Figma, Docker, Linux
Section "Outils Démontrables" avec grille responsive (1→2→3 colonnes)
Liens externes avec target="_blank" et rel="noopener"
Icône lien externe SVG sur les outils avec URL
Section "Autres Outils" avec badges et tooltips au hover
Design distinct entre les deux sections (cartes vs badges)

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.5 KiB Raw Blame History