# 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

1. Une section "Outils démontrables" liste les outils avec liens de preuve (Git → GitHub, Notion → page publique, etc.)
2. Chaque outil a : nom, icône/logo, lien vers la preuve externe
3. Une section "Autres outils" liste les outils non démontrables avec contexte d'utilisation
4. Le design distingue clairement les deux types d'outils
5. 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

```php
// 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

```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 :

```php
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) |