<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rayan Abbes - CV Technicien Système et Réseau</title>
<meta name="description" content="CV de Rayan Abbes, Technicien Système et Réseau en alternance. Spécialisé en réseaux informatiques, support technique et systèmes d'exploitation.">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
:root {
--primary-green: #2d6a4f;
--secondary-green: #40916c;
--light-green: #52b788;
--accent-green: #74c69d;
--matrix-green: #00ff41;
--dark-bg: #000000;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--dark-bg);
font-size: 16px;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
position: relative;
overflow-x: hidden;
}
/* Canvas Matrix en arrière-plan - BIEN VISIBLE */
#matrixCanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.7;
}
main, header, footer {
position: relative;
z-index: 1;
}
main {
flex: 1 0 auto;
}
footer {
flex-shrink: 0;
}
/* Animations optimisées */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-15px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Header - Fond opaque pour lisibilité */
header {
animation: fadeInUp 0.6s ease-out;
background: rgba(0, 0, 0, 0.95);
border-bottom: 3px solid var(--matrix-green);
box-shadow: 0 4px 20px rgba(0, 255, 65, 0.4);
}
header h1 {
font-weight: 800;
color: var(--matrix-green);
text-shadow:
0 0 15px var(--matrix-green),
0 0 30px var(--matrix-green),
0 0 45px rgba(0, 255, 65, 0.5),
2px 2px 4px rgba(0, 0, 0, 0.8);
letter-spacing: 2px;
}
header .lead {
color: #ffffff;
font-weight: 600;
text-shadow:
0 0 10px rgba(0, 255, 65, 0.8),
2px 2px 8px rgba(0, 0, 0, 0.9);
}
/* Sections - Fond foncé opaque pour contraste */
section {
animation: fadeInUp 0.6s ease-out both;
}
section:nth-child(1) { animation-delay: 0.1s; }
section:nth-child(2) { animation-delay: 0.2s; }
section:nth-child(3) { animation-delay: 0.3s; }
section:nth-child(4) { animation-delay: 0.4s; }
.section-card {
background: rgba(0, 0, 0, 0.92);
border: 2px solid rgba(0, 255, 65, 0.5);
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
transition: all 0.3s ease;
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.8),
0 0 25px rgba(0, 255, 65, 0.2);
}
.section-card:hover {
transform: translateY(-5px);
border-color: var(--matrix-green);
box-shadow:
0 8px 30px rgba(0, 0, 0, 0.9),
0 0 40px rgba(0, 255, 65, 0.4),
inset 0 0 20px rgba(0, 255, 65, 0.1);
}
/* Titres */
.section-title {
position: relative;
display: inline-block;
color: var(--matrix-green);
font-weight: 700;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow:
0 0 15px var(--matrix-green),
0 0 30px rgba(0, 255, 65, 0.6);
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: var(--matrix-green);
box-shadow: 0 0 10px var(--matrix-green);
transition: width 0.4s ease;
}
.section-card:hover .section-title::after {
width: 100%;
}
/* Articles */
article {
background: rgba(10, 25, 41, 0.8);
border-left: 4px solid var(--light-green);
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 8px;
transition: all 0.25s ease;
}
article:hover {
transform: translateX(8px);
border-left-color: var(--matrix-green);
background: rgba(0, 50, 30, 0.7);
box-shadow: -5px 5px 20px rgba(0, 255, 65, 0.2);
}
article h3 {
color: #ffffff;
font-size: 1.1rem;
font-weight: 600;
text-shadow: 0 0 8px rgba(0, 255, 65, 0.4);
}
/* Compétences */
.skill-item {
margin-bottom: 1.5rem;
animation: slideIn 0.5s ease-out both;
}
.skill-item:nth-child(1) { animation-delay: 0.2s; }
.skill-item:nth-child(2) { animation-delay: 0.3s; }
.skill-item:nth-child(3) { animation-delay: 0.4s; }
.skill-item:nth-child(4) { animation-delay: 0.5s; }
.skill-label {
color: var(--matrix-green);
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow:
0 0 10px var(--matrix-green),
0 0 20px rgba(0, 255, 65, 0.5);
}
.progress {
height: 28px;
background-color: rgba(0, 0, 0, 0.9);
border-radius: 50px;
overflow: hidden;
box-shadow:
inset 0 2px 8px rgba(0, 0, 0, 0.9),
0 0 15px rgba(0, 255, 65, 0.3);
border: 1px solid rgba(0, 255, 65, 0.5);
}
.progress-bar {
background: linear-gradient(90deg,
#004d00 0%,
var(--primary-green) 25%,
var(--light-green) 50%,
var(--matrix-green) 100%);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 0 20px rgba(0, 255, 65, 0.6),
inset 0 2px 5px rgba(255, 255, 255, 0.2);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
/* Listes */
ul {
list-style: none;
padding-left: 0;
}
ul li {
padding-left: 1.5rem;
position: relative;
margin-bottom: 0.5rem;
line-height: 1.6;
transition: transform 0.2s ease;
color: #ffffff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
ul li::before {
content: '▸';
position: absolute;
left: 0;
color: var(--matrix-green);
font-weight: bold;
font-size: 1.2rem;
text-shadow: 0 0 8px var(--matrix-green);
}
ul li:hover {
transform: translateX(5px);
color: var(--accent-green);
}
.list-unstyled li::before {
content: '●';
font-size: 0.8rem;
top: 0.4rem;
}
/* Footer */
footer {
background: rgba(0, 0, 0, 0.95);
border-top: 3px solid var(--matrix-green);
box-shadow: 0 -4px 20px rgba(0, 255, 65, 0.4);
}
footer a {
color: var(--matrix-green);
text-decoration: none;
font-weight: 700;
padding: 0.6rem 1.8rem;
border: 2px solid var(--matrix-green);
border-radius: 25px;
transition: all 0.3s ease;
display: inline-block;
background: rgba(0, 0, 0, 0.8);
text-shadow: 0 0 10px var(--matrix-green);
text-transform: uppercase;
letter-spacing: 1px;
}
footer a:hover {
background-color: var(--matrix-green);
color: #000000;
transform: translateY(-3px);
box-shadow:
0 5px 20px rgba(0, 255, 65, 0.6),
0 0 30px var(--matrix-green);
text-shadow: none;
}
/* Accessibilité */
a:focus, button:focus {
outline: 3px solid var(--matrix-green);
outline-offset: 3px;
box-shadow: 0 0 15px var(--matrix-green);
}
.text-muted-custom {
color: rgba(255, 255, 255, 0.85) !important;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
/* Responsive */
@media (max-width: 768px) {
body {
font-size: 15px;
}
.section-card {
padding: 1.5rem;
}
header h1 {
font-size: 2rem;
}
#matrixCanvas {
opacity: 0.5;
}
}
/* Réduire animations pour performances */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
</style>
</head>
<body class="text-white">
<!-- Canvas Matrix Rain - BIEN VISIBLE -->
<canvas id="matrixCanvas"></canvas>
<!-- En-tête principal -->
<header class="py-5">
<div class="container text-center">
<h1 class="mb-3 display-4">RAYAN ABBES</h1>
<p class="lead fs-4">Technicien Système et Réseau en alternance</p>
</div>
</header>
<!-- Contenu principal -->
<main class="container py-5">
<!-- Informations personnelles -->
<section class="section-card">
<h2 class="section-title h4">Informations personnelles</h2>
<ul class="list-unstyled">
<li>Né le 13/07/2006</li>
<li>Français</li>
<li>Permis B</li>
<li>Véhicule personnel</li>
</ul>
</section>
<!-- Diplômes et Formations -->
<section class="section-card">
<h2 class="section-title h4">Diplômes et Formations</h2>
<article>
<h3 class="fw-bold">BAC PRO - Systèmes numériques - Option C : RISC</h3>
<p class="text-muted-custom mb-0">2024, LE MARAIS-SAINTE THÉRÈSE, Saint-Étienne</p>
</article>
<article>
<h3 class="fw-bold">Diplôme de SST (Sauveteur Secouriste du Travail)</h3>
<p class="text-muted-custom mb-0">Février 2023, LE MARAIS-SAINTE THÉRÈSE, Saint-Étienne</p>
</article>
<article>
<h3 class="fw-bold">Habilitation électrique B1V</h3>
<p class="text-muted-custom mb-0">2022, LE MARAIS-SAINTE THÉRÈSE, Saint-Étienne</p>
</article>
<article>
<h3 class="fw-bold">Brevet des collèges</h3>
<p class="text-muted-custom mb-0">2021, Collège Notre-Dame D'Espérance, Saint-Étienne</p>
</article>
</section>
<!-- Expériences professionnelles -->
<section class="section-card">
<h2 class="section-title h4">Expériences professionnelles</h2>
<article>
<h3 class="fw-bold">Alternance Technicien Système et Réseau</h3>
<p class="text-muted-custom">2025, DSIN, Sainte-Étienne</p>
</article>
<article>
<h3 class="fw-bold">Employé Commercial Polyvalent</h3>
<p class="text-muted-custom mb-2">2025, Auchan Saint-Étienne</p>
<ul>
<li>Mise en rayon, gestion de stock, réassort</li>
<li>Utilisation de systèmes informatiques internes</li>
<li>Travail en équipe, gestion de la relation client</li>
</ul>
</article>
<article>
<h3 class="fw-bold">Employé polyvalent</h3>
<p class="text-muted-custom mb-0">2025, Burger King Villars</p>
</article>
<article>
<h3 class="fw-bold">Stage Technicien informatique dentaire</h3>
<p class="text-muted-custom mb-2">2024, SIGMA NET SANTE, Saint-Étienne</p>
<ul>
<li>Assistance téléphonique aux clients pour l'installation</li>
<li>Diagnostic et résolution de problèmes logiciels</li>
<li>Conseil maintenance des équipements informatiques</li>
<li>Assemblage et emballage des équipements</li>
<li>Test et contrôle qualité avant expédition</li>
<li>Suivi des niveaux de stock</li>
<li>Installation physique des équipements et logiciels</li>
</ul>
</article>
<article>
<h3 class="fw-bold">Stage Vendeur, Réparateur</h3>
<p class="text-muted-custom mb-0">2024, GSM Store, Saint-Étienne</p>
</article>
</section>
<!-- Compétences -->
<section class="section-card">
<h2 class="section-title h4">Compétences</h2>
<div class="skill-item">
<div class="skill-label">Réseaux informatiques</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
style="width: 90%;"
aria-valuenow="90"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Réseaux informatiques - 90%">
90%
</div>
</div>
</div>
<div class="skill-item">
<div class="skill-label">Systèmes d'exploitation</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
style="width: 80%;"
aria-valuenow="80"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Systèmes d'exploitation - 80%">
80%
</div>
</div>
</div>
<div class="skill-item">
<div class="skill-label">Support technique</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
style="width: 85%;"
aria-valuenow="85"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Support technique - 85%">
85%
</div>
</div>
</div>
<div class="skill-item">
<div class="skill-label">Relation client</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
style="width: 75%;"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Relation client - 75%">
75%
</div>
</div>
</div>
</section>
</main>
<!-- Pied de page -->
<footer class="text-white py-4 mt-5">
<div class="container text-center">
<p class="mb-0">
<a href="https://github.com/rayan-145" aria-label="Profil GitHub de Rayan Abbes">
Voir mon profil GitHub
</a>
</p>
</div>
</footer>
<script>
// Matrix Rain Effect - Optimisé et BIEN VISIBLE
const canvas = document.getElementById('matrixCanvas');
const ctx = canvas.getContext('2d');
// Adapter taille canvas
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Caractères Matrix (binaire + hexadécimal + katakana)
const chars = '01010101アイウエオカキクケコABCDEF0123456789';
const charArray = chars.split('');
// Configuration pour PLUS DE VISIBILITÉ
const fontSize = 16;
const columns = canvas.width / fontSize;
const drops = [];
// Initialiser positions
for (let i = 0; i < columns; i++) {
drops[i] = Math.random() * -100;
}
// Fonction de dessin
function draw() {
// Fond noir semi-transparent pour effet de traînée VISIBLE
ctx.fillStyle = 'rgba(0, 0, 0, 0.04)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Vert Matrix BRILLANT
ctx.fillStyle = '#00ff41';
ctx.font = 'bold ' + fontSize + 'px monospace';
// Dessiner les caractères avec glow
ctx.shadowBlur = 10;
ctx.shadowColor = '#00ff41';
for (let i = 0; i < drops.length; i++) {
const text = charArray[Math.floor(Math.random() * charArray.length)];
const x = i * fontSize;
const y = drops[i] * fontSize;
// Variation d'opacité pour effet de profondeur
const opacity = Math.min(1, drops[i] / 20);
ctx.globalAlpha = opacity;
ctx.fillText(text, x, y);
// Réinitialiser la goutte
if (y > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
}
drops[i]++;
}
ctx.globalAlpha = 1;
}
// Animation à 30 FPS
setInterval(draw, 33);
// Redimensionnement responsive
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" defer></script>
</body>
</html>
