✨ Story 4.2: competences outils

pages/skills.php

@@ -16,6 +16,47 @@ $categories = [
     'DevOps & Outils' => ['Git', 'Docker', 'Linux', 'Nginx', 'Apache', 'CI/CD'],
 ];
 
+$demonstrableTools = [
+    [
+        'name' => 'Git / GitHub',
+        'icon' => 'github',
+        'url' => 'https://github.com/skycel',
+        'description' => 'Historique de commits et projets publics'
+    ],
+    [
+        'name' => 'VS Code',
+        'icon' => 'vscode',
+        'url' => null,
+        'description' => 'Éditeur principal, configuration partagée'
+    ],
+    [
+        'name' => 'Figma',
+        'icon' => 'figma',
+        'url' => 'https://figma.com',
+        'description' => 'Maquettes et prototypes'
+    ],
+    [
+        'name' => 'Notion',
+        'icon' => 'notion',
+        'url' => 'https://notion.so',
+        'description' => 'Organisation et documentation'
+    ],
+    [
+        'name' => 'Docker',
+        'icon' => 'docker',
+        'url' => 'https://hub.docker.com',
+        'description' => 'Images et configurations'
+    ],
+];
+
+$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'],
+];
+
 include_template('header', compact('pageTitle', 'pageDescription'));
 include_template('navbar', compact('currentPage'));
 ?>
@@ -63,6 +104,76 @@ include_template('navbar', compact('currentPage'));
             </div>
         </div>
     </section>
+
+    <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): ?>
+                    <?php if (!empty($tool['url'])): ?>
+                        <a href="<?= htmlspecialchars($tool['url'], ENT_QUOTES, 'UTF-8') ?>"
+                           target="_blank"
+                           rel="noopener"
+                           class="card-interactive group">
+                    <?php else: ?>
+                        <div class="card">
+                    <?php endif; ?>
+                        <div class="card-body flex items-start gap-4">
+                            <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
+                                <span class="text-primary">
+                                    <?= getToolIcon($tool['icon']) ?>
+                                </span>
+                            </div>
+
+                            <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'], ENT_QUOTES, 'UTF-8') ?>
+                                    <?php if (!empty($tool['url'])): ?>
+                                        <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>
+                                    <?php endif; ?>
+                                </h3>
+                                <p class="text-sm text-text-muted mt-1">
+                                    <?= htmlspecialchars($tool['description'], ENT_QUOTES, 'UTF-8') ?>
+                                </p>
+                            </div>
+                        </div>
+                    <?php if (!empty($tool['url'])): ?>
+                        </a>
+                    <?php else: ?>
+                        </div>
+                    <?php endif; ?>
+                <?php endforeach; ?>
+            </div>
+        </div>
+    </section>
+
+    <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'], ENT_QUOTES, 'UTF-8') ?>
+                        </span>
+                        <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'], ENT_QUOTES, 'UTF-8') ?>
+                        </div>
+                    </div>
+                <?php endforeach; ?>
+            </div>
+        </div>
+    </section>
 </main>
 
 <?php include_template('footer'); ?>