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

- 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>
2026-07-02 09:24:33 +02:00
parent 9bbc05bcac
commit e50eeacaeb
13 changed files with 997 additions and 425 deletions
@@ -329,6 +329,9 @@ $attemptsLeft = $round['attempts_left'] ?? 0;
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test anti-robot</title>
+    <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">
    <link rel="stylesheet" href="./styles/captcha.css">
 </head>
 <body class="<?php echo $success ? 'success-mode' : ''; ?>">
@@ -19,3 +19,6 @@
        </div>
    </div>
 </footer>
+
+</body>
+</html>
@@ -13,25 +13,56 @@ require_once('../scripts/requireCaptcha.php');

 // Ajout des logs sur toutes les pages
 require_once('../functions/sendLogs.php');
+
+// 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,7 +71,7 @@ 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
    }
@@ -51,18 +82,31 @@ require_once('../functions/sendLogs.php');

    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>
@@ -1,4 +1,7 @@
 <?php
+// Titre de l'onglet
+$pageTitle = 'Administration';
+
 // On ajoute ici le header
 require_once('./../elements/header.php');

@@ -1,11 +1,15 @@
 <?php

 // CGU / CDU
+
+// Titre de l'onglet
+$pageTitle = 'Conditions générales d\'utilisation';
+
 require_once('./../elements/header.php');

 ?>

-<main class="cgu-page">
+<div class="cgu-page">
    <section class="cgu-card">
        <h1> Conditions générales d'utilisation </h1>
        <h2> Dernière mise à jour : 29 juin 2026</h2>
@@ -57,7 +61,7 @@ require_once('./../elements/header.php');
        <h3> 12. Droit applicable</h3>
        <p>Les présentes CGU sont soumises au droit français. En cas de litige, et à défaut de résolution amiable, les juridictions compétentes seront celles déterminées par les règles de droit commun.</p>
    </section>
-</main>
+</div>

 <?php
 require_once('../elements/footer.php');
@@ -1,18 +1,21 @@
 <?php
 // Formulaire de contact avec WEBHOOK Discord
+
+// Titre de l'onglet
+$pageTitle = 'Contact';
+
 // On ajoute ici le header
 require_once("../elements/header.php");
 ?>

-<body>
-    <main class="contact-page">
+<div class="contact-page">
    <section class="contact-wrapper">
        <div class="contact-card">
            <div class="contact-info">
                <p class="contact-title">Contact</p>
                <p class="contact-name">Moussu Esteban</p>
-                    <p class="contact-line">esteban.moussu@ik.me</p>
-                    <p class="contact-line">20 Grande rue</p>
+                <p class="contact-line"><i class="fa-solid fa-envelope"></i> esteban.moussu@ik.me</p>
+                <p class="contact-line"><i class="fa-solid fa-location-dot"></i> 20 Grande rue</p>
                <p class="contact-line">52500 Broncourt</p>
            </div>

@@ -32,8 +35,7 @@ require_once("../elements/header.php");
            </form>
        </div>
    </section>
-    </main>
-</body>
+</div>

 <?php
 // Ajout du footer
@@ -3,6 +3,8 @@
 // Page Home PortFolio Esteban
 // Cette page servira de page d'accueil où nous pourrons y retrouver une redirection vers les différents projets, espace de connexion, form de contact, etc...

+// Titre de l'onglet
+$pageTitle = 'Accueil';

 // Insertion du header
 require_once('./../elements/header.php');
@@ -19,6 +21,20 @@ require_once('./../elements/header.php');
    (Ctrl + F5 ou Cmd + Shift + R) pour voir les dernières modifications.
 </p>

+<!-- Section hero : présentation rapide -->
+<section class="hero">
+    <span class="hero-badge"><i class="fa-solid fa-graduation-cap"></i> Étudiant en informatique</span>
+    <h1>Salut, moi c'est <span class="accent">Esteban</span></h1>
+    <p>
+        Passionné par les systèmes, les réseaux et le développement web.
+        Découvre mes projets, mes expériences professionnelles et mes compétences.
+    </p>
+    <div class="hero-actions">
+        <a href="../pages/projects.php" class="btn btn-primary"><i class="fa-solid fa-folder-open"></i> Voir mes projets</a>
+        <a href="../pages/contact.php" class="btn btn-ghost"><i class="fa-solid fa-paper-plane"></i> Me contacter</a>
+    </div>
+</section>
+
 <!-- Section d'exploration rapide -->
 <section class="quick-links-section">
    <div class="quick-links-header">
