ewengadonnaud.xyz/portfolio.html

675 lines
35 KiB
HTML

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Portfolio - Mes Projets</title>
<meta
name="description"
content="Découvrez mes projets en réseau, développement web, cybersécurité et systèmes Linux"
/>
<meta
name="keywords"
content="portfolio, projets informatiques, réseaux, développement web, cybersécurité"
/>
<!-- Favicons -->
<link
rel="apple-touch-icon"
sizes="57x57"
href="assets/img/favicons.ico/"
/>
<link
rel="apple-touch-icon"
sizes="60x60"
href="assets/img/favicons.ico/apple-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="assets/img/favicons.ico/apple-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href="assets/img/favicons.ico/apple-icon-76x76.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="assets/img/favicons.ico/apple-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="assets/img/favicons.ico/apple-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="assets/img/favicons.ico/apple-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="assets/img/favicons.ico/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/img/favicons.ico/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="assets/img/favicons.ico/android-icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/img/favicons.ico/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="assets/img/favicons.ico/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="assets/img/favicons.ico/favicon-16x16.png"
/>
<link rel="manifest" href="assets/img/favicons.ico/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta
name="msapplication-TileImage"
content="assets/img/favicons.ico/ms-icon-144x144.png"
/>
<meta name="theme-color" content="#ffffff" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect" />
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<!-- Vendor CSS Files -->
<link
href="assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
href="assets/vendor/bootstrap-icons/bootstrap-icons.css"
rel="stylesheet"
/>
<link href="assets/vendor/aos/aos.css" rel="stylesheet" />
<link
href="assets/vendor/swiper/swiper-bundle.min.css"
rel="stylesheet"
/>
<link
href="assets/vendor/glightbox/css/glightbox.min.css"
rel="stylesheet"
/>
<!-- Main CSS File -->
<link href="assets/css/main.css" rel="stylesheet" />
</head>
<body class="portfolio-page">
<header
id="header"
class="header d-flex align-items-center light-background sticky-top"
>
<canvas class="matrix-bg-header" aria-hidden="true"></canvas>
<div
class="container position-relative d-flex align-items-center justify-content-between"
>
<nav id="navmenu" class="navmenu">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="about.html">À propos de moi</a></li>
<li>
<a href="portfolio.html" class="active">Projets</a>
</li>
<li><a href="formation.html">Formation</a></li>
<li><a href="resume.html">Mon CV</a></li>
<li><a href="services.html">Mes services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
</nav>
<div class="header-social-links">
<a
href="https://www.linkedin.com/in/ewen-gadonnaud-b17491283"
class="linkedin"
target="_blank"
rel="noopener noreferrer"
aria-label="LinkedIn"
><i class="bi bi-linkedin"></i
></a>
<a
href="https://github.com/Azuneer"
class="github"
target="_blank"
rel="noopener noreferrer"
aria-label="GitHub"
><i class="bi bi-github"></i
></a>
</div>
</div>
</header>
<main class="main">
<!-- Portfolio Section -->
<section id="portfolio" class="portfolio section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>Portfolio</h2>
<p>
Découvrez mes différents projets réalisés dans les
domaines des réseaux informatiques, du cloud computing,
du développement
web, de la cybersécurité et des systèmes Linux. Chaque
projet reflète ma passion pour l'informatique et mon
engagement à développer des compétences techniques
solides.
</p>
</div>
<!-- End Section Title -->
<!-- Projets académiques — Lycée Paul Louis Courier -->
<div class="container mt-5" data-aos="fade-up" data-aos-delay="100">
<div class="text-center mb-5">
<h3 class="section-subtitle"><i class="bi bi-building me-2"></i>Projets académiques — Lycée Paul Louis Courier</h3>
<p class="section-subtitle">Projets réalisés dans le cadre de ma formation au BTS SIO option SISR</p>
</div>
<div class="row gy-4 justify-content-center">
<!-- Contexte IMDEO -->
<div class="col-lg-5 col-md-6 portfolio-item">
<div class="portfolio-card">
<div class="portfolio-img" style="background: #ffffff; min-height: 220px; display: flex; align-items: center; justify-content: center;">
<img src="assets/img/imdeo.png" alt="Logo IMDEO" style="max-height: 180px; max-width: 80%; object-fit: contain;">
<div class="portfolio-overlay">
<a href="#" class="portfolio-details-link" title="Voir le contexte IMDEO"><i class="bi bi-link"></i></a>
</div>
</div>
<div class="portfolio-info">
<h4>Contexte IMDEO</h4>
<p>Conception et déploiement d'une infrastructure réseau complète pour IMDEO (Groupe Hervé) : routage inter-VLAN, services réseaux, administration de serveurs Debian et durcissement de la sécurité système.</p>
<div class="portfolio-tags">
<span>Atelier Professionnel</span>
<span>Réseaux</span>
<span>Debian</span>
</div>
</div>
</div>
</div>
<!-- Contexte Mille-Nuits -->
<div class="col-lg-5 col-md-6 portfolio-item">
<div class="portfolio-card">
<div class="portfolio-img" style="background: #ffffff; min-height: 220px; display: flex; align-items: center; justify-content: center;">
<img src="assets/img/millenuits.png" alt="Logo Mille-Nuits" style="max-height: 180px; max-width: 80%; object-fit: contain;">
<div class="portfolio-overlay">
<a href="https://azuneer.github.io/millenuits-docs/sp3mission2/" target="_blank" rel="noopener noreferrer" class="portfolio-details-link" title="Voir la documentation MKDocs"><i class="bi bi-link"></i></a>
</div>
</div>
<div class="portfolio-info">
<h4>Contexte Mille-Nuits</h4>
<p>Refonte complète de l'infrastructure informatique de Millenuits : segmentation réseau (VLAN), déploiement automatisé, centralisation des services (AD/DHCP) et mise en place d'une DMZ Docker pour les développeurs.</p>
<div class="portfolio-tags">
<span>Atelier Professionnel</span>
<span>VLAN</span>
<span>Docker</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Séparateur -->
<div class="container my-5">
<div class="d-flex align-items-center justify-content-center gap-3">
<hr style="flex: 1; max-width: 200px; opacity: 0.2; border-top: 1px solid currentColor;">
<i class="bi bi-collection" style="color: var(--accent-color); font-size: 1.5rem;"></i>
<hr style="flex: 1; max-width: 200px; opacity: 0.2; border-top: 1px solid currentColor;">
</div>
<div class="text-center mt-3">
<h2 class="section-subtitle" style="font-size: 1.75rem;">Tous mes autres projets</h2>
</div>
</div>
<!-- Section Isotope : Autres projets -->
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div
class="isotope-layout"
data-default-filter="*"
data-layout="masonry"
data-sort="original-order"
>
<ul
class="portfolio-filters isotope-filters"
data-aos="fade-up"
data-aos-delay="200"
>
<li data-filter="*" class="filter-active">Tous</li>
<li data-filter=".filter-reseaux">Réseaux</li>
<li data-filter=".filter-developpement">
Développement
</li>
<li data-filter=".filter-systemes">Systèmes</li>
<li data-filter=".filter-cybersecurite">
Cybersécurité
</li>
<li data-filter=".filter-cloud">
Cloud
</li>
</ul>
<!-- End Portfolio Filters -->
<div
class="row gy-4 isotope-container"
data-aos="fade-up"
data-aos-delay="300"
>
<!-- Projet 1: Architecture 3-tiers AWS -->
<div
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-cloud filter-reseaux filter-systemes"
>
<div class="portfolio-card">
<div class="portfolio-img">
<img
src="assets/img/portfolio/VignesDuVal.png"
alt="Architecture 3-tiers AWS"
class="img-fluid"
/>
<div class="portfolio-overlay">
<a
href="assets/img/portfolio/VignesDuVal.png"
class="glightbox portfolio-lightbox"
><i class="bi bi-plus"></i
></a>
<a
href="assets/img/portfolio/laboAWS.pdf"
target="_blank"
rel="noopener noreferrer"
class="portfolio-details-link"
title="Voir le compte rendu du laboratoire"
><i class="bi bi-link"></i
></a>
</div>
</div>
<div class="portfolio-info">
<h4>Laboratoire Vignes DuVal - Architecture 3-tiers AWS</h4>
<p>Laboratoire de réflexion d'une architecture 3-tiers et implémentation d'une architecture "Free Tier AWS"</p>
<div class="portfolio-tags">
<span>Cloud</span>
<span>Systèmes</span>
<span>Réseaux</span>
<span>Routage</span>
</div>
</div>
</div>
</div>
<!-- Projet 2: Réseau GNS3 -->
<div
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-reseaux filter-systemes"
>
<div class="portfolio-card">
<div class="portfolio-img">
<img
src="assets/img/portfolio/portfolio-reseau-gns3.webp"
alt="Réseau informatique GNS3"
class="img-fluid"
/>
<div class="portfolio-overlay">
<a
href="assets/img/portfolio/portfolio-reseau-gns3.webp"
class="glightbox portfolio-lightbox"
><i class="bi bi-plus"></i
></a>
<a
href="https://hackmd.io/@azuneer/ry-VhNgJ0"
target="_blank"
rel="noopener noreferrer"
class="portfolio-details-link"
title="Voir le compte rendu"
><i class="bi bi-link"></i
></a>
</div>
</div>
<div class="portfolio-info">
<h4>Réseau d'Entreprise sous GNS3</h4>
<p>Infrastructure réseau complète</p>
<div class="portfolio-tags">
<span>Réseaux</span>
<span>GNS3</span>
<span>VLANs</span>
<span>Routage</span>
</div>
</div>
</div>
</div>
<!-- Projet 3: Site concours photo -->
<div
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-developpement"
>
<div class="portfolio-card">
<div class="portfolio-img">
<img
src="assets/img/portfolio/portfolio-concours-photo.webp"
alt="Site de concours photo"
class="img-fluid"
/>
<div class="portfolio-overlay">
<a
href="assets/img/portfolio/portfolio-concours-photo.webp"
class="glightbox portfolio-lightbox"
><i class="bi bi-plus"></i
></a>
<a
href="https://github.com/Azuneer/sae203-concoursphoto"
target="_blank"
rel="noopener noreferrer"
class="portfolio-details-link"
title="Voir sur GitHub"
><i class="bi bi-link"></i
></a>
</div>
</div>
<div class="portfolio-info">
<h4>Site de Concours Photo</h4>
<p>
Application web avec système de vote
</p>
<div class="portfolio-tags">
<span>PHP</span>
<span>SQL</span>
<span>HTML/CSS</span>
</div>
</div>
</div>
</div>
<!-- Projet 4: Podcast Blastpass -->
<div
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-cybersecurite"
>
<div class="portfolio-card">
<div class="portfolio-img">
<img
src="assets/img/portfolio/portfolio-blastpass.webp"
alt="Veille cybersécurité Blastpass"
class="img-fluid"
/>
<div class="portfolio-overlay">
<a
href="assets/img/portfolio/portfolio-blastpass.webp"
class="glightbox portfolio-lightbox"
><i class="bi bi-plus"></i
></a>
<a
href="assets/podcastscript.html"
class="portfolio-details-link"
title="Lire le compte rendu"
><i class="bi bi-link"></i
></a>
</div>
</div>
<div class="portfolio-info">
<h4>Veille - Faille Blastpass</h4>
<p>Analyse de vulnérabilité zero-day</p>
<div class="portfolio-tags">
<span>Cybersécurité</span>
<span>Veille</span>
<span>Zero-day</span>
</div>
</div>
</div>
</div>
<!-- Projet 5: Répertoire /proc -->
<div
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-systemes filter-developpement"
>
<div class="portfolio-card">
<div class="portfolio-img">
<img
src="assets/img/portfolio/portfolio-proc-linux.webp"
alt="Étude du répertoire /proc Linux"
class="img-fluid"
/>
<div class="portfolio-overlay">
<a
href="assets/img/portfolio/portfolio-proc-linux.webp"
class="glightbox portfolio-lightbox"
><i class="bi bi-plus"></i
></a>
<a
href="https://github.com/Azuneer/sae15-proc"
target="_blank"
rel="noopener noreferrer"
class="portfolio-details-link"
title="Voir sur GitHub"
><i class="bi bi-link"></i
></a>
</div>
</div>
<div class="portfolio-info">
<h4>Exploration du Répertoire /proc</h4>
<p>Visualisation système avec Python</p>
<div class="portfolio-tags">
<span>Linux</span>
<span>Python</span>
<span>Systèmes</span>
</div>
</div>
</div>
</div>
<!-- Projet 6: Site Cinéma -->
<div
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-developpement"
>
<div class="portfolio-card">
<div class="portfolio-img">
<img
src="assets/img/portfolio/portfolio-cinema.webp"
alt="Site de gestion de base de données cinéma"
class="img-fluid"
/>
<div class="portfolio-overlay">
<a
href="assets/img/portfolio/portfolio-cinema.webp"
class="glightbox portfolio-lightbox"
><i class="bi bi-plus"></i
></a>
<a
href="https://github.com/Azuneer/Cinema"
target="_blank"
rel="noopener noreferrer"
class="portfolio-details-link"
title="Voir sur GitHub"
><i class="bi bi-link"></i
></a>
</div>
</div>
<div class="portfolio-info">
<h4>Base de Données Cinéma</h4>
<p>Recherche et filtrage de films</p>
<div class="portfolio-tags">
<span>SQL</span>
<span>Python</span>
<span>HTML/CSS/PHP</span>
</div>
</div>
</div>
</div>
<!-- Projet 7: Serveur personnel -->
<div
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-reseaux filter-systemes filter-developpement"
>
<div class="portfolio-card">
<div class="portfolio-img">
<img
src="assets/img/portfolio/portfolio-serveur.webp"
alt="Serveur personnel"
class="img-fluid"
/>
<div class="portfolio-overlay">
<a
href="assets/img/portfolio/portfolio-serveur.webp"
class="glightbox portfolio-lightbox"
><i class="bi bi-plus"></i
></a>
</div>
</div>
<div class="portfolio-info">
<h4>Serveur personnel</h4>
<p>
Hébergement maison d'un blog
personnel
</p>
<div class="portfolio-tags">
<span>Systèmes</span>
<span>Réseaux</span>
<span>Linux</span>
<span>web</span>
</div>
</div>
</div>
</div>
<!-- Projet 8: Site de portfolio numérique -->
<div
class="col-lg-4 col-md-6 portfolio-item isotope-item filter-systemes filter-reseaux filter-developpement"
>
<div class="portfolio-card">
<div class="portfolio-img">
<img
src="assets/img/portfolio/portfolio-ewengadonnaud.webp"
alt="Site de portfolio numérique"
class="img-fluid"
/>
<div class="portfolio-overlay">
<a
href="assets/img/portfolio/portfolio-ewengadonnaud.webp"
class="glightbox portfolio-lightbox"
><i class="bi bi-plus"></i
></a>
<a
href="https://github.com/Azuneer/portfolio-configuration"
target="_blank"
rel="noopener noreferrer"
class="portfolio-details-link"
title="Voir sur GitHub"
><i class="bi bi-link"></i
></a>
</div>
</div>
<div class="portfolio-info">
<h4>Site de portfolio numérique</h4>
<p>
Configuration du serveur VPS de mon
portfolio numérique, et de ses
services
</p>
<div class="portfolio-tags">
<span>BASH</span>
<span>Réseaux</span>
<span>Services</span>
</div>
</div>
</div>
</div>
</div>
<!-- End Portfolio Items Container -->
</div>
<div
class="text-center mt-5"
data-aos="fade-up"
data-aos-delay="400"
>
<a
href="https://github.com/Azuneer"
target="_blank"
rel="noopener noreferrer"
class="btn btn-primary"
>Voir tous mes projets sur GitHub</a
>
</div>
</div>
</section>
<!-- /Portfolio Section -->
</main>
<footer id="footer" class="footer">
<div class="container">
<div class="copyright text-center">
<p>
© <span>Copyright</span>
<strong class="px-1 sitename">GADONNAUD Ewen</strong>
<span>Tout droits réservés<br /></span>
</p>
</div>
<div class="social-links d-flex justify-content-center">
<a
href="https://www.linkedin.com/in/ewen-gadonnaud-b17491283"
aria-label="LinkedIn"
><i class="bi bi-linkedin"></i
></a>
<a href="https://github.com/Azuneer"
aria-label="GitHub"
><i class="bi bi-github"></i
></a>
</div>
<div class="credits">
Designé avec
<a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</footer>
<!-- Scroll Top -->
<a
href="#"
id="scroll-top"
class="scroll-top d-flex align-items-center justify-content-center"
><i class="bi bi-arrow-up-short"></i
></a>
<!-- Preloader -->
<div id="preloader"></div>
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/typed.js/typed.umd.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<!-- Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>