Dans le cadre du cours de “développement web” mené par Maxime Mercier, nous avons réalisé un CV web en respectant des consignes sur le minimum nécessaire.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Bérénice Cambier – CV Web</title>
<meta name="description" content="CV en ligne de Bérénice Cambier (Master Information-Documentation) : projets, compétences, parcours et contact.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">
<link href="<https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css>" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Loader -->
<div id="pageLoader" aria-label="Chargement" role="status">
<div class="loader-inner">
<!-- Version 100% CSS (ne dépend d'aucune librairie) -->
<div class="loader-flame" aria-hidden="true"></div>
<div class="loader-text">Chargement…</div>
</div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
<div class="container">
<div class="d-flex align-items-center gap-2">
<button id="toggleDarkMode" type="button" class="btn btn-outline-light btn-sm" aria-label="Basculer le mode sombre">🌙</button>
<a class="navbar-brand mb-0" href="#hero">Bérénice</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Ouvrir le menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" id="nav-apropos" href="#apropos">Présentation</a></li>
<li class="nav-item"><a class="nav-link" id="nav-competences" href="#competences">Compétences</a></li>
<li class="nav-item"><a class="nav-link" id="nav-projets" href="#projets">Projets</a></li>
<li class="nav-item"><a class="nav-link" id="nav-parcours" href="#parcours">Parcours</a></li>
<li class="nav-item"><a class="nav-link" id="nav-interets" href="#interets-activites">Hobbies & centres d’intérêt</a></li>
<li class="nav-item"><a class="nav-link" href="PDF/Bérénice Cambier - CV Version Web.pdf" download>📄 CV</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero -->
<header id="hero" class="hero fade-in">
<div class="container">
<img src="Images/GIF/gif_profil.gif" alt="GIF de profil" class="hero-photo mb-3">
<h1>
<a href="<https://www.linkedin.com/in/b%C3%A9r%C3%A9nice-cambier-6a3076362/>" target="_blank" rel="noopener" class="text-white text-decoration-none">
Bérénice Cambier
</a>
</h1>
<p>Étudiante · Autrice · Créatrice de projets numériques</p>
<div class="row g-3 justify-content-center mt-4">
<div class="col-12 col-md-auto d-grid">
<a class="btn btn-light btn-lg" href="#contact">Me contacter</a>
</div>
<div class="col-12 col-md-auto d-grid">
<a href="PDF/Bérénice Cambier - CV Version Web.pdf" class="btn btn-outline-light btn-lg" download>📄 Télécharger le CV</a>
</div>
<div class="col-12 col-md-auto d-grid">
<a href="<https://www.linkedin.com/in/b%C3%A9r%C3%A9nice-cambier-6a3076362/>" target="_blank" rel="noopener" class="btn btn-outline-light btn-lg" aria-label="LinkedIn">
<i class="bi bi-linkedin"></i>
</a>
</div>
<div class="col-12 col-md-auto d-grid">
<a href="<https://berenice-cambier.notion.site/portefolio-berenice-cambier-14f3589765878106bf6bec0c8751210d>" target="_blank" rel="noopener" class="btn btn-outline-light btn-lg" aria-label="Portfolio">
<i class="bi bi-collection"></i>
</a>
</div>
</div>
</div>
</header>
<main>
<!-- À Propos -->
<section id="apropos" class="section">
<div class="container">
<h2>À propos de moi</h2>
<p class="lead mb-3">
<span class="text-success fw-bold">Je m’intéresse aux usages numériques, à la médiation de l’information et à la création de projets culturels et créatifs.</span>
</p>
<p class="mb-0">
Étudiante en Master Information-Documentation, je combine une sensibilité éditoriale et une approche structurée de la gestion de projet. J’aime concevoir des supports clairs et agréables à parcourir, et transformer des idées en contenus organisés (veille, rédaction, mise en forme, interfaces web). Curieuse et autonome, je prends plaisir à apprendre par l’expérimentation, à améliorer les détails (lisibilité, cohérence visuelle, accessibilité) et à créer des projets qui mettent en valeur des informations et des récits.
</p>
</div>
</section>
<!-- Compétences -->
<section id="competences" class="section fade-in">
<div class="container">
<h2>Compétences</h2>
<div class="row g-4">
<div class="col-12 col-sm-6 col-lg-3">
<div class="skill-card" role="button" tabindex="0" data-bs-toggle="modal" data-bs-target="#modalComp" data-skill-title="Informatique" data-skill-content="<p>Je conçois des pages web simples et responsives en HTML et CSS, et j’utilise Bootstrap pour structurer l’interface et gagner en cohérence visuelle. Je m’appuie aussi sur Notion pour organiser mes contenus, suivre des tâches et structurer des projets numériques.</p>">Informatique</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="skill-card" role="button" tabindex="0" data-bs-toggle="modal" data-bs-target="#modalComp" data-skill-title="Soft Skills" data-skill-content="<p>Je travaille de façon organisée et autonome, en priorisant les tâches et en avançant par étapes. J’apprécie le travail en équipe et je veille à communiquer clairement sur l’avancement, les besoins et les livrables. Je suis curieuse et j’apprends rapidement en testant, en itérant et en cherchant des solutions.</p>">Soft Skills</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="skill-card" role="button" tabindex="0" data-bs-toggle="modal" data-bs-target="#modalComp" data-skill-title="Production de contenu" data-skill-content="<p>Je produis des contenus clairs et structurés, en adaptant le ton et la forme au public et au support. J’ai une sensibilité éditoriale qui me permet de relire, améliorer et harmoniser un texte. J’aime aussi mettre en récit des projets et valoriser des idées à travers le storytelling.</p>">Production de contenu</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="skill-card" role="button" tabindex="0" data-bs-toggle="modal" data-bs-target="#modalComp" data-skill-title="Gestion de projet" data-skill-content="<p>Je sais cadrer un projet en identifiant les objectifs, les besoins et les contraintes, puis organiser les étapes de réalisation. Je peux construire un planning simple, suivre l’avancement et ajuster en fonction des priorités. Je veille à maintenir une coordination fluide et des livrables clairs.</p>">Gestion de projet</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="skill-card" role="button" tabindex="0" data-bs-toggle="modal" data-bs-target="#modalComp" data-skill-title="Bureautique" data-skill-content="<p>Je maîtrise les usages courants de la bureautique pour produire des documents et présentations soignés, synthétiques et lisibles. Je peux organiser des informations sous forme de tableaux, listes de suivi et checklists. Je travaille facilement en collaboration, avec une attention portée à la clarté et à la mise en forme.</p>">Bureautique</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="skill-card" role="button" tabindex="0" data-bs-toggle="modal" data-bs-target="#modalComp" data-skill-title="Langues" data-skill-content="<p>Je rédige avec aisance en français, y compris dans un cadre universitaire et éditorial. En anglais, je comprends et utilise la langue dans un contexte académique, notamment pour lire des ressources, préparer une présentation et communiquer sur un projet.</p>">Langues</div>
</div>
</div>
</div>
</section>
<!-- Modal compétences -->
<div class="modal fade" id="modalComp" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content rounded-4 p-3">
<div class="modal-header">
<h5 class="modal-title" id="modalCompTitle">Compétences détaillées</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body" id="modalCompBody">
<p>Sélectionne une compétence pour voir le détail.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div>
<!-- Projets -->
<section id="projets" class="section bg-body-tertiary p-4 rounded-4 shadow-sm fade-in">
<div class="container">
<h2>Mes projets</h2>
<ul class="nav nav-tabs mb-4" id="projetsTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tous" type="button">Tous</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#perso" type="button">Personnel</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#cours" type="button">Cours</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#pro" type="button">Professionnel</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tous">
<div class="row g-4">
<div class="col-12 col-sm-6 col-lg-3 project-item"><div class="card h-100"><img src="Images/JPG/veille_mais_ok.jpg" class="card-img-top" alt="Aperçu du projet Romans"><div class="card-body"><h5>Romans</h5><p>Projet d’écriture longue.</p></div></div></div>
<div class="col-12 col-sm-6 col-lg-3 project-item"><div class="card h-100"><img src="Images/JPG/mon_portrait_crache.jpg" class="card-img-top" alt="Aperçu du projet Podcast"><div class="card-body"><h5>Podcast</h5><p>Réflexions culturelles.</p></div></div></div>
<div class="col-12 col-sm-6 col-lg-3 project-item"><div class="card h-100"><img src="Images/WEBP/pas_la_mienne.webp" class="card-img-top" alt="Aperçu du projet Application lecture"><div class="card-body"><h5>Application lecture</h5><p>Recommandations personnalisées.</p></div></div></div>
<div class="col-12 col-sm-6 col-lg-3 project-item"><div class="card h-100"><img src="Images/PNG/random.png" class="card-img-top" alt="Aperçu du projet Portfolio web"><div class="card-body"><h5>Portfolio web</h5><p>CV numérique responsive.</p></div></div></div>
<div class="col-12 col-sm-6 col-lg-3 project-item"><div class="card h-100"><img src="Images/PNG/random.png" class="card-img-top" alt="Aperçu du projet CV Web"><div class="card-body"><h5>CV Web</h5><p>Réflexions culturelles.</p></div></div></div>
<div class="col-12 col-sm-6 col-lg-3 project-item"><div class="card h-100"><img src="Images/JPG/il_est_beau.jpg" class="card-img-top" alt="Aperçu du projet Campagne de communication - Musée"><div class="card-body"><h5>Campagne de communication - Musée</h5><p>Recommandations personnalisées.</p></div></div></div>
<div class="col-12 col-sm-6 col-lg-3 project-item"><div class="card h-100"><img src="Images/JPG/chers_mais_super.jpg" class="card-img-top" alt="Aperçu du projet 2.0"><div class="card-body"><h5>2.0</h5><p>Formation Notion.</p></div></div></div>
<div class="col-12 col-sm-6 col-lg-3 project-item"><div class="card h-100"><img src="Images/JPG/un_jour_tout_pareil.jpg" class="card-img-top" alt="Aperçu du projet Cloud Star Holding"><div class="card-body"><h5>Cloud Star Holding</h5><p>Maison mère permettant de regrouper tous les projets.</p></div></div></div>
</div>
</div>
<div class="tab-pane fade" id="perso">
<div class="row g-4">
<div class="col-12 col-sm-6 col-lg-3 project-item"><div class="card h-100"><img src="Images/JPG/veille_mais_ok.jpg" class="card-img-top" alt="Aperçu du projet Romans"><div class="card-body"><h5>Romans</h5><p>Projet d’écriture longue.</p></div></div></div>
<div class="col-12 col-sm-6 col-lg-3 project-item"><div class="card h-100"><img src="Images/PNG/random.png" class="card-img-top" alt="Aperçu du projet Portfolio web"><div class="card-body"><h5>Portfolio web</h5><p>CV numérique responsive.</p></div></div></div>
</div>
</div>
<div class="tab-pane fade" id="cours">
<div class="row g-4">
<div class="col-12 col-sm-6 col-lg-3 project-item"><div class="card h-100"><img src="Images/PNG/random.png" class="card-img-top" alt="Aperçu du projet CV Web"><div class="card-body"><h5>CV Web</h5><p>Réflexions culturelles.</p></div></div></div>
<div class="col-12 col-sm-6 col-lg-3 project-item"><div class="card h-100"><img src="Images/JPG/il_est_beau.jpg" class="card-img-top" alt="Aperçu du projet Campagne de communication - Musée"><div class="card-body"><h5>Campagne de communication - Musée</h5><p>Recommandations personnalisées.</p></div></div></div>
</div>
</div>
<div class="tab-pane fade" id="pro">
<div class="row g-4">
<div class="col-12 col-sm-6 col-lg-3 project-item"><div class="card h-100"><img src="Images/WEBP/pas_la_mienne.webp" class="card-img-top" alt="Aperçu du projet Application lecture"><div class="card-body"><h5>Application lecture</h5><p>Recommandations personnalisées.</p></div></div></div>
<div class="col-12 col-sm-6 col-lg-3 project-item"><div class="card h-100"><img src="Images/JPG/chers_mais_super.jpg" class="card-img-top" alt="Aperçu du projet 2.0"><div class="card-body"><h5>2.0</h5><p>Formation Notion.</p></div></div></div>
<div class="col-12 col-sm-6 col-lg-3 project-item"><div class="card h-100"><img src="Images/JPG/un_jour_tout_pareil.jpg" class="card-img-top" alt="Aperçu du projet Cloud Star Holding"><div class="card-body"><h5>Cloud Star Holding</h5><p>Maison mère permettant de regrouper tous les projets.</p></div></div></div>
<div class="col-12 col-sm-6 col-lg-3 project-item"><div class="card h-100"><img src="Images/WEBP/pas_la_mienne.webp" class="card-img-top" alt="Aperçu du projet Application lecture"><div class="card-body"><h5>Application lecture</h5><p>Recommandations personnalisées.</p></div></div></div>
</div>
</div>
</div>
</div>
</section>
<!-- Modal Projets-->
<div class="modal fade" id="projectModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content rounded-4 p-3">
<div class="modal-header">
<h5 class="modal-title" id="projectModalTitle">Projet</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body">
<img id="projectModalImg" src="" alt="Aperçu du projet" class="img-fluid rounded mb-3" style="width: 100%; max-height: 420px; object-fit: contain;">
<p id="projectModalDesc" class="mb-0"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div>
<!-- Parcours -->
<section id="parcours" class="section fade-in">
<div class="container">
<h2>Parcours</h2>
<div class="accordion" id="accordionParcours">
<!-- M2 -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseM2">🎓 Master IDEMM (M2)</button>
</h2>
<div id="collapseM2" class="accordion-collapse collapse show">
<div class="accordion-body">
<span class="keywords">Médiation numérique · UX · Analyse documentaire</span>
<p>Master pluridisciplinaire orienté vers la gestion, la valorisation et la médiation de l’information et des contenus numériques. Formation axée sur l’ingénierie documentaire, l’édition multimédia et les enjeux contemporains du numérique, croisant culture informationnelle, pratiques éditoriales, dispositifs numériques et médiation des savoirs. Développement de compétences en analyse des usages, structuration de l’information, conception de projets numériques, communication et coordination de projets, avec une forte sensibilité aux dimensions sociales, culturelles et éthiques du numérique.</p>
<a href="<https://master-idemm.univ-lille.fr>" target="_blank" class="link-success fw-semibold">→ Page officielle Master IDEMM</a>
</div>
</div>
</div>
<!-- M1 -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseM1">🎓 Master M1</button>
</h2>
<div id="collapseM1" class="accordion-collapse collapse">
<div class="accordion-body">
<span class="keywords">Recherche · Organisation · Culture info</span>
<p>Formation centrée sur les fondements théoriques et méthodologiques des sciences de l’information et de la documentation. Acquisition de compétences en recherche, analyse, organisation et diffusion de l’information, veille informationnelle, culture numérique et évaluation des sources. Approche articulant enjeux techniques, sociaux, éthiques et politiques de l’information, avec une attention portée aux usages, aux publics et aux dispositifs de médiation documentaire.</p>
<a href="<https://formation.univ-lille.fr/fr/offre-de-formation/master-lmd-XB/master-information-documentation-MG001937.html>" target="_blank" class="link-success fw-semibold">→ Page officielle Master M1</a>
</div>
</div>
</div>
<!-- Licence -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePsy">🎓 Licence Psychologie</button>
</h2>
<div id="collapsePsy" class="accordion-collapse collapse">
<div class="accordion-body">
<span class="keywords">Compréhension · Analyse publics · Facteurs humains</span>
<p>Formation universitaire en psychologie offrant une base théorique et méthodologique solide sur le fonctionnement psychique, cognitif, émotionnel et social des individus. Acquisition de compétences en analyse des comportements, compréhension des dynamiques individuelles et collectives, méthodologie de la recherche, esprit critique et rigueur scientifique. Sensibilisation aux enjeux éthiques, à l’observation, à l’écoute et à l’analyse des situations humaines dans des contextes variés.</p>
<a href="<https://psysef.univ-lille.fr/psychologie/formations/licence-de-psychologie>" target="_blank" class="link-success fw-semibold">→ Page officielle Licence Psychologie</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Centres d'intérêt & Activités -->
<section id="interets-activites" class="section fade-in py-5 bg-body-tertiary p-4 rounded-4 shadow-sm">
<div class="container">
<h2 class="mb-5">Centres d'intérêt & Activités</h2>
<div class="row g-4">
<!-- Centres d'intérêt -->
<div class="col-md-6">
<div class="card interets-card h-100 p-3 position-relative">
<h3 class="mb-3">Centres d'intérêt</h3>
<p>Quelques-uns de mes univers préférés :</p>
<ul class="list-unstyled d-flex flex-wrap gap-2 mt-3">
<li class="badge bg-success">Lecture</li>
<li class="badge bg-success">Écriture créative</li>
<li class="badge bg-success">Voyages</li>
<li class="badge bg-success">Apprentissages en vracs</li>
<li class="badge bg-success">Cuisine</li>
<li class="badge bg-success">Notion</li>
</ul>
<div class="image-placeholder mt-4 d-flex align-items-center justify-content-center">
<img src="Images/GIF/gif_hobbies.gif" alt="GIF hobbies" class="img-fluid rounded">
</div>
</div>
</div>
<!-- Activités -->
<div class="col-md-6">
<div class="card activites-card h-100 p-3 position-relative">
<h3 class="mb-3">Activités</h3>
<div class="d-flex flex-column gap-3 mt-3">
<div class="activity-item d-flex align-items-center gap-3">
<i class="bi bi-person-badge fs-3 text-success"></i>
<div>
<h5>Théâtre</h5>
<small>5 ans</small>
</div>
</div>
<div class="activity-item d-flex align-items-center gap-3">
<i class="bi bi-shield-check fs-3 text-success"></i>
<div>
<h5>Aïkido</h5>
<small>1 an</small>
</div>
</div>
<div class="activity-item d-flex align-items-center gap-3">
<i class="bi bi-flag fs-3 text-success"></i>
<div>
<h5>Éclaireuse</h5>
<small>1 an</small>
</div>
</div>
<div class="activity-item d-flex align-items-center gap-3">
<i class="bi bi-music-note-beamed fs-3 text-success"></i>
<div>
<h5>Danse contemporaine/ jazz/ moderne</h5>
<small>2 ans</small>
</div>
</div>
<div class="activity-item d-flex align-items-center gap-3">
<i class="bi bi-book fs-3 text-success"></i>
<div>
<h5>Bookstagram (Instagram + Livre)</h5>
<small>2 ans</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Formulaire de contact -->
<section id="contact" class="section fade-in">
<div class="container">
<h2>Contact</h2>
<form id="contactForm" action="#contact" method="post" class="row g-3">
<div class="col-md-6">
<label for="name" class="form-label">Nom</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="col-md-6">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="col-12">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" name="message" rows="4" required></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-success">Envoyer</button>
</div>
</form>
</div>
</section>
</main>
<!-- Scroll top -->
<button id="scrollTopBtn" type="button" class="btn btn-success" style="display:none; position: fixed; bottom: 20px; right: 20px; z-index: 1030; border-radius: 999px;">
⬆
</button>
<!-- Footer -->
<footer>
<p>© 2026 – Bérénice Cambier</p>
<p>
<a href="<https://www.linkedin.com/in/b%C3%A9r%C3%A9nice-cambier-6a3076362/>" target="_blank" rel="noopener" class="text-white text-decoration-underline">
Mon LinkedIn
</a>
</p>
<p>
<a href="<https://berenice-cambier.notion.site/portefolio-berenice-cambier-14f3589765878106bf6bec0c8751210d>" target="_blank" rel="noopener" class="text-white text-decoration-underline">
Mon portfolio
</a>
</p>
<i class="bi bi-book icons"></i>
<i class="bi bi-fire icons"></i>
</footer>
<!-- Message envoyé -->
<div class="modal fade" id="contactSentModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content rounded-4 p-3">
<div class="modal-header">
<h5 class="modal-title">Message envoyé</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body">
Message envoyé. Merci pour votre passage 🌸🙂
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>"></script>
<script src="script.js"></script>
</body>
</html>
:root {
--vert: #2d6a4f;
--vert-fonce: #1b4332;
--vert-clair: #b7e4c7;
--bg-hero: linear-gradient(135deg, var(--vert-fonce), var(--vert));
}
/* Base */
body {
font-family: 'Segoe UI', sans-serif;
scroll-behavior: smooth;
margin: 0;
padding: 0;
background-color: #f8f9fa;
color: #1b4332;
overflow-x: hidden;
}
html {
overflow-x: hidden;
}
h2 {
font-weight: 700;
margin-bottom: 20px;
text-align: left;
}
.section > .container > h2 {
text-align: left;
}
/* Hero */
.hero-photo {
display: block;
width: 170px;
height: 170px;
object-fit: cover;
border-radius: 999px;
margin: 0 auto;
border: 6px solid var(--vert-clair);
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
background: rgba(255, 255, 255, 0.15);
}
.hero {
background: var(--bg-hero);
padding: 160px 0;
text-align: center;
color: white;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.hero h1 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 10px;
}
.hero p {
font-size: 1.25rem;
font-weight: 500;
}
.hero .btn {
border-radius: 50px;
padding: 12px 30px;
font-weight: 600;
transition: all 0.3s ease;
}
.hero .btn:hover {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
/* Bouton "Me contacter" (meilleur contraste) */
.hero .btn.btn-light {
color: var(--vert-fonce);
}
/* Sections */
.section {
padding: 80px 0;
}
@media (max-width: 767.98px) {
.section {
padding: 56px 0;
}
}
#apropos.section {
padding-bottom: 45px;
}
#competences.section {
padding-top: 55px;
}
/* Compétences */
.skill-card {
background: var(--vert);
color: white;
padding: 25px;
text-align: center;
border-radius: 20px;
transition: 0.3s;
cursor: pointer;
box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}
.skill-card:hover {
background-color: var(--vert-fonce);
transform: translateY(-5px);
box-shadow: 0 12px 20px rgba(0,0,0,0.2);
}
/* Accordions Parcours */
.accordion {
max-width: 100%;
margin: 0;
padding: 0;
}
.accordion .accordion-button {
border-radius: 12px;
margin-bottom: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.accordion-body {
line-height: 1.6;
padding: 20px 25px;
border-left: 3px solid var(--vert);
border-radius: 0 0 12px 12px;
background: #ffffff;
margin-bottom: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
/* Mots-clés */
.keywords {
color: var(--vert);
font-style: italic;
font-weight: 700;
margin-bottom: 10px;
display: block;
}
/* Projets */
.project-item .card {
border-radius: 20px;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.project-item .card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}
.project-item h5 {
font-weight: 700;
}
.project-item .card {
overflow: hidden;
}
.project-item .card-img-top {
display: block;
width: 100%;
height: 140px;
object-fit: cover;
object-position: center;
}
/* Centres d'intérêt - Activités */
#interets-activites .card {
border: none;
border-radius: 1rem;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#interets-activites .card:hover {
transform: translateY(-5px);
box-shadow: 0 1rem 2rem rgba(0,0,0,0.15);
}
.interets-card {
display: flex;
flex-direction: column;
}
.interets-card .image-placeholder {
flex: 1;
min-height: 220px;
border: 2px solid rgba(45, 106, 79, 0.35);
border-radius: 1rem;
overflow: hidden;
background: rgba(45, 106, 79, 0.06);
}
.interets-card .image-placeholder img {
width: 80%;
height: 80%;
object-fit: contain;
display: block;
margin: auto;
}
.interets-card .image-placeholder:hover {
background-color: rgba(40, 167, 69, 0.05);
}
.activites-card .activity-item {
background-color: #e9f7ef;
border-radius: 1rem;
padding: 0.75rem 1rem;
transition: transform 0.2s ease;
}
.activites-card .activity-item:hover {
transform: scale(1.05);
background-color: #d4edda;
}
/* Footer */
footer {
background: var(--vert-fonce);
color: white;
text-align: center;
padding: 60px 20px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
footer .icons {
font-size: 1.5rem;
margin: 0 10px;
vertical-align: middle;
}
/* Scroll spy */
.navbar .nav-link.active {
color: var(--vert-clair) !important;
font-weight: 700;
}
/* Onglets Projets */
.nav-tabs .nav-link {
color: var(--vert-clair);
font-weight: 700;
}
.nav-tabs .nav-link:hover {
color: #ffffff;
background-color: rgba(45, 106, 79, 0.18);
}
.nav-tabs .nav-link.active {
color: #ffffff;
background-color: var(--vert);
border-color: rgba(45, 106, 79, 0.25);
}
/* Bouton dark mode */
#toggleDarkMode {
border-radius: 999px;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
/* Responsive */
@media (max-width: 767.98px) {
.navbar .navbar-collapse {
padding-top: 10px;
}
.navbar .navbar-nav .nav-link {
padding-top: 10px;
padding-bottom: 10px;
}
}
/* Scroll offset */
main section[id] {
scroll-margin-top: 90px;
}
/* Bouton scroll top */
#scrollTopBtn {
width: 64px;
height: 64px;
font-size: 30px;
font-weight: 900;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
body.dark #toggleDarkMode {
border-color: #ffffff;
}
/* Dark mode */
body.dark {
background-color: #121212;
color: #eaeaea;
}
body.dark .bg-light {
background-color: #1e1e1e !important;
}
body.dark .bg-body-tertiary {
background-color: #1e1e1e !important;
}
body.dark .card,
body.dark .accordion-body {
background-color: #1f1f1f;
color: #eaeaea;
}
body.dark .activites-card .activity-item {
background-color: rgba(183, 228, 199, 0.08);
border: 1px solid rgba(183, 228, 199, 0.18);
}
body.dark .activites-card .activity-item h5,
body.dark .activites-card .activity-item small {
color: #eaeaea;
}
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark p,
body.dark li,
body.dark small,
body.dark label {
color: #eaeaea;
}
body.dark a {
color: var(--vert-clair);
}
body.dark .text-success,
body.dark .link-success {
color: var(--vert-clair) !important;
}
body.dark .modal-content {
background-color: #1f1f1f;
color: #eaeaea;
}
body.dark .modal-header,
body.dark .modal-footer {
border-color: rgba(255, 255, 255, 0.12);
}
body.dark .btn-close {
filter: invert(1) grayscale(100%);
}
body.dark .nav-tabs .nav-link {
color: #eaeaea;
}
body.dark .nav-tabs .nav-link.active {
color: #121212;
background-color: var(--vert-clair);
border-color: rgba(255, 255, 255, 0.12);
}
/* Loader */
#pageLoader {
position: fixed;
inset: 0;
z-index: 2000;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--vert-fonce), var(--vert));
color: #fff;
opacity: 1;
visibility: visible;
transition: opacity 0.35s ease, visibility 0.35s ease;
}
#pageLoader.is-hidden {
opacity: 0;
visibility: hidden;
}
#pageLoader .loader-inner {
display: grid;
gap: 14px;
place-items: center;
text-align: center;
padding: 24px 30px;
border-radius: 18px;
background: rgba(0, 0, 0, 0.18);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
#pageLoader .loader-text {
font-weight: 700;
letter-spacing: 0.2px;
opacity: 0.95;
}
#pageLoader .loader-flame {
width: 56px;
height: 56px;
border-radius: 999px;
background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--vert-clair) 35%, var(--vert) 100%);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
animation: loaderDot 0.9s ease-in-out infinite;
}
@keyframes loaderDot {
0% { transform: scale(0.9); opacity: 0.75; }
50% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(0.9); opacity: 0.75; }
}
/* Animations fade-in */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Parcours */
.accordion .accordion-item {
border: none;
background: transparent;
margin-bottom: 14px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}
.accordion .accordion-button:not(.collapsed) {
background-color: var(--vert);
color: #ffffff;
}
.accordion .accordion-button:not(.collapsed)::after {
filter: brightness(0) invert(1);
}
.accordion .accordion-button {
margin-bottom: 0;
box-shadow: none;
border-radius: 0;
}
.accordion-body {
margin-bottom: 0;
border-radius: 0;
box-shadow: none;
}
// Dark mode
const toggleBtn = document.getElementById("toggleDarkMode");
if (toggleBtn) {
toggleBtn.addEventListener("click", () => {
document.body.classList.toggle("dark");
toggleBtn.textContent = document.body.classList.contains("dark")
? "☀"
: "🌙";
});
}
// Accessibilité clavier
const enableKeyboardClick = (selector) => {
document.querySelectorAll(selector).forEach((el) => {
el.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
el.click();
}
});
});
};
enableKeyboardClick(".skill-card");
enableKeyboardClick(".project-item .card");
// Fade-in au scroll
const faders = document.querySelectorAll(".fade-in");
if (faders.length) {
const appearOptions = { threshold: 0.2 };
const appearOnScroll = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) entry.target.classList.add("visible");
});
}, appearOptions);
faders.forEach((fader) => appearOnScroll.observe(fader));
}
// Scroll top
const scrollBtn = document.getElementById("scrollTopBtn");
if (scrollBtn) {
window.addEventListener("scroll", () => {
scrollBtn.style.display = window.scrollY > 300 ? "block" : "none";
});
scrollBtn.addEventListener("click", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});
}
// Scroll spy
const navLinks = document.querySelectorAll(".navbar .nav-link[href^='#']");
const sections = Array.from(document.querySelectorAll("main section[id]"));
const setActiveLink = (id) => {
navLinks.forEach((link) => {
const target = link.getAttribute("href")?.slice(1);
link.classList.toggle("active", target === id);
});
};
const getHeaderOffset = () => {
const nav = document.querySelector(".navbar");
return (nav ? nav.offsetHeight : 0) + 24;
};
const getCurrentSectionId = () => {
const y = window.scrollY + getHeaderOffset();
let current = sections[0]?.id;
for (const section of sections) {
if (section.offsetTop <= y) current = section.id;
}
return current;
};
let spyTicking = false;
const updateSpy = () => {
spyTicking = false;
const id = getCurrentSectionId();
if (id) setActiveLink(id);
};
if (sections.length && navLinks.length) {
window.addEventListener("scroll", () => {
if (spyTicking) return;
spyTicking = true;
window.requestAnimationFrame(updateSpy);
});
window.addEventListener("resize", () => window.requestAnimationFrame(updateSpy));
updateSpy();
}
// Fermer menu burger (mobile)
const navCollapseEl = document.getElementById("mainNav");
if (navCollapseEl) {
navLinks.forEach((link) => {
link.addEventListener("click", () => {
const isExpanded = window.getComputedStyle(document.querySelector(".navbar-toggler")).display !== "none";
if (!isExpanded) return;
const collapse = bootstrap.Collapse.getOrCreateInstance(navCollapseEl);
collapse.hide();
});
});
}
// Modal compétences
const modalComp = document.getElementById("modalComp");
if (modalComp) {
modalComp.addEventListener("show.bs.modal", (event) => {
const trigger = event.relatedTarget;
if (!trigger) return;
const title = trigger.getAttribute("data-skill-title") || "Compétences détaillées";
const content = trigger.getAttribute("data-skill-content") || "<p>Aucun détail disponible.</p>";
const modalTitle = modalComp.querySelector("#modalCompTitle");
const modalBody = modalComp.querySelector("#modalCompBody");
if (modalTitle) modalTitle.textContent = title;
if (modalBody) modalBody.innerHTML = content;
});
}
// Modal projet
const projectModalEl = document.getElementById("projectModal");
const projectModalTitle = document.getElementById("projectModalTitle");
const projectModalImg = document.getElementById("projectModalImg");
const projectModalDesc = document.getElementById("projectModalDesc");
const projectDescriptions = {
"Romans": "Projet d’écriture longue : définition de l’univers, plan de chapitres, et mise en place d’un rythme d’écriture. Objectif : avancer de manière régulière et itérer sur la structure.",
"Podcast": "Série de capsules audio autour de thématiques culturelles. Travail sur la préparation, l’enregistrement, le montage, et la cohérence éditoriale des épisodes.",
"Application lecture": "Prototype d’application pour organiser des lectures, suivre les envies, et tester des recommandations. Objectif : simplifier la recherche et le suivi de lectures.",
"Portfolio web": "Conception d’un portfolio responsive pour présenter des projets et une identité visuelle. Objectif : une navigation claire et une mise en avant des réalisations.",
"CV Web": "CV numérique en une page : sections, navigation, mode sombre, et interactions. Objectif : proposer une version web soignée et facile à partager.",
"Campagne de communication - Musée": "Mini-campagne : messages clés, supports, et calendrier de publication. Objectif : créer une proposition cohérente, adaptée à une cible.",
"2.0": "Projet d’amélioration continue : tests, ajustements visuels, et petites itérations sur l’interface. Objectif : gagner en confort d’utilisation et en lisibilité.",
"Cloud Star Holding": "Page “hub” pour regrouper plusieurs projets et centraliser les liens. Objectif : mieux organiser et retrouver rapidement les ressources."
};
if (projectModalEl && projectModalTitle && projectModalImg && projectModalDesc) {
document.querySelectorAll(".project-item .card").forEach((card) => {
card.style.cursor = "pointer";
card.addEventListener("click", () => {
const titleEl = card.querySelector("h5");
const imgEl = card.querySelector("img");
const title = titleEl ? titleEl.textContent.trim() : "Projet";
const imgSrc = imgEl ? imgEl.getAttribute("src") : "";
projectModalTitle.textContent = title;
projectModalImg.src = imgSrc || "";
projectModalImg.alt = title;
projectModalDesc.textContent =
projectDescriptions[title] ||
"Description à compléter. Ce projet présente une idée, une démarche, et des choix de conception. Il pourra être enrichi avec des objectifs, des outils utilisés, et des résultats.";
const modal = bootstrap.Modal.getOrCreateInstance(projectModalEl);
modal.show();
});
});
}
// Contact modal clic
const contactForm = document.getElementById("contactForm");
const contactSentModalEl = document.getElementById("contactSentModal");
if (contactForm && contactSentModalEl) {
contactForm.addEventListener("submit", (e) => {
e.preventDefault();
const modal = bootstrap.Modal.getOrCreateInstance(contactSentModalEl);
modal.show();
contactForm.reset();
});
}
// Loader
window.addEventListener("load", () => {
const loader = document.getElementById("pageLoader");
if (!loader) return;
setTimeout(() => {
loader.classList.add("is-hidden");
}, 550);
});
Bérénice Cambier - CV Version Web.pdf