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>
This commit is contained in:
co-authored by
Claude Fable 5
parent
9bbc05bcac
commit
e50eeacaeb
@@ -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' : ''; ?>">
|
||||||
|
|||||||
+4
-1
@@ -18,4 +18,7 @@
|
|||||||
<a href="../pages/cgu.php">CGU</a>
|
<a href="../pages/cgu.php">CGU</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+65
-21
@@ -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 différentes pages : Acceuil, Projets, Contact
|
||||||
// Rappel des boutons : Connexion, (Si le temps) Panneau Administrateur (Seulement si l'utilisateur est admin)
|
// 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
|
// 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,29 +71,42 @@ 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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Vérification si l'utilisateur est connecté, si c'est le cas au lieu de Connexion il aura Deconnexion
|
// Vérification si l'utilisateur est connecté, si c'est le cas au lieu de Connexion il aura Deconnexion
|
||||||
|
|
||||||
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>
|
||||||
|
|||||||
@@ -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');
|
||||||
|
|
||||||
|
|||||||
+6
-2
@@ -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');
|
||||||
|
|||||||
+30
-28
@@ -1,41 +1,43 @@
|
|||||||
<?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
|
||||||
require_once("../elements/footer.php");
|
require_once("../elements/footer.php");
|
||||||
?>
|
?>
|
||||||
|
|||||||
+17
-1
@@ -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">
|
||||||
|
|||||||
+3
-6
@@ -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,9 +37,7 @@ if (isset($_SESSION['user_id'])){
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
|
|
||||||
// Ajout du footer
|
// Ajout du footer
|
||||||
require_once('../elements/footer.php'); ?>
|
require_once('../elements/footer.php'); ?>
|
||||||
|
|||||||
+9
-4
@@ -1,20 +1,25 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
// 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
|
||||||
|
|
||||||
@@ -25,4 +30,4 @@ require_once('../functions/listProject.php');
|
|||||||
afficherProjets();
|
afficherProjets();
|
||||||
|
|
||||||
// Ajout du footer
|
// Ajout du footer
|
||||||
require_once('../elements/footer.php'); ?>
|
require_once('../elements/footer.php'); ?>
|
||||||
|
|||||||
+92
-27
@@ -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,44 +11,107 @@ 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 & 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
|
||||||
|
|
||||||
// Ajout du footer
|
// Ajout du footer
|
||||||
require_once('../elements/footer.php'); ?>
|
require_once('../elements/footer.php'); ?>
|
||||||
|
|||||||
+9
-4
@@ -1,20 +1,25 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
// 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');
|
||||||
@@ -24,4 +29,4 @@ require_once('../functions/listXP.php');
|
|||||||
afficherXP();
|
afficherXP();
|
||||||
|
|
||||||
// Ajout du footer
|
// Ajout du footer
|
||||||
require_once('../elements/footer.php'); ?>
|
require_once('../elements/footer.php'); ?>
|
||||||
|
|||||||
+1
-1
@@ -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;
|
||||||
|
|||||||
+755
-330
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user