From 91936e441f1230ed70cc8480b9daa497889b4cb8 Mon Sep 17 00:00:00 2001
From: Plexi09 <pierre.emmanuel.gobillard@gmail.com>
Date: Mon, 23 Feb 2026 00:17:21 +0100
Subject: [PATCH] Added a download CV button with language selection

---
 css/style.css | 14 ++++++++++++++
 index.html    | 25 ++++++++++++++++++++++++-
 js/main.js    | 22 +++++++++++++++++++++-
 3 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index 4cb5fa6..352bba3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -162,3 +162,17 @@ html.lenis {
     font-family: 'Inter', sans-serif;
     font-weight: 500;
 }
+
+/* ═══════════════════════════
+   CV DOWNLOAD MODAL
+═══════════════════════════ */
+#cv-modal.is-open {
+    opacity: 1;
+    pointer-events: auto;
+}
+#cv-modal.is-open #cv-modal-card {
+    transform: scale(1);
+}
+.cv-lang-btn:hover {
+    background: rgba(255, 255, 255, 0.03);
+}
diff --git a/index.html b/index.html
index ded8690..3bb5f3b 100644
--- a/index.html
+++ b/index.html
@@ -129,6 +129,9 @@
             <div class="mb-20 reveal-text">
                 <span class="section-num">02 / Experience</span>
                 <h2 class="text-5xl md:text-7xl font-display font-bold uppercase tracking-tighter">Experience <br>& <span class="text-transparent stroke-text">Journey</span></h2>
+                <a href="#" class="cv-download-btn text-xs border border-gray-800 hover:border-white text-gray-500 hover:text-white transition-all px-5 py-2.5 rounded-full uppercase tracking-widest hover-target mt-8 inline-block">
+                <i class="fas fa-download mr-2"></i> Download CV
+            </a>
             </div>
 
             <div class="grid md:grid-cols-2 gap-16">
@@ -286,6 +289,26 @@
         </div>
     </section>
 
+    <!-- CV Language Modal -->
+    <div id="cv-modal" class="fixed inset-0 z-[800] flex items-center justify-center pointer-events-none opacity-0 transition-opacity duration-300">
+        <div id="cv-modal-backdrop" class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
+        <div id="cv-modal-card" class="relative bg-[#111] border border-gray-800 rounded-2xl p-10 max-w-sm w-[90%] text-center transform scale-95 transition-transform duration-300">
+            <button id="cv-modal-close" class="absolute top-4 right-4 text-gray-500 hover:text-white transition text-xl hover-target" aria-label="Close">&times;</button>
+            <h3 class="text-2xl font-display font-bold uppercase tracking-tight mb-2">Download CV</h3>
+            <p class="text-sm text-gray-500 uppercase tracking-widest mb-8">Choose your language</p>
+            <div class="flex gap-4">
+                <a href="/cv/CV_EN.pdf" download class="cv-lang-btn group flex-1 flex flex-col items-center gap-3 border border-gray-800 hover:border-white rounded-xl py-6 px-4 transition-all duration-300 hover-target">
+                    <span class="text-3xl">🇬🇧</span>
+                    <span class="text-xs uppercase tracking-[0.2em] text-gray-400 group-hover:text-white transition">English</span>
+                </a>
+                <a href="/cv/CV_FR.pdf" download class="cv-lang-btn group flex-1 flex flex-col items-center gap-3 border border-gray-800 hover:border-white rounded-xl py-6 px-4 transition-all duration-300 hover-target">
+                    <span class="text-3xl">🇫🇷</span>
+                    <span class="text-xs uppercase tracking-[0.2em] text-gray-400 group-hover:text-white transition">Français</span>
+                </a>
+            </div>
+        </div>
+    </div>
+
     <!-- Footer -->
     <footer class="bg-dark border-t border-gray-900 py-10 px-6 md:px-20">
         <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
@@ -299,7 +322,7 @@
                 <a href="#projects" class="hover:text-white transition hover-target">Projects</a>
                 <a href="#photography" class="hover:text-white transition hover-target">Photography</a>
             </div>
-            <a href="#" class="text-xs border border-gray-800 hover:border-white text-gray-500 hover:text-white transition-all px-5 py-2.5 rounded-full uppercase tracking-widest hover-target">
+            <a href="#" class="cv-download-btn text-xs border border-gray-800 hover:border-white text-gray-500 hover:text-white transition-all px-5 py-2.5 rounded-full uppercase tracking-widest hover-target">
                 <i class="fas fa-download mr-2"></i> Download CV
             </a>
         </div>
diff --git a/js/main.js b/js/main.js
index c436b01..d7ff8f3 100644
--- a/js/main.js
+++ b/js/main.js
@@ -234,7 +234,27 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 
-    // ── 12. DRAGGABLE GALLERY ─────────────────────────────────────────
+    // ── 12. CV DOWNLOAD MODAL ───────────────────────────────────────
+    const cvModal = document.getElementById('cv-modal');
+    const cvClose = document.getElementById('cv-modal-close');
+    const cvBackdrop = document.getElementById('cv-modal-backdrop');
+
+    function openCvModal() { cvModal.classList.add('is-open'); }
+    function closeCvModal() { cvModal.classList.remove('is-open'); }
+
+    document.querySelectorAll('.cv-download-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => { e.preventDefault(); openCvModal(); });
+    });
+    if (cvClose) cvClose.addEventListener('click', closeCvModal);
+    if (cvBackdrop) cvBackdrop.addEventListener('click', closeCvModal);
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeCvModal(); });
+
+    // Auto-close modal after a language link is clicked
+    document.querySelectorAll('.cv-lang-btn').forEach(btn => {
+        btn.addEventListener('click', () => setTimeout(closeCvModal, 400));
+    });
+
+    // ── 13. DRAGGABLE GALLERY ─────────────────────────────────────────
     const gallery = document.getElementById('gallery');
     if (gallery) {
         let isDown = false, startX, scrollLeft;