add pdf portfolio preview

Author: florykhan

src/assets/Ilian-Khankhalaev-Portfolio.pdf

@@ -1,27 +1,46 @@
 /**
- * Resume preview: open PDF in a modal overlay instead of downloading.
+ * Resume / Portfolio preview: open PDF in a modal overlay.
  * Binds to all links whose href points to Ilian-Khankhalaev-Resume.pdf.
+ * Modal includes a toggle to flip between Resume and Portfolio PDFs.
  */
 (function () {
   var modal = null;
   var iframe = null;
   var closeBtn = null;
   var downloadLink = null;
   var escapeHandler = null;
+  var resumeUrl = null;
+  var portfolioUrl = null;
+  var btnResume = null;
+  var btnPortfolio = null;
+
+  function setPdfView(url, label) {
+    var separator = url.indexOf('#') === -1 ? '#' : '&';
+    var pdfUrlWithView = url + separator + 'view=FitH';
+    iframe.setAttribute('src', pdfUrlWithView);
+    iframe.setAttribute('title', label);
+    downloadLink.setAttribute('href', url);
+  }
 
   function createModal() {
     if (modal) return modal;
     modal = document.createElement('div');
     modal.className = 'resume-preview-modal';
     modal.setAttribute('role', 'dialog');
     modal.setAttribute('aria-modal', 'true');
-    modal.setAttribute('aria-label', 'Resume preview');
+    modal.setAttribute('aria-label', 'Resume and portfolio preview');
     modal.innerHTML =
       '<div class="resume-preview-backdrop" aria-hidden="true"></div>' +
       '<div class="resume-preview-box">' +
         '<div class="resume-preview-header">' +
-          '<a href="#" class="resume-preview-download" target="_blank" rel="noopener noreferrer">Download PDF</a>' +
-          '<button type="button" class="resume-preview-close" aria-label="Close preview">&times;</button>' +
+          '<div class="resume-preview-toggle" role="tablist" aria-label="Choose document">' +
+            '<button type="button" class="resume-preview-tab is-active" role="tab" aria-selected="true" data-doc="resume">Resume</button>' +
+            '<button type="button" class="resume-preview-tab" role="tab" aria-selected="false" data-doc="portfolio">Portfolio</button>' +
+          '</div>' +
+          '<div class="resume-preview-header-right">' +
+            '<a href="#" class="resume-preview-download" target="_blank" rel="noopener noreferrer">Download PDF</a>' +
+            '<button type="button" class="resume-preview-close" aria-label="Close preview">&times;</button>' +
+          '</div>' +
         '</div>' +
         '<div class="resume-preview-iframe-wrap">' +
           '<iframe class="resume-preview-iframe" title="Resume (PDF)"></iframe>' +
@@ -31,6 +50,8 @@
     iframe = modal.querySelector('.resume-preview-iframe');
     closeBtn = modal.querySelector('.resume-preview-close');
     downloadLink = modal.querySelector('.resume-preview-download');
+    btnResume = modal.querySelector('.resume-preview-tab[data-doc="resume"]');
+    btnPortfolio = modal.querySelector('.resume-preview-tab[data-doc="portfolio"]');
     var backdrop = modal.querySelector('.resume-preview-backdrop');
 
     function close() {
@@ -55,16 +76,38 @@
       e.stopPropagation();
       downloadLink.setAttribute('href', iframe.getAttribute('src') || '#');
     });
+
+    btnResume.addEventListener('click', function () {
+      if (!resumeUrl) return;
+      btnResume.classList.add('is-active');
+      btnResume.setAttribute('aria-selected', 'true');
+      btnPortfolio.classList.remove('is-active');
+      btnPortfolio.setAttribute('aria-selected', 'false');
+      setPdfView(resumeUrl, 'Resume (PDF)');
+    });
+    btnPortfolio.addEventListener('click', function () {
+      if (!portfolioUrl) return;
+      btnPortfolio.classList.add('is-active');
+      btnPortfolio.setAttribute('aria-selected', 'true');
+      btnResume.classList.remove('is-active');
+      btnResume.setAttribute('aria-selected', 'false');
+      setPdfView(portfolioUrl, 'Portfolio (PDF)');
+    });
+
     return modal;
   }
 
-  function openPreview(url) {
+  function openPreview(resumeHref) {
     createModal();
-    var absoluteUrl = new URL(url, window.location.href).href;
-    var separator = absoluteUrl.indexOf('#') === -1 ? '#' : '&';
-    var pdfUrlWithView = absoluteUrl + separator + 'view=FitH';
-    iframe.setAttribute('src', pdfUrlWithView);
-    downloadLink.setAttribute('href', absoluteUrl);
+    resumeUrl = new URL(resumeHref, window.location.href).href;
+    portfolioUrl = resumeUrl.replace('Ilian-Khankhalaev-Resume.pdf', 'Ilian-Khankhalaev-Portfolio.pdf');
+
+    btnResume.classList.add('is-active');
+    btnResume.setAttribute('aria-selected', 'true');
+    btnPortfolio.classList.remove('is-active');
+    btnPortfolio.setAttribute('aria-selected', 'false');
+    setPdfView(resumeUrl, 'Resume (PDF)');
+
     modal.classList.add('resume-preview-open');
     document.body.style.overflow = 'hidden';
     document.addEventListener('keydown', escapeHandler, true);

src/scripts/resume-preview.js

@@ -4042,6 +4042,52 @@ body.page-projects .project-detail .project-meta-links a:focus-visible {
   -webkit-backdrop-filter: blur(12px);
 }
 
+.resume-preview-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  padding: 3px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.resume-preview-tab {
+  padding: 0.45rem 1rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.65);
+  background: none;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: color 0.2s ease, background 0.2s ease;
+}
+
+.resume-preview-tab:hover {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.resume-preview-tab.is-active {
+  color: rgba(255, 255, 255, 0.98);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.resume-preview-tab:focus {
+  outline: none;
+}
+
+.resume-preview-tab:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
+}
+
+.resume-preview-header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
 .resume-preview-download {
   display: inline-flex;
   align-items: center;