🎨 Feature: Configuration Tailwind + Templates PHP + Page Canary

Stories 1.2, 1.3, 1.4: - Tailwind CSS configuré avec palette sombre personnalisée - Templates header.php et footer.php avec meta SEO/Open Graph - Fonction include_template() pour les composants réutilisables - Page canary avec animations et composants de test - Configuration nginx exemple pour le déploiement - Dépendances: vlucas/phpdotenv, tailwindcss, postcss, autoprefixer Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-22 22:42:21 +01:00
parent e2cdf70f66
commit 5b10afb6db
12 changed files with 2066 additions and 36 deletions
--- a/index.php
+++ b/index.php
@@ -1,11 +1,53 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Portfolio - Skycel</title>
-</head>
-<body>
-    <h1>Hello World</h1>
-</body>
-</html>
+<?php
+// index.php - Page Canary
+
+require_once __DIR__ . '/includes/functions.php';
+
+include_template('header', [
+    'pageTitle' => 'Portfolio en construction',
+    'pageDescription' => 'Mon portfolio de développeur web arrive bientôt. Restez connectés !'
+]);
+?>
+
+<main class="min-h-screen flex items-center justify-center">
+    <div class="container-content text-center py-20">
+        <!-- Titre principal -->
+        <h1 class="text-display text-text-primary mb-4 animate-fade-in">
+            Portfolio <span class="text-primary">en construction</span>
+        </h1>
+
+        <!-- Sous-titre -->
+        <p class="text-xl text-text-secondary mb-8 max-w-2xl mx-auto animate-fade-in animation-delay-100">
+            Je prépare quelque chose de génial pour vous.
+            <br>Revenez bientôt pour découvrir mes projets !
+        </p>
+
+        <!-- Badge de test -->
+        <div class="flex justify-center gap-4 mb-12 animate-fade-in animation-delay-200">
+            <span class="badge">PHP</span>
+            <span class="badge">Tailwind CSS</span>
+            <span class="badge badge-primary">En cours</span>
+        </div>
+
+        <!-- Card de test -->
+        <div class="card max-w-md mx-auto animate-fade-in animation-delay-300">
+            <div class="card-body">
+                <h3 class="text-subheading mb-2">Infrastructure validée</h3>
+                <p class="text-text-secondary mb-4">
+                    PHP, Tailwind CSS et le serveur fonctionnent correctement.
+                </p>
+                <div class="flex gap-4 justify-center">
+                    <span class="btn-primary">Bouton Primary</span>
+                    <span class="btn-secondary">Bouton Secondary</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Test responsive -->
+        <p class="text-text-muted text-sm mt-12">
+            Testé sur mobile, tablette et desktop.
+        </p>
+    </div>
+</main>
+
+<?php include_template('footer'); ?>