<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Moulaoui Noa – CV BTS SIO SISR | Cybersécurité & Réseaux</title>
<meta name="description" content="CV de Moulaoui Noa, étudiant en BTS SIO SISR spécialisé en cybersécurité et réseaux. Compétences : Kali Linux, GLPI, VMware. Recherche alternance 2025-2026.">
<meta name="keywords" content="BTS SIO, SISR, cybersécurité, réseau, alternance, Kali Linux, GLPI, VMware">
<meta name="author" content="Moulaoui Noa">
<!-- Open Graph -->
<meta property="og:title" content="Moulaoui Noa - CV BTS SIO SISR">
<meta property="og:description" content="Étudiant en cybersécurité cherchant alternance BTS SIO">
<meta property="og:url" content="https://nml8.github.io/CvHTML/">
<meta property="og:type" content="profile">
<link rel="canonical" href="https://nml8.github.io/CvHTML/">
<!-- Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
crossorigin="anonymous">
<!-- Font -->
<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=Share+Tech+Mono&display=swap" rel="stylesheet">
<style>
:root {
--matrix-green: #00ff99;
--matrix-light: #ccffe6;
--bg-dark: #0a0a0a;
--bg-card: rgba(0, 20, 10, 0.65);
}
.text-muted,
.text-light,
.text-body-secondary {
color: var(--matrix-light) !important;
opacity: 0.9 !important;
}
h1, h2, h3, h4, h5, h6 {
color: var(--matrix-green) !important;
text-shadow: 0 0 8px rgba(0, 255, 153, 0.3);
}
* {
font-family: "Share Tech Mono", monospace;
color: var(--matrix-light);
}
body {
background: var(--bg-dark);
background-image: radial-gradient(circle at 20% 20%, #0b2817 0%, #000 100%);
overflow-x: hidden;
}
/* Effet binaire */
canvas#binaryCanvas {
position: fixed;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Navbar */
.navbar {
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(4px);
border-bottom: 1px solid rgba(0, 255, 153, 0.3);
}
.navbar-brand span {
color: var(--matrix-green);
text-shadow: 0 0 8px var(--matrix-green);
font-weight: bold;
}
.btn-outline-light {
border-color: var(--matrix-green);
color: var(--matrix-green);
transition: all 0.3s ease;
}
.btn-outline-light:hover {
background: var(--matrix-green);
color: #000;
box-shadow: 0 0 12px var(--matrix-green);
}
/* Espace sous navbar */
.spacer-top {
height: 6rem;
}
@media (max-width: 768px) {
.spacer-top {
height: 7rem;
}
}
/* Cartes */
.card {
background: var(--bg-card);
border: 1px solid rgba(0, 255, 153, 0.15);
border-radius: 12px;
box-shadow: 0 0 15px rgba(0, 255, 153, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
}
.card:hover {
transform: translateY(-6px);
border-color: rgba(0, 255, 153, 0.4);
box-shadow: 0 0 25px rgba(0, 255, 153, 0.3);
}
.card ul {
list-style: none;
padding-left: 0;
}
.card ul li::before {
content: "▸ ";
color: var(--matrix-green);
}
/* Fenêtre d'options */
#binaryControls {
position: fixed;
right: 12px;
top: 84px;
background: rgba(0, 10, 0, 0.9);
border: 1px solid rgba(0, 255, 153, 0.4);
border-radius: 10px;
padding: 12px 16px;
width: 230px;
box-shadow: 0 0 15px rgba(0, 255, 153, 0.5);
backdrop-filter: blur(8px);
display: none;
z-index: 9999;
}
#binaryControls label {
color: var(--matrix-green);
font-size: 13px;
}
a {
color: var(--matrix-green);
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
text-shadow: 0 0 8px var(--matrix-green);
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: var(--matrix-green);
border-radius: 4px;
}
::-webkit-scrollbar-track {
background: #001a0f;
}
/* Accessibilité */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
a:focus,
button:focus {
outline: 2px solid var(--matrix-green);
outline-offset: 2px;
}
</style>
</head>
<body>
<canvas id="binaryCanvas" aria-hidden="true"></canvas>
<!-- En-tête avec navigation -->
<header>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" aria-label="Navigation principale">
<div class="container-fluid">
<a class="navbar-brand d-flex align-items-center" href="#profil" aria-label="Aller à la section À propos">
<img
src="img/1000034799.jpg"
alt="Photo de profil de Moulaoui Noa"
class="rounded-circle border border-success me-2"
width="48"
height="48">
<span>Moulaoui Noa</span>
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Basculer la navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto gap-2">
<li class="nav-item">
<a class="btn btn-sm btn-outline-light" href="#projets" aria-label="Voir mes projets">Portfolio</a>
</li>
<li class="nav-item">
<a class="btn btn-sm btn-outline-light" href="https://www.linkedin.com/in/noa-moulaoui-898616329/" target="_blank" rel="noopener noreferrer" aria-label="Visiter mon profil LinkedIn (nouvel onglet)">LinkedIn</a>
</li>
<li class="nav-item">
<a class="btn btn-sm btn-outline-light" href="https://github.com/Nml8" target="_blank" rel="noopener noreferrer" aria-label="Visiter mon profil GitHub (nouvel onglet)">GitHub</a>
</li>
<li class="nav-item">
<button id="openBinaryControls" class="btn btn-sm btn-outline-light" aria-label="Ouvrir les paramètres de l'effet binaire">⚙️ Paramètres</button>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Contenu principal -->
<main class="container py-5" id="cv">
<div class="spacer-top"></div>
<!-- Section profil -->
<section id="profil" aria-labelledby="profil-heading">
<div class="row g-4">
<div class="col-12">
<article class="card p-4">
<h1 id="profil-heading" class="fw-bold mb-3">Moulaoui Noa</h1>
<h2 class="h6 text-muted">À propos de moi</h2>
<p>
Étudiant en Bac Professionnel Systèmes Numériques option RISC.
Je me destine au domaine du réseau et de la cybersécurité, avec
l'ambition d'obtenir un BTS SIO puis un Master en alternance.
</p>
</article>
</div>
</div>
</section>
<!-- Informations personnelles -->
<section id="infos-personnelles" aria-labelledby="infos-heading" class="mt-4">
<h2 id="infos-heading" class="visually-hidden">Informations personnelles</h2>
<div class="row g-4">
<div class="col-sm-6 col-lg-3">
<article class="card p-3">
<h3 class="h5">Adresse</h3>
<p class="text-muted mb-0">Saint-Étienne (42500)</p>
</article>
</div>
<div class="col-sm-6 col-lg-3">
<article class="card p-3">
<h3 class="h5">Permis</h3>
<p class="text-muted mb-0">Permis B</p>
</article>
</div>
<div class="col-md-6 col-lg-3">
<article class="card p-3">
<h3 class="h5">Langues</h3>
<ul class="mb-0" role="list">
<li>Français</li>
<li>Anglais (niveau B)</li>
</ul>
</article>
</div>
<div class="col-md-6 col-lg-3">
<article class="card p-3">
<h3 class="h5">Formation</h3>
<ul class="mb-0" role="list">
<li><strong>CFAI</strong> – BTS SIO SISR (2025–2026)</li>
<li><strong>Lycée Pierre Desgranges</strong> – Bac Pro SN RISC (2023–2025)</li>
</ul>
</article>
</div>
</div>
</section>
<!-- Compétences et expériences -->
<section id="competences-experiences" aria-labelledby="competences-heading" class="mt-4">
<h2 id="competences-heading" class="visually-hidden">Compétences et expériences</h2>
<div class="row g-4">
<div class="col-lg-6">
<article class="card p-3">
<h3 class="h5">Compétences</h3>
<ul role="list">
<li>Assistance technique et support IT</li>
<li>Gestion des incidents via GLPI</li>
<li>Kali Linux, Burp Suite, SQLMap</li>
<li>Virtualisation : VMware, Oracle</li>
<li>Administration réseau</li>
</ul>
</article>
</div>
<div class="col-lg-6">
<article class="card p-3">
<h3 class="h5">Expériences</h3>
<ul role="list">
<li><strong>CAF</strong> – Technicien SI (Juin-Juillet 2024)</li>
<li><strong>Police Nationale</strong> – Réseau et IT (Décembre 2023)</li>
<li><strong>École des Mines</strong> – Support DSI (Mai 2023)</li>
</ul>
</article>
</div>
</div>
</section>
<!-- Centres d'intérêt -->
<section id="interets" aria-labelledby="interets-heading" class="mt-4">
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<article class="card p-3">
<h3 id="interets-heading" class="h5">Centres d'intérêt</h3>
<p>Cybersécurité, musique, football, jeux vidéo</p>
</article>
</div>
</div>
</section>
<!-- Section projets (placeholder) -->
<section id="projets" aria-labelledby="projets-heading" class="mt-4">
<div class="row g-4">
<div class="col-12">
<article class="card p-3">
<h3 id="projets-heading" class="h5">Projets</h3>
<p class="text-muted">Section en cours de développement. Consultez mon profil GitHub pour voir mes projets.</p>
</article>
</div>
</div>
</section>
</main>
<!-- Pied de page -->
<footer class="container py-4 mt-5">
<div class="card p-3">
<h2 class="h5">Contact professionnel</h2>
<nav aria-label="Liens de contact">
<ul role="list">
<li>
<a href="https://github.com/Nml8" target="_blank" rel="noopener noreferrer">
Profil GitHub - Me contacter via GitHub
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/noa-moulaoui-898616329/" target="_blank" rel="noopener noreferrer">
Profil LinkedIn
</a>
</li>
</ul>
</nav>
<p class="text-muted small mt-3 mb-0">
© 2025 Moulaoui Noa - CV créé dans le cadre du module "Intégration Web" - Bac Pro SN RISC
</p>
</div>
</footer>
<!-- Panneau de contrôle Matrix -->
<aside id="binaryControls" role="dialog" aria-labelledby="controls-title" aria-hidden="true">
<div class="d-flex justify-content-between align-items-center mb-2">
<strong id="controls-title">Effet Binaire</strong>
<button id="binaryToggle" class="btn btn-sm btn-outline-light" aria-pressed="true">Pause</button>
</div>
<div class="mb-2">
<label for="density">Densité</label>
<input id="density" type="range" min="0.2" max="3" step="0.1" value="1" aria-valuemin="0.2" aria-valuemax="3" aria-valuenow="1">
</div>
<div class="mb-2">
<label for="speed">Vitesse</label>
<input id="speed" type="range" min="0.2" max="3" step="0.05" value="0.45" aria-valuemin="0.2" aria-valuemax="3" aria-valuenow="0.45">
</div>
<div>
<label for="color">Couleur</label>
<input id="color" type="color" value="#00ff99" aria-label="Sélectionner la couleur de l'effet">
</div>
</aside>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>
<script>
(() => {
const canvas = document.getElementById("binaryCanvas");
const ctx = canvas.getContext("2d");
let width, height, fontSize, columns, drops;
let enabled = true;
let density = 1, speed = 0.45, color = "#00ff99";
function resize() {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
fontSize = 14;
columns = Math.floor(width / (fontSize / density));
drops = Array(columns).fill(0);
ctx.font = fontSize + "px monospace";
}
function hexToRgb(hex) {
const h = hex.replace("#", "");
const bigint = parseInt(h, 16);
return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
}
function draw() {
if (!enabled) return requestAnimationFrame(draw);
ctx.fillStyle = "rgba(0,0,0,0.12)";
ctx.fillRect(0, 0, width, height);
const [r, g, b] = hexToRgb(color);
for (let i = 0; i < columns; i++) {
const text = Math.random() > 0.5 ? "0" : "1";
const x = i * fontSize;
const y = drops[i] * fontSize;
ctx.fillStyle = `rgba(${r},${g},${b},${0.8 + Math.random() * 0.2})`;
ctx.fillText(text, x, y);
if (y > height && Math.random() > 0.98) drops[i] = 0;
drops[i] += speed * (0.5 + Math.random());
}
requestAnimationFrame(draw);
}
resize();
draw();
window.addEventListener("resize", resize);
const densityInput = document.getElementById("density");
const speedInput = document.getElementById("speed");
const colorInput = document.getElementById("color");
const toggleBtn = document.getElementById("binaryToggle");
const openBtn = document.getElementById("openBinaryControls");
const panel = document.getElementById("binaryControls");
densityInput.oninput = e => {
density = +e.target.value;
e.target.setAttribute('aria-valuenow', density);
resize();
};
speedInput.oninput = e => {
speed = +e.target.value;
e.target.setAttribute('aria-valuenow', speed);
};
colorInput.oninput = e => { color = e.target.value; };
toggleBtn.onclick = () => {
enabled = !enabled;
toggleBtn.textContent = enabled ? "Pause" : "Play";
toggleBtn.setAttribute('aria-pressed', enabled);
if (enabled) draw();
};
openBtn.onclick = () => {
const isHidden = panel.style.display === "none" || !panel.style.display;
panel.style.display = isHidden ? "block" : "none";
panel.setAttribute('aria-hidden', !isHidden);
openBtn.setAttribute('aria-expanded', isHidden);
};
})();
</script>
</body>
</html>
