<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CV — Léandro Bonelli</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0f1724;
--card: #0b1220;
--muted: #98a1b3;
--accent-1: #2a92cb;
--accent-2: #d4af37; /* touche d'or */
--glass: rgba(255,255,255,0.04);
--radius: 14px;
color-scheme: dark;
}
*{box-sizing:border-box}
html,body{
height:100%;
margin:0;
font-family:Inter, system-ui, -apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;
background:linear-gradient(180deg,var(--bg),#071025);
color:#e6eef8;
scroll-behavior:smooth;
}
.container{
max-width:1100px;
margin:32px auto;
padding:28px;
display:grid;
grid-template-columns:340px 1fr;
gap:22px;
animation:fadeIn 1.2s ease-in-out;
}
@keyframes fadeIn {
from {opacity: 0; transform: translateY(30px);}
to {opacity: 1; transform: translateY(0);}
}
.sidebar{
background:linear-gradient(180deg,var(--card), rgba(8,12,20,0.7));
padding:22px;
border-radius:var(--radius);
backdrop-filter: blur(6px);
box-shadow:0 10px 30px rgba(2,6,23,0.6);
animation:slideIn 1.2s ease forwards;
}
@keyframes slideIn {
from {opacity: 0; transform: translateX(-30px);}
to {opacity: 1; transform: translateX(0);}
}
/* --- Photo ronde avec effet halo --- */
.photo {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
border: 3px solid var(--accent-2);
box-shadow: 0 0 20px rgba(212,175,55,0.6);
display: block;
margin: 0 auto 12px;
transition: transform 0.3s, box-shadow 0.3s;
}
.photo:hover {
transform: scale(1.1);
box-shadow: 0 0 30px rgba(212,175,55,0.9);
}
.name{
font-size:24px;
font-weight:800;
text-align:center;
margin-bottom:6px;
background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.role{
font-size:13px;
color:var(--muted);
text-align:center;
margin-bottom:14px;
}
.contact{
font-size:13px;
color:var(--muted);
display:grid;
gap:8px;
}
.chip{
display:flex;
gap:10px;
align-items:center;
padding:8px;
border-radius:10px;
background:var(--glass);
font-size:13px;
transition:0.3s;
}
.chip:hover{
background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
color:white;
transform:scale(1.05);
}
.main{
padding:22px;
border-radius:var(--radius);
background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
box-shadow:0 6px 30px rgba(2,6,23,0.5);
animation:fadeIn 1.4s ease-in-out;
}
header.top{margin-bottom:18px}
h1,h2,h3,h4,h5,h6{margin:0} /* Reset marges */
h1{font-size:28px}
h2{font-size:22px}
h3{font-size:18px}
.headline{font-weight:700;margin-bottom:6px;color:var(--accent-2)}
.sub{color:var(--muted);font-size:13px}
.card{
padding:18px;
border-radius:12px;
background:linear-gradient(180deg, rgba(255,255,255,0.03), var(--glass));
box-shadow:0 6px 12px rgba(2,6,23,0.45);
margin-bottom:14px;
transition:0.4s ease;
position:relative;
overflow:hidden;
}
.card::before {
content:"";
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:conic-gradient(from 0deg, transparent, var(--accent-2), transparent 30%);
opacity:0;
transition:opacity 0.4s ease;
}
.card:hover::before {
opacity:0.3;
animation:rotate 4s linear infinite;
}
@keyframes rotate {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
.card:hover {
transform:scale(1.02);
box-shadow:0 0 25px rgba(6,182,212,0.3);
}
.accordion{
margin-bottom:12px;
border-radius:12px;
overflow:hidden;
}
.acc-item{
background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
border-bottom:1px solid rgba(255,255,255,0.02);
transition:0.3s;
}
.acc-item:hover {
box-shadow:0 0 10px rgba(6,182,212,0.2);
}
.acc-head{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px;
cursor:pointer;
transition:0.3s;
}
.acc-head:hover{background:rgba(255,255,255,0.05)}
.acc-title{font-weight:700}
.acc-body{padding:14px 14px 18px;display:none;color:var(--muted);font-size:14px;animation:fadeIn 0.5s ease}
.skill-bar{height:8px;background:rgba(255,255,255,0.05);border-radius:8px;overflow:hidden;margin-bottom:8px}
.skill-level{height:100%;border-radius:8px}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tag{padding:6px 10px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));border-radius:10px;font-size:12px;font-weight:600;color:white;box-shadow:0 2px 6px rgba(0,0,0,0.3)}
/* --- Contact Section --- */
.contact-section {
margin-top:30px;
padding:20px;
border-radius:var(--radius);
background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
box-shadow:0 0 20px rgba(2,6,23,0.5);
}
form {
display:flex;
flex-direction:column;
gap:12px;
}
input, textarea {
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
border-radius:10px;
color:white;
padding:10px;
font-family:inherit;
font-size:14px;
outline:none;
transition:0.3s;
}
input:focus, textarea:focus {
border-color:var(--accent-2);
box-shadow:0 0 8px var(--accent-2);
}
button {
background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
border:none;
color:white;
padding:10px;
border-radius:10px;
font-weight:600;
cursor:pointer;
transition:0.3s;
}
button:hover {
transform:scale(1.05);
box-shadow:0 0 15px rgba(6,182,212,0.5);
}
</style>
</head>
<body>
<div class="container">
<aside class="sidebar">
<!-- PHOTO RONDE -->
<img src="https://i.pinimg.com/236x/c5/e2/72/c5e272d275b604346dbefb633eb30d51.jpg" alt="Photo de Léandro" class="photo">
<h1 class="name">Léandro</h1>
<h2 class="role">Étudiant en 1ère année de BTS SIO</h2>
<div class="contact">
<div class="chip">📍 Saint-Étienne, France</div>
<div class="chip">✉️ leandro@exemple.com</div>
<div class="chip">📱 06 00 00 00 00</div>
<div class="chip">💻 github.com/leandrobonelli07</div>
</div>
<div class="card">
<h2>Compétences</h2>
<p>HTML / CSS</p>
<div class="skill-bar"><div class="skill-level" style="width:60%;background:linear-gradient(90deg,var(--accent-1),var(--accent-2))"></div></div>
<p>Python / JavaScript</p>
<div class="skill-bar"><div class="skill-level" style="width:45%;background:linear-gradient(90deg,var(--accent-2),var(--accent-1))"></div></div>
<p>Bureautique (Word, Excel, PowerPoint)</p>
<div class="skill-bar"><div class="skill-level" style="width:85%;background:linear-gradient(90deg,var(--accent-1),#d4af37)"></div></div>
</div>
<div class="card">
<h2>Langues</h2>
<p>🇫🇷 Français — langue maternelle</p>
<p>🇬🇧 Anglais — niveau B1</p>
<p>🇮🇹 Italien — notions</p>
</div>
<div class="card">
<h2>Centres d’intérêt</h2>
<ul>
<li>Football depuis 12 ans ⚽</li>
<li>Jeux vidéo et nouvelles technologies 🎮</li>
<li>Voyages et découvertes 🌍</li>
</ul>
</div>
<div class="card">
<h2>Qualités personnelles</h2>
<div class="tag-cloud">
<div class="tag">Curieux</div>
<div class="tag">Sérieux</div>
<div class="tag">Motivé</div>
<div class="tag">Autonome</div>
<div class="tag">Esprit d’équipe</div>
<div class="tag">Créatif</div>
</div>
</div>
</aside>
<main class="main">
<header class="top">
<h2 class="headline">À propos</h2>
<p class="sub">Étudiant motivé et curieux, actuellement en première année de BTS SIO au CFAI Loire. Passionné par l’informatique et les technologies numériques, j’aime apprendre, découvrir de nouveaux outils et participer à des projets d’équipe.</p>
</header>
<div class="card">
<h2>Objectif professionnel</h2>
<p>Je souhaite acquérir de l’expérience dans le domaine de l’informatique à travers une alternance ou un stage, afin de développer mes compétences techniques et relationnelles. Mon objectif est de mieux comprendre le monde professionnel et d’évoluer dans un environnement stimulant.</p>
</div>
<section class="accordion">
<div class="acc-item">
<div class="acc-head" onclick="toggleAcc(this)">
<h2 class="acc-title">Expériences professionnelles</h2>
<div class="acc-action">−</div>
</div>
<div class="acc-body" style="display: block;">
<h3>Stagiaire — Cegib</h3> <span style="color:var(--muted)"> | Saint-Didier-en-Velay (Nov–Déc 2024)</span>
<ul>
<li>Découverte des métiers du service informatique.</li>
<li>Observation et accompagnement des techniciens sur site.</li>
<li>Participation à la maintenance et au dépannage du matériel.</li>
</ul>
<h3>Stagiaire — Stelec</h3> <span style="color:var(--muted)"> | Saint-Étienne (Jan–Fév 2024)</span>
<ul>
<li>Découverte du fonctionnement d’une entreprise industrielle.</li>
<li>Participation à la mise à jour de documents internes.</li>
<li>Apprentissage du travail en équipe et de la communication professionnelle.</li>
</ul>
</div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAcc(this)">
<h2 class="acc-title">Formation</h2>
<div class="acc-action">−</div>
</div>
<div class="acc-body" style="display: block;">
<h3>BTS SIO — Services Informatiques aux Organisations</h3> | 2025 - en cours
<p>CFAI Loire — Études en informatique : programmation, réseaux, gestion de projets et bases de données.</p>
<h3>Bac pro MELEC</h3> | 2022 - 2025
<p>Lycée Notre-Dame du Château, Monistrol-sur-Loire — Mention Assez bien.</p>
<h3>Brevet des collèges</h3> | 2021
<p>Collège Jeanne d’Arc, Saint-Didier-en-Velay — Mention Assez bien.</p>
</div>
</div>
</section>
<section class="contact-section" id="contact">
<h2 style="color:var(--accent-2);">📬 Me contacter</h2>
<form action="#" method="post">
<input type="text" name="name" placeholder="Votre nom" required>
<input type="email" name="email" placeholder="Votre email" required>
<textarea name="message" rows="4" placeholder="Votre message..." required></textarea>
<button type="submit">Envoyer le message 💌</button>
</form>
</section>
</main>
</div>
<script>
function toggleAcc(el){
const body = el.nextElementSibling;
const action = el.querySelector('.acc-action');
const open = body.style.display === 'block';
body.style.display = open ? 'none' : 'block';
action.textContent = open ? '+' : '−';
}
document.addEventListener('DOMContentLoaded', ()=>{
const first = document.querySelector('.acc-item .acc-head');
if(first) first.click();
});
</script>
</body>
</html>
