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

Refonte du design : moderne + responsive, thème clair/sombre, maj compétences

Browse Source 
- Vraie structure HTML5 (doctype, head, meta viewport) via le header commun
- CSS réécrit avec variables, police Inter, header sticky, menu burger mobile
- Thème clair/sombre avec bouton dans la navbar (mémorisé en localStorage)
- Hero sur l'accueil, page compétences en cartes alignée sur le CV (+ Ansible)
- Correction des balises body/main dupliquées sur contact, login et cgu

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Esteban
2026-07-02 09:24:33 +02:00
co-authored by Claude Fable 5
parent 9bbc05bcac
commit e50eeacaeb
13 changed files with 997 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files
elements/header.php
+65 -21
View File
@@ -1,6 +1,6 @@
<?php
<?php
// Ce Header sera inseré sur des pages grâce a la fonction require_once('./../elements/header.php')
// Ce Header sera inseré sur des pages grâce a la fonction require_once('./../elements/header.php')
// Rappel des différentes pages : Acceuil, Projets, Contact
// Rappel des boutons : Connexion, (Si le temps) Panneau Administrateur (Seulement si l'utilisateur est admin)
@@ -13,25 +13,56 @@ require_once('../scripts/requireCaptcha.php');
// Ajout des logs sur toutes les pages
require_once('../functions/sendLogs.php');
?>
<!-- Ajout du CSS Primaire (fait par IA) -->
<link rel="stylesheet" href="../styles/primary_css.css">
<!-- Ajout de Font Awesome pour les icones de home.php-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
// Titre de la page : chaque page peut définir $pageTitle avant d'inclure le header
$pageTitle = isset($pageTitle) ? $pageTitle . ' — Esteban MOUSSU' : 'Esteban MOUSSU — Portfolio';
// Page courante pour souligner le lien actif dans la navigation
$currentPage = basename($_SERVER['PHP_SELF']);
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<!-- Meta viewport : indispensable pour que le site soit responsive sur mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo htmlspecialchars($pageTitle); ?></title>
<!-- Applique le thème sauvegardé AVANT le chargement du CSS pour éviter un flash sombre/clair -->
<script>
(function () {
if (localStorage.getItem('theme') === 'light') {
document.documentElement.setAttribute('data-theme', 'light');
}
})();
</script>
<!-- Police moderne Inter (Google Fonts) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Ajout du CSS Primaire (fait par IA) -->
<link rel="stylesheet" href="../styles/primary_css.css">
<!-- Ajout de Font Awesome pour les icones de home.php-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
</head>
<body>
<!-- Header + nav -->
<header>
<header class="site-header">
<!-- Texte qui sera dans le header -->
<a href="./../index.php" class="titre-de-page">Esteban MOUSSU - PortFolio</a>
<div class="header-right">
<!-- Module de navigation -->
<nav>
<a href="./../index.php">Accueil</a>
<a href="./../pages/projects.php">Projets</a>
<a href="./../pages/xp.php">Expériences</a>
<a href="./../pages/skills.php">Compétences</a>
<a href="./../pages/contact.php">Contact</a>
<nav class="site-nav">
<a href="./../pages/home.php" class="<?php echo ($currentPage === 'home.php') ? 'active' : ''; ?>">Accueil</a>
<a href="./../pages/projects.php" class="<?php echo ($currentPage === 'projects.php') ? 'active' : ''; ?>">Projets</a>
<a href="./../pages/xp.php" class="<?php echo ($currentPage === 'xp.php') ? 'active' : ''; ?>">Expériences</a>
<a href="./../pages/skills.php" class="<?php echo ($currentPage === 'skills.php') ? 'active' : ''; ?>">Compétences</a>
<a href="./../pages/contact.php" class="<?php echo ($currentPage === 'contact.php') ? 'active' : ''; ?>">Contact</a>
<?php
// Vérification que l'utilisateur est admin, s'il est admin, il aura accès au panel admin
if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') {
@@ -40,29 +71,42 @@ require_once('../functions/sendLogs.php');
?>
<!-- Lien vers le panneau admin -->
<a href="./../pages/admin.php">Administration</a>
<a href="./../pages/admin.php" class="<?php echo ($currentPage === 'admin.php') ? 'active' : ''; ?>">Administration</a>
<?php
}
// Vérification si l'utilisateur est connecté, si c'est le cas au lieu de Connexion il aura Deconnexion
if (isset($_SESSION['user_id'])){
?>
<a href="../scripts/disconnect.php">Deconnexion</a>
<a href="../scripts/disconnect.php" class="nav-cta">Deconnexion</a>
<?php
} else {
?>
<a href="./../pages/login.php">Connexion</a>
<a href="./../pages/login.php" class="nav-cta <?php echo ($currentPage === 'login.php') ? 'active' : ''; ?>">Connexion</a>
<?php
}
?>
<!-- Fonctionnalité future changement de thème dark / light et panneau admin -->
</nav>
<!-- Bouton de changement de thème dark / light : le choix est mémorisé dans le navigateur (localStorage) -->
<button class="theme-toggle" aria-label="Changer de thème"
onclick="var h=document.documentElement;var l=h.getAttribute('data-theme')==='light';if(l){h.removeAttribute('data-theme');localStorage.setItem('theme','dark');}else{h.setAttribute('data-theme','light');localStorage.setItem('theme','light');}">
<i class="fa-solid fa-sun"></i><i class="fa-solid fa-moon"></i>
</button>
<!-- Bouton burger : visible uniquement sur mobile, ouvre/ferme la navigation -->
<button class="nav-toggle" aria-label="Ouvrir le menu" aria-expanded="false"
onclick="var h=document.querySelector('.site-header');h.classList.toggle('nav-open');this.setAttribute('aria-expanded',h.classList.contains('nav-open'));">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main>
<main>