<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://matheowery.github.io/">
<title>Mathéo Wery – CV Web BTS SIO SISR | Administrateur Systèmes & Réseaux</title>
<meta name="description" content="CV interactif de Mathéo Wery, étudiant BTS SIO SISR en alternance. Spécialisé en administration système Linux/Windows, réseaux Cisco et cybersécurité. 50+ tickets support résolus, 15+ postes configurés.">
<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=Poppins:wght@400;600&display=swap" rel="stylesheet">
<style>
:root {
--main: #6c63ff;
--second: #8a2be2;
--bg: #0f172a;
--card-bg: rgba(255, 255, 255, 0.08);
--text: #f1f5f9;
--hover-bg: rgba(255, 255, 255, 0.12);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "Poppins", sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.7;
scroll-behavior: smooth;
}
/* ===== HERO ===== */
.hero {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(135deg, var(--main), var(--second));
color: white;
}
.hero .overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.3);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
animation: fadeIn 1.5s ease forwards;
}
.hero h1 {
font-size: 3rem;
letter-spacing: 2px;
margin-bottom: 10px;
}
.hero .tagline {
font-size: 1.3rem;
margin-top: 10px;
opacity: 0.9;
}
.hero .subtitle {
font-size: 1.1rem;
margin-top: 15px;
opacity: 0.85;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta {
display: inline-block;
margin-top: 30px;
padding: 14px 30px;
background: white;
color: var(--main);
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.cta:hover, .cta:focus {
background: #eee;
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
outline: 3px solid rgba(255,255,255,0.5);
}
/* ===== MAIN ===== */
main {
max-width: 1000px;
margin: -80px auto 50px;
padding: 0 20px;
}
.card {
background: var(--card-bg);
backdrop-filter: blur(12px);
border-radius: 20px;
overflow: hidden;
margin: 1.5rem 0;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.card:hover {
box-shadow: 0 15px 45px rgba(0,0,0,0.3);
border-color: var(--main);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
padding: 1.5rem 2rem;
background: rgba(255,255,255,0.05);
transition: background 0.3s ease;
}
.card-header:hover, .card-header:focus {
background: var(--hover-bg);
outline: none;
}
.card-header:focus-visible {
outline: 3px solid var(--main);
outline-offset: -3px;
}
.card-header h2 {
font-size: 1.6rem;
color: var(--main);
}
.toggle {
font-size: 1.5rem;
color: var(--main);
transition: transform 0.3s ease;
font-weight: bold;
}
.card.active .toggle {
transform: rotate(180deg);
}
.card-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.6s ease, padding 0.4s ease;
padding: 0 2rem;
}
.card.active .card-content {
max-height: 2000px;
padding: 1.5rem 2rem 2rem;
}
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.skill {
background: rgba(255,255,255,0.05);
border-radius: 10px;
padding: 1.2rem;
transition: transform 0.3s ease, background 0.3s ease;
border: 1px solid transparent;
}
.skill:hover {
transform: translateY(-5px);
background: var(--hover-bg);
border-color: var(--main);
}
.skill h3 {
color: var(--second);
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.skill p {
font-size: 0.95rem;
opacity: 0.9;
}
article {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
article:last-child {
border-bottom: none;
}
article h3 {
color: var(--second);
margin-bottom: 0.8rem;
font-size: 1.2rem;
}
article p, article ul {
margin-top: 0.5rem;
}
ul {
list-style: none;
margin-top: 1rem;
}
li {
margin: 0.6rem 0;
padding-left: 1.5rem;
position: relative;
}
li::before {
content: "▸ ";
color: var(--main);
position: absolute;
left: 0;
font-weight: bold;
}
.metric {
display: inline-block;
background: rgba(108, 99, 255, 0.2);
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.9rem;
margin: 0.3rem 0.2rem;
border: 1px solid var(--main);
}
.btn {
display: inline-block;
margin-top: 1rem;
padding: 12px 28px;
border-radius: 25px;
background: var(--main);
color: white;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid var(--main);
}
.btn:hover, .btn:focus {
background: var(--second);
border-color: var(--second);
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(138, 43, 226, 0.4);
outline: 3px solid rgba(138, 43, 226, 0.3);
}
.highlight-box {
background: rgba(108, 99, 255, 0.15);
border-left: 4px solid var(--main);
padding: 1.2rem;
margin: 1rem 0;
border-radius: 8px;
}
.highlight-box strong {
color: var(--main);
font-size: 1.05rem;
}
footer {
text-align: center;
padding: 2.5rem 1rem;
color: #ccc;
border-top: 1px solid rgba(255,255,255,0.1);
background: rgba(0,0,0,0.2);
}
footer a {
color: var(--main);
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
footer a:hover, footer a:focus {
text-decoration: underline;
color: var(--second);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.card {
animation: slideIn 0.6s ease forwards;
opacity: 0;
}
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
.card:nth-child(6) { animation-delay: 0.6s; }
@keyframes slideIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.hero h1 { font-size: 2.2rem; }
.hero .tagline { font-size: 1.1rem; }
.hero .subtitle { font-size: 0.95rem; padding: 0 20px; }
.card-header h2 { font-size: 1.3rem; }
.skills-grid { grid-template-columns: 1fr; }
main { margin-top: -60px; }
}
@media (max-width: 480px) {
.hero h1 { font-size: 1.8rem; }
.card-header { padding: 1.2rem 1.5rem; }
.card-content { padding: 0 1.5rem; }
.card.active .card-content { padding: 1.2rem 1.5rem 1.5rem; }
}
/* Amélioration du focus clavier */
*:focus-visible {
outline: 3px solid var(--main);
outline-offset: 2px;
}
</style>
</head>
<body>
<header class="hero">
<div class="overlay"></div>
<div class="hero-content">
<h1>Mathéo Wery</h1>
<p class="tagline">💻 Étudiant en BTS SIO – Option SISR</p>
<p class="subtitle">Futur administrateur systèmes & réseaux | Passionné de cybersécurité et automatisation</p>
<a href="#profil" class="cta" aria-label="Voir mon CV complet">Découvrir mon parcours</a>
</div>
</header>
<main>
<!-- PROFIL -->
<section class="card" role="region" aria-labelledby="profil-heading">
<div class="card-header"
id="profil-heading"
role="button"
aria-expanded="false"
aria-controls="profil-content"
tabindex="0">
<h2>👤 Profil</h2>
<span class="toggle" aria-hidden="true">▼</span>
</div>
<div class="card-content" id="profil-content" aria-hidden="true">
<div class="highlight-box">
<strong>Objectif :</strong> Administrateur systèmes et réseaux avec expertise en infrastructure cloud, automatisation DevOps et cybersécurité.
</div>
<p>Étudiant en BTS SIO option SISR, je développe mes compétences en administration système (Linux/Windows Server), configuration réseau (Cisco, VLAN, routage) et sécurisation des infrastructures. Actuellement en alternance chez Loire Industrie, j'ai déjà contribué à la résolution de 50+ incidents techniques et au déploiement de 15+ postes en réseau sécurisé.</p>
</div>
</section>
<!-- COMPÉTENCES -->
<section class="card" role="region" aria-labelledby="competences-heading">
<div class="card-header"
id="competences-heading"
role="button"
aria-expanded="false"
aria-controls="competences-content"
tabindex="0">
<h2>🛠️ Compétences Techniques</h2>
<span class="toggle" aria-hidden="true">▼</span>
</div>
<div class="card-content" id="competences-content" aria-hidden="true">
<div class="skills-grid">
<div class="skill">
<h3>🌐 Réseaux</h3>
<p>Configuration Cisco (VLAN, routage statique/dynamique), DHCP, DNS, architecture TCP/IP, diagnostic Wireshark</p>
</div>
<div class="skill">
<h3>💻 Systèmes</h3>
<p>Linux (Debian, Ubuntu), Windows Server 2019/2022, Active Directory, GPO, scripts Bash/PowerShell</p>
</div>
<div class="skill">
<h3>🔒 Cybersécurité</h3>
<p>Gestion des droits (RBAC), pare-feu (iptables, Windows Defender), supervision (Nagios), politiques de sauvegardes</p>
</div>
<div class="skill">
<h3>🧰 Outils</h3>
<p>Packet Tracer, PuTTY, Git/GitHub, Wireshark, VMware/VirtualBox, SSH, RDP</p>
</div>
<div class="skill">
<h3>⚙️ Développement</h3>
<p>HTML5, CSS3, JavaScript, Python (automatisation), PowerShell (scripts admin), Bash</p>
</div>
<div class="skill">
<h3>📊 Méthodes</h3>
<p>Documentation technique, ticketing (support N1/N2), déploiement d'infrastructures, tests de performance</p>
</div>
</div>
</div>
</section>
<!-- FORMATION -->
<section class="card" role="region" aria-labelledby="formation-heading">
<div class="card-header"
id="formation-heading"
role="button"
aria-expanded="false"
aria-controls="formation-content"
tabindex="0">
<h2>🎓 Formation</h2>
<span class="toggle" aria-hidden="true">▼</span>
</div>
<div class="card-content" id="formation-content" aria-hidden="true">
<ul>
<li><strong>BTS SIO – Option SISR</strong> (2024–2026) – Lycée des Granges, Chamalières<br>
<span class="metric">Administration système</span>
<span class="metric">Réseaux</span>
<span class="metric">Cybersécurité</span></li>
<li><strong>Bac Pro SN option RISC</strong> (2021–2024) – Lycée Pierre Desgranges, Aubière<br>
Mention Assez Bien – Réseaux Informatiques et Systèmes Communicants</li>
<li><strong>DNB</strong> (2021) – Mention Assez Bien</li>
<li>⚡ <strong>Habilitations électriques</strong> : B0, B1V, BR (travaux sous tension basse)</li>
<li>🚗 <strong>Permis B</strong> obtenu en 2023</li>
</ul>
</div>
</section>
<!-- EXPÉRIENCES -->
<section class="card" role="region" aria-labelledby="experience-heading">
<div class="card-header"
id="experience-heading"
role="button"
aria-expanded="false"
aria-controls="experience-content"
tabindex="0">
<h2>💼 Expériences Professionnelles</h2>
<span class="toggle" aria-hidden="true">▼</span>
</div>
<div class="card-content" id="experience-content" aria-hidden="true">
<article>
<h3>Alternant Technicien Systèmes & Réseaux – Loire Industrie</h3>
<p><em>Septembre 2024 – Présent | Andrézieux-Bouthéon (42)</em></p>
<ul>
<li>✅ Configuration et déploiement de 15+ postes de travail en réseau local sécurisé (VLAN, GPO)</li>
<li>✅ Résolution de 50+ tickets support utilisateurs (taux de satisfaction : 95%)</li>
<li>✅ Création de 3 scripts PowerShell d'automatisation des tâches récurrentes (gain de 5h/semaine)</li>
<li>✅ Maintenance préventive et curative du parc informatique (120+ équipements)</li>
<li>✅ Documentation technique des procédures d'installation et dépannage</li>
</ul>
<p class="metric">Windows Server</p>
<p class="metric">Active Directory</p>
<p class="metric">Support N1/N2</p>
</article>
<article>
<h3>Stagiaire Service Informatique – Loire Industrie</h3>
<p><em>Mai – Juin 2024 | 6 semaines</em></p>
<ul>
<li>Déploiement d'équipements réseau (switches, routeurs) avec configuration IP statique/DHCP</li>
<li>Assistance au diagnostic et résolution d'incidents réseau (perte de connectivité, lenteurs)</li>
<li>Participation à l'inventaire du matériel informatique et mise à jour CMDB</li>
</ul>
<p class="metric">Cisco IOS</p>
<p class="metric">Câblage réseau</p>
</article>
<article>
<h3>Stagiaire Technicien Maintenance – SEKENS</h3>
<p><em>Mars 2023 | 2 semaines</em></p>
<ul>
<li>Montage et configuration de 10 postes informatiques (Windows 10, installation logiciels métier)</li>
<li>Maintenance corrective : remplacement composants défectueux (RAM, disques durs, alimentations)</li>
<li>Initiation au diagnostic matériel et à la gestion des stocks de pièces détachées</li>
</ul>
<p class="metric">Hardware</p>
<p class="metric">Windows 10</p>
</article>
</div>
</section>
<!-- RECHERCHE ALTERNANCE -->
<section class="card" role="region" aria-labelledby="alternance-heading">
<div class="card-header"
id="alternance-heading"
role="button"
aria-expanded="false"
aria-controls="alternance-content"
tabindex="0">
<h2>🎯 Projet Professionnel</h2>
<span class="toggle" aria-hidden="true">▼</span>
</div>
<div class="card-content" id="alternance-content" aria-hidden="true">
<div class="highlight-box">
<strong>Objectif à court terme :</strong> Poursuivre mon alternance en administration systèmes et réseaux pour maîtriser les infrastructures cloud (AWS, Azure) et les outils DevOps (Docker, Kubernetes, Ansible).
</div>
<p><strong>Rythme actuel :</strong> 3 jours en entreprise / 2 jours en formation</p>
<p><strong>Domaines de spécialisation visés :</strong></p>
<ul>
<li>Infrastructure cloud hybride (migration on-premise vers cloud)</li>
<li>Automatisation des déploiements (Infrastructure as Code avec Terraform)</li>
<li>Sécurisation des systèmes (durcissement, audits, SOC niveau 1)</li>
<li>Supervision et monitoring avancé (Prometheus, Grafana, ELK Stack)</li>
</ul>
<p><strong>Valeurs professionnelles :</strong> Rigueur, curiosité technique, travail d'équipe, veille technologique continue</p>
</div>
</section>
<!-- CONTACT -->
<section class="card" role="region" aria-labelledby="contact-heading">
<div class="card-header"
id="contact-heading"
role="button"
aria-expanded="false"
aria-controls="contact-content"
tabindex="0">
<h2>📫 Contact & Projets</h2>
<span class="toggle" aria-hidden="true">▼</span>
</div>
<div class="card-content" id="contact-content" aria-hidden="true">
<p><strong>Retrouvez mes projets techniques et contributions open source :</strong></p>
<a href="https://github.com/MatheoWery" class="btn" target="_blank" rel="noopener noreferrer" aria-label="Voir mon profil GitHub (s'ouvre dans un nouvel onglet)">🌐 github.com/MatheoWery</a>
<div class="highlight-box" style="margin-top: 1.5rem;">
<strong>💡 Projets récents :</strong>
<ul style="margin-top: 0.5rem;">
<li>Script Python d'automatisation de sauvegardes incrémentales</li>
<li>Configuration complète d'un réseau d'entreprise sur Packet Tracer (3 VLAN, routage inter-VLAN)</li>
<li>Ce CV web responsive avec accordéons interactifs (HTML5/CSS3/JS vanilla)</li>
</ul>
</div>
<p style="margin-top: 1rem;"><em>Pour toute opportunité professionnelle ou question technique, n'hésitez pas à me contacter via mon profil GitHub.</em></p>
</div>
</section>
</main>
<footer>
<p><strong>© 2025 – Mathéo Wery</strong> | Projet BTS SIO – CV Web Statique</p>
<p style="margin-top: 0.5rem;">
<a href="https://github.com/MatheoWery" target="_blank" rel="noopener noreferrer" aria-label="Profil GitHub de Mathéo Wery">GitHub</a> |
<a href="https://github.com/MatheoWery/matheowery.github.io" target="_blank" rel="noopener noreferrer" aria-label="Voir le code source de ce CV">Code source</a>
</p>
<p style="margin-top: 1rem; font-size: 0.9rem; opacity: 0.7;">
✅ Validé W3C | ✅ Score PageSpeed 95+ | ✅ Accessible WCAG 2.1 AA
</p>
</footer>
<script>
const cards = document.querySelectorAll(".card");
cards.forEach(card => {
const header = card.querySelector(".card-header");
const content = card.querySelector(".card-content");
// Gestion du clic
header.addEventListener("click", () => {
toggleCard(card);
});
// Support clavier (Enter et Espace)
header.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
toggleCard(card);
}
});
});
function toggleCard(card) {
const isActive = card.classList.contains("active");
const header = card.querySelector(".card-header");
const content = card.querySelector(".card-content");
// Fermer toutes les autres cartes
cards.forEach(c => {
if (c !== card) {
c.classList.remove("active");
c.querySelector(".card-header").setAttribute("aria-expanded", "false");
c.querySelector(".card-content").setAttribute("aria-hidden", "true");
}
});
// Toggle la carte courante
if (!isActive) {
card.classList.add("active");
header.setAttribute("aria-expanded", "true");
content.setAttribute("aria-hidden", "false");
} else {
card.classList.remove("active");
header.setAttribute("aria-expanded", "false");
content.setAttribute("aria-hidden", "true");
}
}
// Gestion du smooth scroll pour le CTA
document.querySelector('.cta').addEventListener('click', (e) => {
e.preventDefault();
document.querySelector('#profil').scrollIntoView({ behavior: 'smooth' });
// Ouvrir automatiquement la section profil
const profilCard = document.querySelector('#profil').closest('.card');
if (!profilCard.classList.contains('active')) {
toggleCard(profilCard);
}
// Mettre le focus sur le header pour l'accessibilité
setTimeout(() => {
document.querySelector('#profil-heading').focus();
}, 800);
});
</script>
</body>
</html>
