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
captcha.php
+3
View File
@@ -329,6 +329,9 @@ $attemptsLeft = $round['attempts_left'] ?? 0;
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test anti-robot</title> <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"> <link rel="stylesheet" href="./styles/captcha.css">
</head> </head>
<body class="<?php echo $success ? 'success-mode' : ''; ?>"> <body class="<?php echo $success ? 'success-mode' : ''; ?>">
elements/footer.php
+3
View File
@@ -19,3 +19,6 @@
</div> </div>
</div> </div>
</footer> </footer>
</body>
</html>
elements/header.php
+60 -16
View File
@@ -13,25 +13,56 @@ require_once('../scripts/requireCaptcha.php');
// Ajout des logs sur toutes les pages // Ajout des logs sur toutes les pages
require_once('../functions/sendLogs.php'); require_once('../functions/sendLogs.php');
?>
<!-- Ajout du CSS Primaire (fait par IA) --> // Titre de la page : chaque page peut définir $pageTitle avant d'inclure le header
<link rel="stylesheet" href="../styles/primary_css.css"> $pageTitle = isset($pageTitle) ? $pageTitle . ' — Esteban MOUSSU' : 'Esteban MOUSSU — Portfolio';
<!-- 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"> // 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 + nav -->
<header> <header class="site-header">
<!-- Texte qui sera dans le header --> <!-- Texte qui sera dans le header -->
<a href="./../index.php" class="titre-de-page">Esteban MOUSSU - PortFolio</a> <a href="./../index.php" class="titre-de-page">Esteban MOUSSU - PortFolio</a>
<div class="header-right">
<!-- Module de navigation --> <!-- Module de navigation -->
<nav> <nav class="site-nav">
<a href="./../index.php">Accueil</a> <a href="./../pages/home.php" class="<?php echo ($currentPage === 'home.php') ? 'active' : ''; ?>">Accueil</a>
<a href="./../pages/projects.php">Projets</a> <a href="./../pages/projects.php" class="<?php echo ($currentPage === 'projects.php') ? 'active' : ''; ?>">Projets</a>
<a href="./../pages/xp.php">Expériences</a> <a href="./../pages/xp.php" class="<?php echo ($currentPage === 'xp.php') ? 'active' : ''; ?>">Expériences</a>
<a href="./../pages/skills.php">Compétences</a> <a href="./../pages/skills.php" class="<?php echo ($currentPage === 'skills.php') ? 'active' : ''; ?>">Compétences</a>
<a href="./../pages/contact.php">Contact</a> <a href="./../pages/contact.php" class="<?php echo ($currentPage === 'contact.php') ? 'active' : ''; ?>">Contact</a>
<?php <?php
// Vérification que l'utilisateur est admin, s'il est admin, il aura accès au panel admin // 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') { if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'admin') {
@@ -40,7 +71,7 @@ require_once('../functions/sendLogs.php');
?> ?>
<!-- Lien vers le panneau admin --> <!-- 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 <?php
} }
@@ -51,18 +82,31 @@ require_once('../functions/sendLogs.php');
if (isset($_SESSION['user_id'])){ if (isset($_SESSION['user_id'])){
?> ?>
<a href="../scripts/disconnect.php">Deconnexion</a> <a href="../scripts/disconnect.php" class="nav-cta">Deconnexion</a>
<?php <?php
} else { } 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 <?php
} }
?> ?>
<!-- Fonctionnalité future changement de thème dark / light et panneau admin -->
</nav> </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> </header>
<main> <main>
pages/admin.php
+3
View File
@@ -1,4 +1,7 @@
<?php <?php
// Titre de l'onglet
$pageTitle = 'Administration';
// On ajoute ici le header // On ajoute ici le header
require_once('./../elements/header.php'); require_once('./../elements/header.php');
pages/cgu.php
+6 -2
View File
@@ -1,11 +1,15 @@
<?php <?php
// CGU / CDU // CGU / CDU
// Titre de l'onglet
$pageTitle = 'Conditions générales d\'utilisation';
require_once('./../elements/header.php'); require_once('./../elements/header.php');
?> ?>
<main class="cgu-page"> <div class="cgu-page">
<section class="cgu-card"> <section class="cgu-card">
<h1> Conditions générales d'utilisation </h1> <h1> Conditions générales d'utilisation </h1>
<h2> Dernière mise à jour : 29 juin 2026</h2> <h2> Dernière mise à jour : 29 juin 2026</h2>
@@ -57,7 +61,7 @@ require_once('./../elements/header.php');
<h3> 12. Droit applicable</h3> <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> <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> </section>
</main> </div>
<?php <?php
require_once('../elements/footer.php'); require_once('../elements/footer.php');
pages/contact.php
+29 -27
View File
@@ -1,39 +1,41 @@
<?php <?php
// Formulaire de contact avec WEBHOOK Discord // Formulaire de contact avec WEBHOOK Discord
// Titre de l'onglet
$pageTitle = 'Contact';
// On ajoute ici le header // On ajoute ici le header
require_once("../elements/header.php"); require_once("../elements/header.php");
?> ?>
<body> <div class="contact-page">
<main class="contact-page"> <section class="contact-wrapper">
<section class="contact-wrapper"> <div class="contact-card">
<div class="contact-card"> <div class="contact-info">
<div class="contact-info"> <p class="contact-title">Contact</p>
<p class="contact-title">Contact</p> <p class="contact-name">Moussu Esteban</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">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">20 Grande rue</p> <p class="contact-line">52500 Broncourt</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> </div>
<!-- Formulaire d'envoi --> <input type="email" name="mail" id="mail" placeholder="E-mail de contact" required>
<form class="contact-form" method="POST" action="../scripts/sendMessage.php"> <textarea name="message" id="message" placeholder="Votre message" required></textarea>
<!-- 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> <!-- Bouton d'envoi -->
<textarea name="message" id="message" placeholder="Votre message" required></textarea> <input type="submit" value="Envoyer le message">
</form>
<!-- Bouton d'envoi --> </div>
<input type="submit" value="Envoyer le message"> </section>
</form> </div>
</div>
</section>
</main>
</body>
<?php <?php
// Ajout du footer // Ajout du footer
pages/home.php
+17 -1
View File
@@ -3,6 +3,8 @@
// Page Home PortFolio Esteban // 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... // 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 // Insertion du header
require_once('./../elements/header.php'); 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. (Ctrl + F5 ou Cmd + Shift + R) pour voir les dernières modifications.
</p> </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 d'exploration rapide -->
<section class="quick-links-section"> <section class="quick-links-section">
<div class="quick-links-header"> <div class="quick-links-header">
@@ -50,7 +66,7 @@ require_once('./../elements/header.php');
</div> </div>
<h3>Compétences</h3> <h3>Compétences</h3>
<!-- Page où il y aura toutes mes compétences --> <!-- 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>
<a href="../pages/contact.php" class="quick-link-card"> <a href="../pages/contact.php" class="quick-link-card">
pages/login.php
+2 -5
View File
@@ -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 // 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) // 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 // On ajoute ici le Header
require_once('./../elements/header.php'); require_once('./../elements/header.php');
@@ -16,8 +17,6 @@ if (isset($_SESSION['user_id'])){
?> ?>
<body>
<!-- CSS Login (fait par Intelligence Arti) --> <!-- CSS Login (fait par Intelligence Arti) -->
<div class="login-container"> <div class="login-container">
<div class="login-card"> <div class="login-card">
@@ -38,8 +37,6 @@ if (isset($_SESSION['user_id'])){
</div> </div>
</div> </div>
</body>
<?php <?php
// Ajout du footer // Ajout du footer
pages/projects.php
+7 -2
View File
@@ -3,18 +3,23 @@
// Page affichant les différents projets personnels / scolaires / professionnels // Page affichant les différents projets personnels / scolaires / professionnels
// On pourrait également rajouter des tags comme "En cours" ou même "En reflexion"... // On pourrait également rajouter des tags comme "En cours" ou même "En reflexion"...
// Titre de l'onglet
$pageTitle = 'Projets';
// On ajoute le header // On ajoute le header
require_once('../elements/header.php'); require_once('../elements/header.php');
// Ajout d'un message indiquant si l'utilisateur est admin qu'il peut modifier ces projets // Ajout d'un message indiquant si l'utilisateur est admin qu'il peut modifier ces projets
if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin') { 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 // 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 <?php
pages/skills.php
+91 -26
View File
@@ -2,6 +2,8 @@
// Compétences // Compétences
// Titre de l'onglet
$pageTitle = 'Compétences';
// On ajoute ici le header // On ajoute ici le header
require_once('./../elements/header.php'); require_once('./../elements/header.php');
@@ -9,42 +11,105 @@ require_once('./../elements/header.php');
?> ?>
<!-- Contenu de la page skills --> <!-- Contenu de la page skills -->
<section class="skills-section">
<div class="container"> <div class="skills-header">
<h1>Compétences</h1> <h1>Compétences</h1>
</div> <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> <div class="skills-grid">
<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>
<h2>Réseaux :</h2> <!-- Systèmes d'exploitation -->
<ul> <div class="skill-category">
<li>Adressage IP</li> <div class="skill-category-icon">
<li>VLAN</li> <i class="fa-solid fa-computer"></i>
<li><i class="fa-brands fa-cloudflare"></i> Pare-feu</li> </div>
<li>DNS (Bind9)</li> <h2>Systèmes d'exploitation</h2>
<li>DHCP (ISC DHCP)</li> <ul class="skill-list">
<li>Proxy (Proxy Squid)</li> <li><i class="fa-brands fa-microsoft"></i> Windows (Serveur/XP/8/10/11)</li>
</ul> <li><i class="fa-brands fa-linux"></i> Linux (Debian/Ubuntu)</li>
<li><i class="fa-brands fa-apple"></i> macOS</li>
<h2>Code :</h2> </ul>
<ul> </div>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
<!-- 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 <?php
pages/xp.php
+7 -2
View File
@@ -2,19 +2,24 @@
// Page affichant les différentes expériences pro (stages etc...) // Page affichant les différentes expériences pro (stages etc...)
// Titre de l'onglet
$pageTitle = 'Expériences';
// On ajoute le header // On ajoute le header
require_once('../elements/header.php'); require_once('../elements/header.php');
// Ajout d'un message indiquant si l'utilisateur est admin qu'il peut modifier ces expériences // Ajout d'un message indiquant si l'utilisateur est admin qu'il peut modifier ces expériences
if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin') { 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 // 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 <?php
require_once('../functions/listXP.php'); require_once('../functions/listXP.php');
styles/captcha.css
+1 -1
View File
@@ -3,7 +3,7 @@ body {
radial-gradient(circle at top, rgba(108, 99, 255, 0.18), transparent 35%), radial-gradient(circle at top, rgba(108, 99, 255, 0.18), transparent 35%),
#0d0d0d; #0d0d0d;
margin: 0; margin: 0;
font-family: Arial, sans-serif; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
color: white; color: white;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
styles/primary_css.css
+755 -330
View File
File diff suppressed because it is too large Load Diff