skycel/Portfolio-Skycel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🏠 Feature: Page d'accueil Hero + CTA mobile amélioré

Browse Source 
Stories 2.2 & 2.3:
- Hero section avec nom, titre, accroche et CTA
- Typographie responsive (text-4xl → text-display)
- Animations fade-in avec délais progressifs
- CTA mobile full-width avec séparateur visuel
- Boutons "Découvrir mes projets" et "En savoir plus"

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
skycel
2026-01-22 23:11:01 +01:00
parent 95ea9f760a
commit e19c60c19b
2 changed files with 53 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
index.php
View File

@@ -1,57 +1,54 @@
<?php
// index.php - Page Canary
/**
* Page d'accueil
*/
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 !'
]);
$pageTitle = 'Accueil';
$pageDescription = 'Portfolio de développeur web full-stack. Découvrez mes projets, compétences et parcours.';
$currentPage = 'home';
include_template('navbar', [
'currentPage' => 'home'
]);
include_template('header', compact('pageTitle', 'pageDescription'));
include_template('navbar', compact('currentPage'));
?>
<main class="min-h-screen flex items-center justify-center">
<main>
<!-- Hero Section -->
<section class="min-h-[calc(100vh-5rem)] 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>
<!-- Intro -->
<p class="text-primary font-medium mb-4 animate-fade-in">
Bonjour, je suis
</p>
<!-- Nom -->
<h1 class="text-4xl sm:text-5xl lg:text-display font-bold text-text-primary mb-6 animate-fade-in animation-delay-100">
Prénom <span class="text-primary">NOM</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 !
<!-- Titre -->
<p class="text-xl sm:text-2xl lg:text-heading text-text-secondary mb-6 animate-fade-in animation-delay-200">
Développeur Web Full-Stack
</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.
<!-- Accroche -->
<p class="text-lg text-text-secondary max-w-2xl mx-auto mb-10 animate-fade-in animation-delay-300">
Je crée des expériences web modernes, performantes et accessibles.
<br class="hidden sm:block">Chaque projet est une opportunité de montrer plutôt que de dire.
</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>
<!-- CTA -->
<div class="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in animation-delay-300">
<a href="/projets" class="btn-primary">
Découvrir mes projets
</a>
<a href="/a-propos" class="btn-secondary">
En savoir plus
</a>
</div>
</div>
</section>
</main>
<?php include_template('footer'); ?>

8
templates/navbar.php
View File

@@ -68,12 +68,20 @@ $navLinks = [
<div id="mobile-menu" class="lg:hidden hidden" aria-hidden="true">
<ul class="py-4 space-y-2 border-t border-border">
<?php foreach ($navLinks as $link): ?>
<?php if (!empty($link['isCta'])): ?>
<li class="pt-2 border-t border-border mt-2">
<a href="<?= $link['url'] ?>" class="btn-primary w-full justify-center">
<?= $link['label'] ?>
</a>
</li>
<?php else: ?>
<li>
<a href="<?= $link['url'] ?>"
class="block py-3 px-4 rounded-lg <?= $currentPage === $link['id'] ? 'bg-surface text-primary' : 'text-text-secondary hover:bg-surface hover:text-text-primary' ?> transition-colors">
<?= $link['label'] ?>
</a>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</div>