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
@@ -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,41 +1,43 @@
 <?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">
-        <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">52500 Broncourt</p>
+<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"><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>
+
+            <!-- Formulaire d'envoi -->
+            <form class="contact-form" method="POST" action="../scripts/sendMessage.php">
+                <!-- Deux champs de texte, un subject et un message -->
+                <div class="contact-grid">
+                    <input type="text" name="subject" id="subject" placeholder="Sujet du message" required>
+                    <input type="text" name="name" id="name" placeholder="Nom et prénom" required>
                </div>

-                <!-- Formulaire d'envoi -->
-                <form class="contact-form" method="POST" action="../scripts/sendMessage.php">
-                    <!-- Deux champs de texte, un subject et un message -->
-                    <div class="contact-grid">
-                        <input type="text" name="subject" id="subject" placeholder="Sujet du message" required>
-                        <input type="text" name="name" id="name" placeholder="Nom et prénom" required>
-                    </div>
+                <input type="email" name="mail" id="mail" placeholder="E-mail de contact" required>
+                <textarea name="message" id="message" placeholder="Votre message" required></textarea>

-                    <input type="email" name="mail" id="mail" placeholder="E-mail de contact" required>
-                    <textarea name="message" id="message" placeholder="Votre message" required></textarea>
-
-                    <!-- Bouton d'envoi -->
-                    <input type="submit" value="Envoyer le message">
-                </form>
-            </div>
-        </section>
-    </main>
-</body>
+                <!-- Bouton d'envoi -->
+                <input type="submit" value="Envoyer le message">
+            </form>
+        </div>
+    </section>
+</div>

 <?php
 // Ajout du footer
 require_once("../elements/footer.php");
-?>
+?>
@@ -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,9 +37,7 @@ if (isset($_SESSION['user_id'])){
    </div>
 </div>

-</body>
-
 <?php

 // Ajout du footer
-require_once('../elements/footer.php'); ?>
+require_once('../elements/footer.php'); ?>
@@ -1,20 +1,25 @@
-<?php 
+<?php

 // 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

@@ -25,4 +30,4 @@ require_once('../functions/listProject.php');
 afficherProjets();

 // Ajout du footer
-require_once('../elements/footer.php'); ?>
+require_once('../elements/footer.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,44 +11,107 @@ require_once('./../elements/header.php');
 ?>

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

-<div class="container">
-    <h1>Compétences</h1>
-</div>
+    <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>
-    <li><i class="fa-brands fa-apple"></i> macOS</li>
-</ul>
+    <div class="skills-grid">

-<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>
-</ul>
-
-<h2>Code :</h2>
-<ul>
-    <li>HTML</li>
-    <li>CSS</li>
-    <li>JavaScript</li>
-    <li>PHP</li>
-</ul>
+        <!-- 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>

+        <!-- 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>

+        <!-- 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

 // Ajout du footer
-require_once('../elements/footer.php'); ?>
+require_once('../elements/footer.php'); ?>
@@ -1,20 +1,25 @@
-<?php 
+<?php

 // 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');
@@ -24,4 +29,4 @@ require_once('../functions/listXP.php');
 afficherXP();

 // Ajout du footer
-require_once('../elements/footer.php'); ?>
+require_once('../elements/footer.php'); ?>