<!doctype html>
<html lang="fr">
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Mon CV HTML CSS SOL Camille Alternance BTS SIO </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<header class=header-profil>
</div>
<h1>SOL CAMILLE</h1>
<p class=poste >Alternante BTS Services Informatiques aux Organisations au CFAI </p>
<p class=statut >Actuellement stagiaire dans la formation (2 semaines École/2 semaines Entreprise). Disponible immédiatement.</p>
</header>
<main class=cv-container>
<div class=colonne-gauche>
<section class=section-contact>
<h2>CONTACT & PROFIL</h2>
<p><i class="fas fa-map-marker-alt"></i> 42110 JAS</p>
<p><i class="fas fa-mobile-alt"></i> 07 68 65 29 78</p>
<p><i class="fas fa-envelope"></i> camille.sol42@gmail.com</p>
<p><i class="fas fa-birthday-cake"></i> 20 ans</p>
<p><i class="fas fa-car"></i> Permis B</p>
<div class=summary-box>
<p>Étudiante en BTS informatique, motivée et sérieuse.</p>
<p>J'ai des expériences variées (santé, commerce, sécurité civile) qui m'ont permis de développer rigueur, autonomie et sens du travail en équipe.</p>
<p>Passionnée par le numérique, je souhaite mettre mes compétences au service d'une entreprise innovante.</p>
</div>
</section>
<section id="competences">
<h2>Compétences Techniques</h2>
<div class="competence-item">
<span class="nom-competence">HTML & CSS</span>
<div class="barre-progression" data-niveau="85">
<div class="niveau-atteint"></div>
</div>
</div>
<div class="competence-item">
<span class="nom-competence">Python / C#</span>
<div class="barre-progression" data-niveau="75">
<div class="niveau-atteint"></div>
</div>
</div>
<div class="competence-item">
<span class="nom-competence">SQL</span>
<div class="barre-progression" data-niveau="60">
<div class="niveau-atteint"></div>
</div>
</div>
<div class="competence-item">
<span class="nom-competence">LaTeX / OCaml</span>
<div class="barre-progression" data-niveau="50">
<div class="niveau-atteint"></div>
</div>
</div>
<div class="competence-item">
<span class="nom-competence">Bureautique & Organisation de données</span>
<div class="barre-progression" data-niveau="90">
<div class="niveau-atteint"></div>
</div>
</div>
</section>
<section id="projets">
<h2>Projets Personnels</h2>
<div class="projet-item">
<p>Création de pages web </p>
<p>Mise en page de documents (LaTeX) </p>
</div>
</section>
<section id="interets">
<h2>Centres d'Intérêt</h2>
<div class="interet-card">
<span class="interet-nom"><i class="fas fa-bullseye"></i> Tir Sportif</span>
<span class="interet-detail">(Concentration / Rigueur)</span>
</div>
<div class="interet-card">
<span class="interet-nom"><i class="fas fa-plane"></i> Voyages</span>
<span class="interet-detail">(Ouverture à la nouveauté)</span>
</div>
<div class="interet-card">
<span class="interet-nom"><i class="fas fa-motorcycle"></i> Moto</span>
<span class="interet-detail">(Passion et mécanique)</span>
</div>
</section>
</div>
<div class="colonne-droite">
<section id="experiences">
<h2>EXPÉRIENCES PROFESSIONNELLES</h2>
<article class="job-card">
<details>
<summary class="job-title-line">
<span class="poste-titre">Stagiaire au SDIS</span>
<span class="job-lieu-date">Saint-Etienne | (2023)</span>
</summary>
<ul class="job-details">
<li>Présentation des engagements</li>
<li>Préparation de l'action citoyenne</li>
<li>Sport</li>
</ul>
</details>
</article>
<article class="job-card">
<details>
<summary class="job-title-line">
<span class="poste-titre">Stagiaire à Moto Forum</span>
<span class="job-lieu-date">Feurs | 2023</span>
</summary>
<ul class="job-details">
<li>Mise en rayon, conseil et service client</li>
<li>Stockage et nettoyage des équipements</li>
</ul>
</details>
</article>
<article class="job-card">
<details>
<summary class="job-title-line">
<span class="poste-titre">Stagiaire à la Pharmacie SOL</span>
<span class="job-lieu-date">Aurec sur Loire | 2022</span>
</summary>
<ul class="job-details">
<li>Production de cosmétique </li>
<li>Mise en place, organisation </li>
<li>Nettoyages de locaux, contact client</li>
</ul>
</details>
</article>
</section>
<section id="formation">
<h2>DIPLÔMES & FORMATION</h2>
<div class="formation-item">
<p class="diplome-titre">Licence informatique (non fini) </p>
<p class="etablissement">Université Jean Monnet |2023-2025 </p>
</div>
<div class="formation-item">
<p class="diplome-titre">Baccalauréat Général </p>
<p class="etablissement">Lycée du Forez | 2023</p>
</div>
<div class="formation-item">
<p class="diplome-titre">Diplôme national du brevet </p>
<p class="etablissement">Collège Champagnat | 2020 </p>
</div>
</section>
<section id="qualites">
<h2>Compétences Transversales</h2>
<ul>
<li><i class="fas fa-check-circle"></i> Organisation & Rigueur (acquises lors de la production en pharmacie et de la gestion des stocks)</li>
<li><i class="fas fa-check-circle"></i> Adaptabilité (immersion dans différents environnements : santé, commerce, sécurité civile)</li>
<li><i class="fas fa-check-circle"></i> Esprit d'équipe & Communication (expériences en contact client, sensibilisation citoyenne au SDIS) </li>
<li><i class="fas fa-check-circle"></i> Autonomie & Fiabilité (capacité à mener des tâches variées en toute responsabilité) </li>
</ul>
</section>
</div>
<footer class="footer">
<p>CV de SOL Camille </p>
</footer>
<script>
function animateSkills(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
const progressBars = document.querySelectorAll('.barre-progression');
progressBars.forEach(bar => {
const level = bar.getAttribute('data-niveau');
bar.querySelector('.niveau-atteint').style.width = level + '%';
});
observer.unobserve(entry.target);
}
});
}
const options = {
root: null,
rootMargin: '0px',
threshold: 0.5
};
const observer = new IntersectionObserver(animateSkills, options);
const skillsSection = document.getElementById('competences');
if (skillsSection) {
observer.observe(skillsSection);
}
</script>
</body>
</html>
