Clément DUVAL — Projet 4 : Situation professionnelle</ <script> // Lightbox functions function openLightbox(imageSrc) { const lightbox = document.getElementById('lightbox'); const image = document.getElementById('lightboxImage'); image.src = imageSrc; lightbox.classList.add('active'); document.body.style.overflow = 'hidden'; } function closeLightbox(event) { if (event && event.target !== document.getElementById('lightbox')) return; document.getElementById('lightbox').classList.remove('active'); document.body.style.overflow = 'auto'; } // Fermer avec Escape document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeLightbox(); }); // Année & navigation document.getElementById('year').textContent = new Date().getFullYear(); const path = location.pathname.split('/').pop() || 'projets.html'; document.querySelectorAll('nav.menu a').forEach(a => { if (a.getAttribute('href') === path) a.setAttribute('aria-current', 'page'); }); // Animations (function(){ if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries)=>{ entries.forEach((entry)=>{ if(entry.isIntersecting){ entry.target.classList.add('is-visible'); io.unobserve(entry.target); } }); }, { rootMargin: '0px 0px -10% 0px', threshold: 0.1 }); els.forEach((el, i)=>{ el.style.transitionDelay = (i*60)+'ms'; io.observe(el); }); })(); </script>ta name="description" content="Détail du Projet 4 de Clément DUVAL : situation professionnelle (formulaire, validation, envoi), contexte, objectifs, rôle, résultats et captures." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <style> /* DA commune */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light dark; } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, sans-serif; line-height: 1.5; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } :root { --bg:#0b0b0d; --surface:#121216; --muted:#808497; --text:#f4f6fb; --primary:#5da8ff; --accent:#a1ffce; --ring:#5da8ff33; --card:#16171c; --shadow:0 10px 30px rgba(0,0,0,.25); --radius:16px; --container:1100px; } @media (prefers-color-scheme: light){ :root{ --bg:#f7f8fc; --surface:#ffffff; --card:#ffffff; --muted:#5b6471; --text:#0f1222; --shadow:0 10px 25px rgba(0,0,0,.08);} } body { background: radial-gradient(1200px 600px at 80% -10%, #5da8ff20, transparent 60%), radial-gradient(800px 400px at -10% 20%, #a1ffce20, transparent 50%), var(--bg); color: var(--text); } .container { max-width: var(--container); margin-inline: auto; padding-inline: 1.2rem; } header.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(140%) blur(8px); background: color-mix(in oklab, var(--bg) 80%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--muted) 30%, transparent); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; } .brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: .2px; } .brand-logo { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: inset 0 0 0 2px #00000020; background-size: 200% 200%; animation: shine 6s linear infinite; } .menu { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; } .menu a { padding: .5rem .75rem; border-radius: 10px; font-weight: 500; color: var(--muted); border: 1px solid transparent; } .menu a[aria-current="page"], .menu a:hover { color: var(--text); border-color: color-mix(in oklab, var(--muted) 25%, transparent); background: color-mix(in oklab, var(--surface) 70%, transparent); } .banner { position: relative; aspect-ratio: 16/6; background: #00000030; overflow: clip; } .banner img { width: 100%; height: 100%; object-fit: cover; filter: saturate(105%); transform: scale(1.02); } .banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #00000066 0%, #00000000 40%); } .hero { margin-top: -3.2rem; position: relative; z-index: 1; } .hero-card { background: color-mix(in oklab, var(--card) 92%, transparent); border: 1px solid color-mix(in oklab, var(--muted) 25%, transparent); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem; display: grid; gap: .6rem; } .kicker { display: inline-flex; gap: .5rem; align-items: center; padding: .25rem .6rem; border: 1px dashed color-mix(in oklab, var(--muted) 35%, transparent); border-radius: 999px; font-size: .85rem; color: var(--muted); } h1 { font-size: clamp(1.8rem, 1.2rem + 2.1vw, 2.6rem); margin: 0; } .lead { color: var(--muted); margin: 0; } .grid { display: grid; gap: 1rem; } .grid-2 { grid-template-columns: 1fr; } @media (min-width: 900px){ .grid-2 { grid-template-columns: 1.3fr .7fr; } } .card { background: color-mix(in oklab, var(--card) 90%, transparent); border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); } .meta { display: grid; gap: .6rem; } .meta-row { display: grid; grid-template-columns: 120px 1fr; gap: .6rem; align-items: start; } .meta-label { color: var(--muted); } .gallery { display: grid; grid-template-columns: 1fr; gap: .6rem; } @media (min-width: 760px){ .gallery { grid-template-columns: repeat(3, 1fr); } } .shot { aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--muted) 20%, transparent); box-shadow: var(--shadow); cursor: pointer; transition: transform .2s ease; } .shot:hover { transform: scale(1.02); } /* Lightbox */ .lightbox { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); z-index: 200; align-items: center; justify-content: center; padding: 1rem; animation: fadeIn .3s ease; } .lightbox.active { display: flex; } .lightbox-content { position: relative; max-width: 90vw; max-height: 90vh; } .lightbox img { max-width: 100%; max-height: 85vh; border-radius: var(--radius); box-shadow: 0 25px 60px rgba(0,0,0,.8); } .lightbox-close { position: absolute; top: -2.5rem; right: 0; background: none; border: none; font-size: 2.5rem; cursor: pointer; color: white; transition: color .2s; } .lightbox-close:hover { color: var(--accent); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .btn { display:inline-flex; align-items:center; gap:.55rem; padding:.65rem 1rem; border-radius:999px; border:1px solid color-mix(in oklab, var(--primary) 35%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 80%, transparent), color-mix(in oklab, #000 10%, transparent)); box-shadow: var(--shadow); } .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px #00000040; border-color: var(--primary); } .btn.primary { background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 35%, var(--surface)), color-mix(in oklab, var(--primary) 15%, #000)); border-color: color-mix(in oklab, var(--primary) 60%, transparent); } footer { margin-top: 3rem; padding: 2rem 0; border-top: 1px solid color-mix(in oklab, var(--muted) 25%, transparent); color: var(--muted); } @keyframes shine { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } .reveal { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .7s ease, transform .7s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important } .reveal{ opacity:1 !important; transform:none !important } .brand-logo{ animation:none !important } } </style> </head> <body> <header class="site-header"> <div class="container nav"> <a href="index.html" class="brand" aria-label="Page d'accueil"> <span class="brand-logo" aria-hidden="true"></span> <span>Clément DUVAL</span> </a> <nav aria-label="Navigation principale" class="menu" id="menu"> <a href="index.html">Accueil</a> <a href="projets.html">Projets</a> <a href="stages.html">Stages</a> <a href="tableau.html">Tableau de Compétence</a> <a href="veille.html">Veille</a> <a href="contact.html">Contact</a> </nav> </div> </header> <div class="banner reveal" aria-label="Bannière visuelle du projet 4"> <img src="assets/projets/screenshot2.png" alt="Aperçu visuel de la situation professionnelle" loading="eager" /> </div> <main id="contenu" class="container" style="padding-top: 0;"> <section class="hero"> <div class="hero-card reveal"> <span class="kicker">Projet 2</span> <h1>GLPI</h1> <p class="lead">Dans le cadre d’un TP en cours, nous avons dû mettre en place unserveur GLPI afin de nous entraîner à gérer un patrimoine informatique.</p> <div class="grid" style="grid-template-columns: 1fr auto; align-items: center; gap:.8rem;"> <nav aria-label="Fil d’Ariane" style="color:var(--muted)"><a href="index.html">Accueil</a> / <a href="projets.html">Projets</a> / <span aria-current="page">Projet 2</span></nav> <div style="display:flex; gap:.6rem; flex-wrap:wrap; justify-content:flex-end;"> <a class="btn" href="#galerie">Voir les captures</a> <a class="btn primary" href="#resultats">Aller aux résultats</a> </div> </div> </div> </section> <section class="grid grid-2" style="margin-top:1rem;"> <article class="card reveal"> <h2>Contexte</h2> <p> Dans le cadre d’un TP en cours, nous avons dû mettre en place un <strong>serveur GLPI</strong> afin de nous entraîner à gérer un patrimoine informatique. GLPI (Gestionnaire Libre de Parc Informatique) est un outil utilisé en entreprise pour recenser le matériel, suivre les tickets d’incidents et administrer les ressources informatiques. </p> <h2>Objectifs</h2> <ul> <li>Installer et configurer <strong>GLPI</strong> sur un serveur dédié (Linux/Apache/PHP/MySQL).</li> <li>Mettre en place la <strong>base de données</strong> et initialiser le schéma.</li> <li>Créer et gérer des <strong>comptes utilisateurs</strong> avec différents rôles (admin, technicien, utilisateur).</li> <li>Simuler la <strong>gestion d’un parc informatique</strong> : ajout de postes, serveurs, périphériques.</li> <li>Découvrir la <strong>gestion de tickets</strong> (création, suivi, résolution).</li> </ul> <h2>Mon rôle</h2> <p> J’ai participé à l’installation et à la configuration de GLPI sur le serveur. Mon rôle a surtout consisté à <strong>gérer la configuration du service web</strong> (Apache/PHP) et à <strong>paramétrer GLPI</strong> pour que la gestion des utilisateurs et des équipements soit fonctionnelle. J’ai également contribué aux tests : création de tickets, ajout de postes et attribution à des techniciens. </p> <h2 id="resultats">Résultats</h2> <ul> <li>Serveur GLPI fonctionnel, accessible via le navigateur.</li> <li>Gestion des <strong>utilisateurs et rôles</strong> mise en place.</li> <li>Patrimoine informatique simulé avec plusieurs machines et périphériques.</li> <li>Gestion de tickets opérationnelle (création, suivi, clôture).</li> </ul> <h2>Preuves / livrables</h2> <ul> <li><strong>Captures d’écran</strong> de l’installation et des interfaces (connexion, parc, tickets).</li> <li><strong>Documentation</strong> d’installation et de configuration (résumé des étapes).</li> </ul> </article> <aside class="card reveal" aria-label="Informations du projet"> <div class="meta"> <div class="meta-row"><span class="meta-label">Période</span><span>2025</span></div> <div class="meta-row"><span class="meta-label">Technos</span><span>Linux · Apache · PHP · MySQL · GLPI</span></div> <div class="meta-row"><span class="meta-label">Méthode</span><span>Installation pas à pas · Configuration · Tests fonctionnels</span></div> </span></div> </div> </aside> </section> <section id="galerie" class="card reveal" style="margin-top:1rem;"> <h2>Galerie (captures)</h2> <div class="gallery" style="margin-top:.6rem;"> <img class="shot" src="assets/projets/1.webp" alt="Capture 1 du projet 4" loading="lazy" onclick="openLightbox(this.src)" /> <img class="shot" src="assets/projets/2.png" alt="Capture 2 du projet 4" loading="lazy" onclick="openLightbox(this.src)" /> <img class="shot" src="assets/projets/3.jpeg" alt="Capture 3 du projet 4" loading="lazy" onclick="openLightbox(this.src)" /> </div> </section> <section class="card reveal" style="margin-top:1rem;"> <h2>Bilan</h2> <p> Ce projet m’a permis de découvrir et de pratiquer la mise en place d’un <strong>outil professionnel réel</strong> utilisé dans la gestion de parc informatique. J’ai appris à <strong>installer et configurer un serveur complet</strong> (Linux, Apache, PHP, MySQL) et à comprendre le fonctionnement de GLPI pour gérer des utilisateurs, du matériel et des tickets. </p> </section> <nav class="reveal" style="margin:1rem 0; display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap;"> <a class="btn" href="projets.html">← Retour aux projets</a> <div style="display:flex; gap:.6rem;"> <a class="btn" href="projet-1.html">Projet 1</a> <a class="btn" href="projet-2.html">Projet 2</a> <a class="btn" href="projet-3.html">Projet 3</a> </div> </nav> </main>  <div id="lightbox" class="lightbox" onclick="closeLightbox(event)"> <div class="lightbox-content" onclick="event.stopPropagation()"> <button class="lightbox-close" onclick="closeLightbox()">✕</button> <img id="lightboxImage" src="" alt="Image agrandie" /> </div> </div> <footer> <div class="container" style="display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;"> <p>© <span id="year"></span> Clément DUVAL. Tous droits réservés.</p> <p></p> </div> </footer> <script> document.getElementById('year').textContent = new Date().getFullYear(); const path = 'projets.html'; document.querySelectorAll('nav.menu a').forEach(a => { if (a.getAttribute('href') === path) a.setAttribute('aria-current', 'page'); }); (function(){ if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries)=>{ entries.forEach((entry)=>{ if(entry.isIntersecting){ entry.target.classList.add('is-visible'); io.unobserve(entry.target); } }); }, { rootMargin: '0px 0px -10% 0px', threshold: 0.1 }); els.forEach((el, i)=>{ el.style.transitionDelay = (i*60)+'ms'; io.observe(el); }); })(); </script> </body> </html>