<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mattéo MARCHAND — CV Alternant Support Informatique</title>
<meta name="description" content="Découvrez le CV de Mattéo MARCHAND, alternant en support informatique à Saint-Étienne. Parcours, compétences, projets et formulaire de contact.">
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" crossorigin="anonymous">
</head>
<body>
<a href="#main" class="visually-hidden">Aller au contenu principal</a>
<header class="hero-section" role="banner">
<div class="container">
<img src="https://th.bing.com/th/id/R.9dd7ace32cfab6038b75e6b064a74fcf?rik=VFQVlx4DFu1O%2fA&pid=ImgRaw&r=0"
alt="Photo de profil de Mattéo MARCHAND"
class="profile-img mb-3"
loading="lazy">
<h1>Mattéo MARCHAND</h1>
<p class="lead">Alternant Support Informatique — CHU Hôpital Nord</p>
<nav aria-label="Liens vers mes réseaux">
<div class="social-links">
<a href="https://github.com/matteomarch23"
target="_blank"
rel="noopener noreferrer"
aria-label="Voir mes projets sur GitHub">
<i class="bi bi-github" aria-hidden="true"></i>
<span class="visually-hidden">Voir mes projets sur GitHub</span>
</a>
</div>
</nav>
</div>
</header>
<main id="main" role="main">
<div class="container">
<section id="apropos" class="section-card" aria-labelledby="titre-apropos">
<h2 id="titre-apropos" class="section-title">À propos de moi</h2>
<p>
Bonjour, je m’appelle <strong>Mattéo MARCHAND</strong>, j’ai 18 ans et je vis à Saint-Étienne.
Actuellement <strong>en BTS SIO au CFAI LDA</strong>, je suis passionné par l’informatique et le sport automobile.
</p>
<p>
En dehors de mes études, j’aime les voitures, les voyages et la fête — cela m’aide à développer ma créativité et mon sens du relationnel.
</p>
</section>
<section id="parcours" class="section-card" aria-labelledby="titre-parcours">
<h2 id="titre-parcours" class="section-title">Mon Parcours</h2>
<article class="timeline-item">
<h3>Lycée — Bac STI2D (Option SIN)</h3>
<p class="text-muted">2022 – 2025</p>
<p>Découverte du codage Arduino et des bases d’ingénierie.</p>
</article>
<article class="timeline-item">
<h3>CFAI LDA</h3>
<p class="text-muted">2025 – Aujourd'hui</p>
<p>Formation en alternance avec une approche pratique du développement informatique.</p>
</article>
<article class="timeline-item">
<h3>Alternant Support Informatique — CHU Hôpital Nord</h3>
<p class="text-muted">2025 – Aujourd'hui</p>
<p>Support technique aux utilisateurs, maintenance du matériel et gestion des incidents. Une expérience riche en apprentissage technique et humain.</p>
</article>
</section>
<section id="skills" class="section-card" aria-labelledby="titre-softskills">
<h2 id="titre-softskills" class="section-title">Mes Soft Skills</h2>
<div class="row">
<div class="col-md-6 text-center p-3">
<i class="skill-icon bi bi-people" aria-hidden="true"></i>
<h3>Travail d'équipe</h3>
<p>J’aime collaborer avec les autres pour atteindre des objectifs communs.</p>
</div>
<div class="col-md-6 text-center p-3">
<i class="skill-icon bi bi-arrows-move" aria-hidden="true"></i>
<h3>Adaptabilité</h3>
<p>Je sais m’adapter rapidement aux changements et aux nouveaux défis.</p>
</div>
<div class="col-md-6 text-center p-3">
<i class="skill-icon bi bi-lightbulb" aria-hidden="true"></i>
<h3>Créativité</h3>
<p>Je cherche toujours des solutions innovantes pour résoudre des problèmes.</p>
</div>
<div class="col-md-6 text-center p-3">
<i class="skill-icon bi bi-person-check" aria-hidden="true"></i>
<h3>Autonomie</h3>
<p>Je suis capable de travailler de manière indépendante et de prendre des initiatives.</p>
</div>
</div>
</section>
<section id="passions" class="section-card" aria-labelledby="titre-passions">
<h2 id="titre-passions" class="section-title">Mes Passions</h2>
<div class="row">
<div class="col-md-6 text-center p-3">
<i class="passion-icon bi bi-flag" aria-hidden="true"></i>
<h3>Sport Automobile</h3>
<p>Passionné de sport automobile depuis l’enfance, je restaure une voiture de course avec mon père, pour pouvoir courir en compétition.</p>
</div>
<div class="col-md-6 text-center p-3">
<i class="passion-icon bi bi-laptop" aria-hidden="true"></i>
<h3>Informatique</h3>
<p>Découverte du numérique par les jeux vidéo, puis passion pour la programmation et la cybersécurité.</p>
</div>
</div>
</section>
<section id="projets" class="section-card" aria-labelledby="titre-projets">
<h2 id="titre-projets" class="section-title">Mes Projets</h2>
<article class="timeline-item">
<h3>Développement d’un site web personnel</h3>
<p class="text-muted">Octobre 2025</p>
<p>Création d’un site web pour me présenter et mettre en pratique mes compétences front-end.</p>
</article>
<article class="timeline-item">
<h3>Outil open source d’analyse de vulnérabilités web</h3>
<p class="text-muted">2025 – 2026</p>
<p>Projet Python de détection automatique de vulnérabilités, me permettant d’approfondir mes connaissances en cybersécurité.</p>
</article>
</section>
<section id="contact" class="section-card" aria-labelledby="titre-contact">
<h2 id="titre-contact" class="section-title">Me Contacter</h2>
<form aria-label="Formulaire de contact">
<div class="mb-3">
<label for="nom" class="form-label">Votre nom</label>
<input type="text" class="form-control" id="nom" name="nom" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Votre email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Votre message</label>
<textarea class="form-control" id="message" name="message" rows="4" required></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary-custom">Envoyer</button>
</div>
</form>
</section>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous" defer></script>
</body>
</html>
