<!DOCTYPE html>
<html lang="fr" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="CV professionnel de Benchegra Brahim, étudiant en BTS SIO SISR au CFAI LDA de Saint-Étienne. Compétences en maintenance informatique, réseaux et programmation.">
<meta name="author" content="Benchegra Brahim">
<meta property="og:title" content="CV - Benchegra Brahim | Étudiant en BTS SIO SISR">
<meta property="og:description" content="Découvrez mon parcours en BTS SIO SISR, mes compétences en réseaux, maintenance informatique et programmation, ainsi que mes expériences professionnelles.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://ton-url-ici.com">
<meta property="og:image" content="https://ton-url-ici.com/assets/img/profile.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="CV - Benchegra Brahim | Étudiant en BTS SIO SISR">
<meta name="twitter:description" content="Découvrez mon parcours en BTS SIO SISR, mes compétences en réseaux, maintenance informatique et programmation, ainsi que mes expériences professionnelles.">
<meta name="twitter:image" content="https://ton-url-ici.com/assets/img/profile.jpg">
<title>CV - Benchegra Brahim | Étudiant en BTS SIO SISR</title>
<!-- Google Fonts (Inter + Merriweather) -->
<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@300;400;500;600;700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
<!-- Bootstrap 5.3 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
/* ===== Variables CSS ===== */
:root {
--bs-primary: #2563eb; /* Bleu professionnel */
--bs-secondary: #6b7280; /* Gris secondaire */
--bs-success: #10b981; /* Vert succès */
--bs-info: #3b82f6; /* Bleu info */
--bs-dark: #1e293b; /* Noir profond */
--bs-light: #f8fafc; /* Gris très clair */
--bs-body-bg: #ffffff; /* Fond blanc */
--bs-body-color: #1e293b; /* Texte noir profond */
--font-main: 'Inter', sans-serif;
--font-heading: 'Merriweather', serif;
--transition: all 0.3s ease;
--spacing-unit: 1rem;
}
/* ===== Base Styles ===== */
body {
font-family: var(--font-main);
line-height: 1.7;
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
font-size: 1.05rem;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
color: var(--bs-dark);
margin-bottom: calc(var(--spacing-unit) * 0.5);
}
p {
margin-bottom: var(--spacing-unit);
color: var(--bs-secondary);
}
a {
text-decoration: none;
color: var(--bs-primary);
transition: var(--transition);
}
a:hover {
color: var(--bs-info);
text-decoration: underline;
}
/* ===== Skip Link (Accessibilité) ===== */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--bs-primary);
color: white;
padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
z-index: 1000;
transition: top 0.3s;
}
.skip-link:focus {
top: 0;
}
/* ===== Header ===== */
header {
background-color: var(--bs-dark);
color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-unit) 0;
}
.profile-img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* ===== Hero Section ===== */
.hero {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.1));
padding: calc(var(--spacing-unit) * 4) 0;
text-align: center;
margin-bottom: calc(var(--spacing-unit) * 3);
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: var(--spacing-unit);
color: var(--bs-dark);
}
.hero p.lead {
font-size: 1.25rem;
max-width: 800px;
margin: 0 auto calc(var(--spacing-unit) * 2);
color: var(--bs-secondary);
line-height: 1.8;
}
/* ===== Sections ===== */
section {
padding: calc(var(--spacing-unit) * 3) 0;
position: relative;
}
.section-title {
text-align: center;
margin-bottom: calc(var(--spacing-unit) * 2);
position: relative;
display: inline-block;
font-size: 1.8rem;
color: var(--bs-dark);
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--bs-primary);
}
/* ===== Compétences ===== */
.skills-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: calc(var(--spacing-unit) * 1.5);
}
.skill-category {
text-align: center;
margin-bottom: calc(var(--spacing-unit) * 2);
}
.skill-category h3 {
margin-bottom: var(--spacing-unit);
color: var(--bs-dark);
font-size: 1.3rem;
}
.skill-badge {
display: inline-block;
background-color: var(--bs-light);
color: var(--bs-dark);
padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
border-radius: 2rem;
font-weight: 500;
margin: calc(var(--spacing-unit) * 0.25);
transition: var(--transition);
border: 1px solid transparent;
font-size: 0.95rem;
}
.skill-badge:hover {
border-color: var(--bs-primary);
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* ===== Timeline (Expérience) ===== */
.timeline {
position: relative;
padding-left: 30px;
margin-top: calc(var(--spacing-unit) * 2);
}
.timeline::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 12px;
width: 2px;
background-color: var(--bs-primary);
}
.timeline-item {
position: relative;
margin-bottom: calc(var(--spacing-unit) * 3);
padding-left: 30px;
}
.timeline-item::before {
content: '';
position: absolute;
left: -10px;
top: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
border: 3px solid var(--bs-primary);
}
.timeline-date {
position: absolute;
left: -120px;
width: 100px;
text-align: right;
font-weight: 600;
color: var(--bs-secondary);
font-size: 0.9rem;
}
.timeline-content {
background-color: white;
padding: calc(var(--spacing-unit) * 1.5);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
border-left: 4px solid var(--bs-primary);
}
.timeline-content h4 {
margin-bottom: calc(var(--spacing-unit) * 0.5);
color: var(--bs-dark);
}
.timeline-content p {
margin-bottom: calc(var(--spacing-unit) * 0.5);
}
/* ===== Éducation ===== */
.education-card {
border: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
transition: var(--transition);
background-color: white;
}
.education-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.education-card .card-body {
padding: calc(var(--spacing-unit) * 1.5);
}
.education-card .card-title {
color: var(--bs-dark);
font-size: 1.2rem;
margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.education-card .card-subtitle {
color: var(--bs-secondary);
font-size: 0.95rem;
}
/* ===== Projets ===== */
.project-card {
transition: var(--transition);
height: 100%;
border: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
background-color: white;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.project-img {
height: 180px;
object-fit: cover;
filter: brightness(0.95);
}
.project-card .card-body {
padding: calc(var(--spacing-unit) * 1.5);
}
.project-card .card-title {
color: var(--bs-dark);
font-size: 1.1rem;
margin-bottom: calc(var(--spacing-unit) * 0.5);
}
/* ===== Contact ===== */
.contact-form {
background-color: var(--bs-light);
padding: calc(var(--spacing-unit) * 2);
border-radius: 8px;
margin-bottom: calc(var(--spacing-unit) * 2);
}
.social-links {
display: flex;
justify-content: center;
gap: calc(var(--spacing-unit) * 1.5);
margin-top: calc(var(--spacing-unit) * 1.5);
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: var(--bs-light);
border-radius: 50%;
color: var(--bs-dark);
transition: var(--transition);
font-size: 1.2rem;
}
.social-links a:hover {
background-color: var(--bs-primary);
color: white;
transform: translateY(-3px);
}
/* ===== Footer ===== */
footer {
background-color: var(--bs-dark);
color: white;
text-align: center;
padding: calc(var(--spacing-unit) * 2) 0;
margin-top: calc(var(--spacing-unit) * 3);
}
/* ===== Print Styles ===== */
@media print {
body {
background-color: white;
color: black;
font-size: 12pt;
}
header, footer, .btn, .skip-link, .social-links, .hero {
display: none;
}
.timeline::before {
display: none;
}
.timeline-item {
padding-left: 0;
}
.timeline-item::before {
display: none;
}
.timeline-date {
position: static;
width: auto;
text-align: left;
font-weight: bold;
color: black;
}
.timeline-content {
border-left: none;
box-shadow: none;
padding: 0.5rem 0;
background-color: transparent;
}
.education-card, .project-card {
box-shadow: none;
border: 1px solid #ddd;
background-color: white;
}
a[href]::after {
content: " (" attr(href) ")";
}
}
/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
:root {
--bs-body-bg: #0f172a;
--bs-body-color: #e2e8f0;
--bs-dark: #e2e8f0;
--bs-light: #1e293b;
--bs-primary: #60a5fa;
}
body {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
}
header, footer {
background-color: var(--bs-light);
color: var(--bs-dark);
}
.hero {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.15));
}
.timeline-content, .education-card, .project-card, .contact-form {
background-color: var(--bs-light);
color: var(--bs-body-color);
}
.skill-badge {
background-color: var(--bs-light);
color: var(--bs-body-color);
border-color: rgba(0, 0, 0, 0.3);
}
}
/* ===== Animations ===== */
.animate__animated {
animation-duration: 0.8s;
}
@media (prefers-reduced-motion: reduce) {
.animate__animated {
animation: none !important;
}
}
</style>
</head>
<body>
<!-- Skip Link (Accessibilité) -->
<a class="skip-link" href="#main-content">Aller au contenu principal</a>
<!-- Header -->
<header class="py-3">
<div class="container">
<div class="header-content">
<div class="d-flex align-items-center">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDY0IDY0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxjaXJjbGUgY3g9IjMyIiBjeT0iMzIiIHI9IjI0Ii8+CiAgICA8cGF0aCBkPSJNMjQgMTRsLTEyIDBoMjB2MjBoLTIwem0tMTAgMGgxMnYxMGgxMlYxNHoiLz4KPC9zdmc+" alt="Photo de profil de Benchegra Brahim" class="profile-img me-3" width="60" height="60" loading="lazy">
<div>
<h1 class="h4 mb-0 text-white">Benchegra Brahim</h1>
<p class="mb-0 text-white-50">Étudiant en BTS SIO SISR</p>
</div>
</div>
<div class="d-flex gap-2">
<button class="btn btn-outline-light btn-sm" onclick="window.print()">
<i class="bi bi-file-earmark-pdf me-1"></i> Télécharger CV
</button>
<a href="#contact" class="btn btn-light btn-sm">
<i class="bi bi-envelope me-1"></i> Me contacter
</a>
</div>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto">
<h1 class="animate__animated animate__fadeInDown">Benchegra Brahim</h1>
<p class="lead animate__animated animate__fadeInUp">
Étudiant en <strong>BTS SIO SISR</strong> au CFAI LDA de Saint-Étienne, je me spécialise dans les <strong>réseaux informatiques</strong> et la <strong>sécurité des systèmes</strong>.
Passionné par la maintenance informatique et la programmation, je cherche à développer des solutions techniques innovantes et fiables.
</p>
</div>
</div>
</div>
</section>
<!-- Main Content -->
<main id="main-content" class="container">
<!-- Compétences -->
<section id="competences" class="animate__animated animate__fadeIn">
<h2 class="section-title">Compétences</h2>
<div class="skills-container">
<!-- Maintenance -->
<div class="skill-category">
<h3><i class="bi bi-tools me-2"></i> Maintenance Informatique</h3>
<div class="d-flex flex-wrap justify-content-center">
<span class="skill-badge">Réparation de PC</span>
<span class="skill-badge">Changement de pièces</span>
<span class="skill-badge">Diagnostic matériel</span>
<span class="skill-badge">Installation de systèmes</span>
</div>
</div>
<!-- Programmation -->
<div class="skill-category">
<h3><i class="bi bi-code-slash me-2"></i> Programmation</h3>
<div class="d-flex flex-wrap justify-content-center">
<span class="skill-badge">HTML5</span>
<span class="skill-badge">CSS3</span>
<span class="skill-badge">JavaScript (Bases)</span>
<span class="skill-badge">Bootstrap</span>
</div>
</div>
<!-- Réseaux -->
<div class="skill-category">
<h3><i class="bi bi-router me-2"></i> Réseaux</h3>
<div class="d-flex flex-wrap justify-content-center">
<span class="skill-badge">Configuration Cisco</span>
<span class="skill-badge">VLANs</span>
<span class="skill-badge">Sécurité réseau</span>
<span class="skill-badge">Protocoles TCP/IP</span>
</div>
</div>
</div>
</section>
<!-- Éducation -->
<section id="education" class="animate__animated animate__fadeIn">
<h2 class="section-title">Formation</h2>
<div class="row">
<!-- BTS SIO SISR -->
<div class="col-md-6 mb-4">
<div class="card education-card h-100">
<div class="card-body">
<h4 class="card-title">BTS SIO SISR</h4>
<p class="card-subtitle mb-2">Solutions d'Infrastructure, Systèmes et Réseaux</p>
<p class="card-text"><strong>CFAI LDA Saint-Étienne</strong></p>
<p class="text-muted">2025 - En cours</p>
<p class="card-text">
Formation axée sur l'administration des systèmes et réseaux, la cybersécurité et les solutions d'infrastructure.
</p>
</div>
</div>
</div>
<!-- Bac Pro -->
<div class="col-md-6 mb-4">
<div class="card education-card h-100">
<div class="card-body">
<h4 class="card-title">Bac Pro Système Numérique</h4>
<p class="card-subtitle mb-2">Option Réseaux Informatique et Systèmes Communicants</p>
<p class="card-text"><strong>Lycée Pierre Desgranges, Saint-Chamond</strong></p>
<p class="text-muted">2022 - 2025</p>
<p class="card-text">
Acquisition de compétences en maintenance informatique, configuration de réseaux et programmation.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Expérience Professionnelle -->
<section id="experience" class="animate__animated animate__fadeIn">
<h2 class="section-title">Expérience Professionnelle</h2>
<div class="timeline">
<div class="timeline-item animate__animated animate__fadeInLeft">
<div class="timeline-date">2023-2024</div>
<div class="timeline-content">
<h4>Stage - VAFormation</h4>
<p class="text-muted mb-1">12 semaines | Saint-Chamond</p>
<p>
Préparation et maintenance de postes informatiques :
<ul>
<li>Installation et configuration de systèmes d'exploitation.</li>
<li>Diagnostic et réparation de matériel.</li>
<li>Assistance technique aux utilisateurs.</li>
</ul>
</div>
</div>
<div class="timeline-item animate__animated animate__fadeInLeft">
<div class="timeline-date">Sept. 2024</div>
<div class="timeline-content">
<h4>Stage - Prorexem</h4>
<p class="text-muted mb-1">6 semaines | Saint-Étienne</p>
<p>
Assistance technique et configuration réseau :
<ul>
<li>Support aux utilisateurs sur les problèmes réseau.</li>
<li>Configuration de matériel Cisco.</li>
<li>Documentation des interventions.</li>
</ul>
</div>
</div>
<div class="timeline-item animate__animated animate__fadeInLeft">
<div class="timeline-date">Juin 2023</div>
<div class="timeline-content">
<h4>Stage - WebCom</h4>
<p class="text-muted mb-1">4 semaines | Saint-Chamond</p>
<p>
Stage administratif avec des missions techniques :
<ul>
<li>Gestion de fichiers et bases de données.</li>
<li>Support informatique aux équipes.</li>
<li>Participation à la maintenance du parc informatique.</li>
</ul>
</div>
</div>
<div class="timeline-item animate__animated animate__fadeInLeft">
<div class="timeline-date">2019-2025</div>
<div class="timeline-content">
<h4>Saint-Cham Games Week</h4>
<p class="text-muted mb-1">Bénévole | Saint-Chamond</p>
<p>
Participation à l'organisation d'événements technologiques :
<ul>
<li>Gestion technique des équipements.</li>
<li>Support aux participants.</li>
<li>Collaboration avec le Club Infos Ado de la MJC.</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Projets -->
<section id="projets" class="animate__animated animate__fadeIn">
<h2 class="section-title">Projets</h2>
<div class="row">
<div class="col-md-6 col-lg-4 mb-4">
<div class="card project-card h-100">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgMjAwIDE1MCIgZmlsbD0iI2ZmZiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2VlZSIvPjxwYXRoIGQ9Ik0wIDBoMjAwVjE1MCIvPjwvc3ZnPg==" alt="Configuration VLANs" class="card-img-top project-img">
<div class="card-body">
<h5 class="card-title">Configuration de VLANs</h5>
<p class="card-text">
Projet de configuration et sécurisation de VLANs sur des switches Cisco :
<ul>
<li>Création et gestion de VLANs pour segmenter un réseau local.</li>
<li>Mise en place de règles de sécurité.</li>
<li>Documentation technique.</li>
</ul>
</div>
<div class="card-footer bg-transparent border-0">
<a href="#" class="btn btn-sm btn-outline-primary">Voir le projet</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-4">
<div class="card project-card h-100">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgMjAwIDE1MCIgZmlsbD0iI2ZmZiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NjYyIvPjxwYXRoIGQ9Ik0wIDBoMjAwVjE1MCIvPjwvc3ZnPg==" alt="Maintenance PC" class="card-img-top project-img">
<div class="card-body">
<h5 class="card-title">Maintenance de PC</h5>
<p class="card-text">
Réparation et optimisation de postes informatiques :
<ul>
<li>Diagnostic de pannes matérielles et logicielles.</li>
<li>Remplacement de composants défectueux.</li>
<li>Installation de systèmes d'exploitation.</li>
</ul>
</div>
<div class="card-footer bg-transparent border-0">
<a href="#" class="btn btn-sm btn-outline-primary">Voir le projet</a>
</div>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="animate__animated animate__fadeIn">
<h2 class="section-title">Contact</h2>
<div class="row">
<div class="col-md-8 mx-auto">
<div class="contact-form">
<form>
<div class="mb-3">
<label for="name" class="form-label">Nom</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="4" required></textarea>
</div>
<button type="submit" class="btn btn-primary w-100">Envoyer</button>
</form>
</div>
<div class="text-center mt-4">
<p class="mb-2"><i class="bi bi-phone me-2"></i> 07 82 13 70 70</p>
<p class="mb-2"><i class="bi bi-envelope me-2"></i> brahimbenchegra.pro@gmail.com</p>
<p class="mb-4"><i class="bi bi-geo-alt me-2"></i> 5 Boulevard de la Grande Terre, 42400 Saint-Chamond</p>
<div class="social-links">
<a href="#" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a>
<a href="#" aria-label="GitHub"><i class="bi bi-github"></i></a>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="container text-center">
<p class="mb-0">© 2025 Benchegra Brahim. Tous droits réservés.</p>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script>
// Animation au scroll
document.addEventListener("DOMContentLoaded", function() {
const animateElements = document.querySelectorAll('.animate__animated');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate__fadeIn');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
animateElements.forEach(el => observer.observe(el));
// Mode sombre
const darkModeToggle = document.createElement("button");
darkModeToggle.className = "btn btn-sm btn-dark position-fixed bottom-0 end-0 m-3 rounded-circle";
darkModeToggle.style.width = "40px";
darkModeToggle.style.height = "40px";
darkModeToggle.innerHTML = '<i class="bi bi-moon-stars"></i>';
darkModeToggle.addEventListener("click", function() {
document.body.classList.toggle("dark-mode");
localStorage.setItem("darkMode", document.body.classList.contains("dark-mode"));
});
if (localStorage.getItem("darkMode") === "true") {
document.body.classList.add("dark-mode");
}
document.body.appendChild(darkModeToggle);
// Schema.org JSON-LD
const schemaData = {
"@context": "https://schema.org",
"@type": "Person",
"name": "Benchegra Brahim",
"jobTitle": "Étudiant en BTS SIO SISR",
"url": "https://ton-url-ici.com",
"sameAs": [
"https://linkedin.com/in/ton-profil",
"https://github.com/ton-profil"
]
};
const script = document.createElement("script");
script.type = "application/ld+json";
script.text = JSON.stringify(schemaData);
document.body.appendChild(script);
});
</script>
</body>
</html>