@@ -50,7 +66,7 @@ require_once('./../elements/header.php');
            </div>
            <h3>Compétences</h3>
            <!-- Page où il y aura toutes mes compétences -->
-            <p>PAS ENCORE DEV</p>
+            <p>Systèmes, réseaux et développement.</p>
        </a>

        <a href="../pages/contact.php" class="quick-link-card">
@@ -3,7 +3,8 @@
 // Dans l'idée un champ pour un nom d'utilisateur, et un pour le mot de passe puis un bouton de connexion
 // Egalement permettre à l'utilisateur de faire retour en arrière s'il s'est trompé (croix ou header)

-
+// Titre de l'onglet
+$pageTitle = 'Connexion';

 // On ajoute ici le Header
 require_once('./../elements/header.php');
@@ -16,8 +17,6 @@ if (isset($_SESSION['user_id'])){

 ?>

-<body>
-
 <!-- CSS Login (fait par Intelligence Arti) -->
 <div class="login-container">
    <div class="login-card">
@@ -38,8 +37,6 @@ if (isset($_SESSION['user_id'])){
    </div>
 </div>

-</body>
-
 <?php

 // Ajout du footer
@@ -3,18 +3,23 @@
 // Page affichant les différents projets personnels / scolaires / professionnels
 // On pourrait également rajouter des tags comme "En cours" ou même "En reflexion"...

+// Titre de l'onglet
+$pageTitle = 'Projets';

 // On ajoute le header
 require_once('../elements/header.php');

 // Ajout d'un message indiquant si l'utilisateur est admin qu'il peut modifier ces projets
 if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin') {
-    echo "<p style='color: white; text-align: center;'>Vous êtes administrateur, vous pouvez modifier les projets <a href='../pages/admin.php'>ici</a>.</p>";
+    echo "<p class='admin-notice'>Vous êtes administrateur, vous pouvez modifier les projets <a href='../pages/admin.php'>ici</a>.</p>";
 }
 // Affichages des projets
 ?>

-<p class="projects-title">Liste des projets</p>
+<div class="page-header">
+    <h1>Projets</h1>
+    <p>Mes réalisations personnelles, scolaires et professionnelles.</p>
+</div>

 <?php

@@ -2,6 +2,8 @@

 // Compétences

+// Titre de l'onglet
+$pageTitle = 'Compétences';

 // On ajoute ici le header
 require_once('./../elements/header.php');
@@ -9,42 +11,105 @@ require_once('./../elements/header.php');
 ?>

 <!-- Contenu de la page skills -->
+<section class="skills-section">

-<div class="container">
+    <div class="skills-header">
        <h1>Compétences</h1>
+        <p>Un aperçu des technologies et des domaines que je maîtrise.</p>
    </div>

-<h2><i class="fa-solid fa-computer"></i> Systèmes d'exploitation :</h2>
-<ul>
-    <li><i class="fa-brands fa-microsoft"></i> Windows (Server/XP 8 10 11)</li>
-    <li><i class="fa-brands fa-linux"></i> Linux</li>
+    <div class="skills-grid">
+
+        <!-- Systèmes d'exploitation -->
+        <div class="skill-category">
+            <div class="skill-category-icon">
+                <i class="fa-solid fa-computer"></i>
+            </div>
+            <h2>Systèmes d'exploitation</h2>
+            <ul class="skill-list">
+                <li><i class="fa-brands fa-microsoft"></i> Windows (Serveur/XP/8/10/11)</li>
+                <li><i class="fa-brands fa-linux"></i> Linux (Debian/Ubuntu)</li>
                <li><i class="fa-brands fa-apple"></i> macOS</li>
            </ul>
+        </div>

-<h2>Réseaux :</h2>
-<ul>
-    <li>Adressage IP</li>
-    <li>VLAN</li>
-    <li><i class="fa-brands fa-cloudflare"></i> Pare-feu</li>
-    <li>DNS (Bind9)</li>
-    <li>DHCP (ISC DHCP)</li>
-    <li>Proxy (Proxy Squid)</li>
+        <!-- Réseaux -->
+        <div class="skill-category">
+            <div class="skill-category-icon">
+                <i class="fa-solid fa-network-wired"></i>
+            </div>
+            <h2>Réseaux</h2>
+            <ul class="skill-list">
+                <li><i class="fa-solid fa-location-dot"></i> Adressage IP</li>
+                <li><i class="fa-solid fa-diagram-project"></i> VLAN</li>
+                <li><i class="fa-solid fa-shield-halved"></i> Pare-feu (iptables/ufw)</li>
+                <li><i class="fa-solid fa-globe"></i> DNS (Bind9)</li>
+                <li><i class="fa-solid fa-server"></i> DHCP (ISC DHCP)</li>
+                <li><i class="fa-solid fa-arrows-left-right"></i> Proxy (Squid)</li>
            </ul>
+        </div>

-<h2>Code :</h2>
-<ul>
-    <li>HTML</li>
-    <li>CSS</li>
-    <li>JavaScript</li>
-    <li>PHP</li>
+        <!-- Scripting -->
+        <div class="skill-category">
+            <div class="skill-category-icon">
+                <i class="fa-solid fa-terminal"></i>
+            </div>
+            <h2>Scripting</h2>
+            <ul class="skill-list">
+                <li><i class="fa-solid fa-terminal"></i> Bash</li>
+                <li><i class="fa-brands fa-python"></i> Python</li>
+                <li><i class="fa-brands fa-java"></i> Java</li>
+                <li><i class="fa-solid fa-gears"></i> Ansible</li>
            </ul>
+        </div>

+        <!-- Applications -->
+        <div class="skill-category">
+            <div class="skill-category-icon">
+                <i class="fa-solid fa-cubes"></i>
+            </div>
+            <h2>Applications</h2>
+            <ul class="skill-list">
+                <li><i class="fa-solid fa-address-book"></i> LDAP (Windows AD)</li>
+                <li><i class="fa-solid fa-headset"></i> GLPI</li>
+                <li><i class="fa-solid fa-compact-disc"></i> FOG</li>
+                <li><i class="fa-solid fa-server"></i> Nginx / Apache</li>
+                <li><i class="fa-brands fa-docker"></i> Docker</li>
+                <li><i class="fa-solid fa-display"></i> Guacamole</li>
+                <li><i class="fa-solid fa-database"></i> MySQL / MariaDB</li>
+            </ul>
+        </div>

+        <!-- Développement web -->
+        <div class="skill-category">
+            <div class="skill-category-icon">
+                <i class="fa-solid fa-code"></i>
+            </div>
+            <h2>Développement web</h2>
+            <ul class="skill-list">
+                <li><i class="fa-brands fa-html5"></i> HTML</li>
+                <li><i class="fa-brands fa-css3-alt"></i> CSS</li>
+                <li><i class="fa-brands fa-js"></i> JavaScript</li>
+                <li><i class="fa-brands fa-php"></i> PHP</li>
+            </ul>
+        </div>

+        <!-- Virtualisation & Outils -->
+        <div class="skill-category">
+            <div class="skill-category-icon">
+                <i class="fa-solid fa-layer-group"></i>
+            </div>
+            <h2>Virtualisation &amp; Outils</h2>
+            <ul class="skill-list">
+                <li><i class="fa-solid fa-server"></i> Proxmox</li>
+                <li><i class="fa-solid fa-box"></i> VirtualBox</li>
+                <li><i class="fa-brands fa-git-alt"></i> Git (GitHub, Gitea)</li>
+            </ul>
+        </div>

+    </div>

-
-
+</section>

 <?php

@@ -2,19 +2,24 @@

 // Page affichant les différentes expériences pro (stages etc...)

+// Titre de l'onglet
+$pageTitle = 'Expériences';

 // On ajoute le header
 require_once('../elements/header.php');

 // Ajout d'un message indiquant si l'utilisateur est admin qu'il peut modifier ces expériences
 if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin') {
-    echo "<p style='color: white; text-align: center;'>Vous êtes administrateur, vous pouvez modifier les experiences <a href='../pages/admin.php'>ici</a>.</p>";
+    echo "<p class='admin-notice'>Vous êtes administrateur, vous pouvez modifier les experiences <a href='../pages/admin.php'>ici</a>.</p>";
 }

 // Affichages des xp pro
 ?>

-<p class="projects-title">Liste des expériences professionnelles</p>
+<div class="page-header">
+    <h1>Expériences professionnelles</h1>
+    <p>Mes stages et missions réalisées en entreprise.</p>
+</div>

 <?php
 require_once('../functions/listXP.php');
@@ -3,7 +3,7 @@ body {
        radial-gradient(circle at top, rgba(108, 99, 255, 0.18), transparent 35%),
        #0d0d0d;
    margin: 0;
-    font-family: Arial, sans-serif;
+    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    color: white;
    min-height: 100vh;
    display: flex;