skycel
5b10afb6db
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>
54 lines
1.9 KiB
PHP
54 lines
1.9 KiB
PHP
<?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'); ?>
|