pdf on web

Author: tharukackh

resume.css

@@ -150,6 +150,45 @@ button { font: inherit; }
 }
 .back-link { display: flex; gap: 10px; align-items: center; }
 
+.pdf-viewer {
+  width: min(1180px, calc(100vw - 48px));
+  height: calc(100svh - 108px);
+  min-height: 680px;
+  display: none;
+  flex-direction: column;
+  margin: 24px auto 32px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  background: #fff;
+  box-shadow: 0 45px 100px var(--shadow);
+}
+.pdf-viewer iframe {
+  width: 100%;
+  flex: 1;
+  border: 0;
+  background: #fff;
+}
+.pdf-fallback {
+  margin: 0;
+  padding: 10px 16px;
+  color: #4c504d;
+  border-top: 1px solid #d7d9d7;
+  background: #f5f5f3;
+  font: 400 10px/1.5 var(--mono);
+  text-align: center;
+}
+.pdf-fallback a {
+  color: #12664e;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+html[data-layout="pdf"] .resume-shell {
+  display: none;
+}
+html[data-layout="pdf"] .pdf-viewer {
+  display: flex;
+}
+
 .resume-shell {
   width: min(1180px, calc(100vw - 48px));
   margin: 64px auto;
@@ -662,6 +701,15 @@ html[data-layout="classic"] .resume-footer {
     width: 38px;
     height: 38px;
   }
+  .pdf-viewer {
+    width: 100%;
+    height: calc(100svh - 76px);
+    min-height: 560px;
+    margin: 0;
+    border-right: 0;
+    border-bottom: 0;
+    border-left: 0;
+  }
   .resume-shell { width: 100%; margin: 24px 0 0; border-right: 0; border-left: 0; }
   .resume-hero { min-height: 620px; padding: 82px 22px 44px; }
   .resume-hero > .resume-monogram { top: 30px; left: 22px; }

resume.html

@@ -21,8 +21,9 @@
       try {
         document.documentElement.dataset.theme =
           localStorage.getItem("resume-theme") || "light";
+        const savedLayout = localStorage.getItem("resume-layout");
         document.documentElement.dataset.layout =
-          localStorage.getItem("resume-layout") || "modern";
+          savedLayout === "classic" ? "pdf" : savedLayout || "modern";
       } catch {
         document.documentElement.dataset.theme = "light";
         document.documentElement.dataset.layout = "modern";
@@ -42,9 +43,9 @@
         <button
           class="layout-toggle"
           type="button"
-          aria-label="Switch to classic résumé layout"
+          aria-label="View PDF résumé"
           aria-pressed="false"
-          title="Switch résumé layout"
+          title="View PDF résumé"
         >
           <span aria-hidden="true">CV</span>
         </button>
@@ -69,7 +70,8 @@
       </div>
     </header>
 
-    <main class="resume-shell" id="resume-content">
+    <div class="resume-views" id="resume-content">
+    <main class="resume-shell" id="modern-resume">
       <header class="resume-hero">
         <div class="resume-monogram" aria-hidden="true">TC</div>
         <div class="hero-copy">
@@ -401,6 +403,21 @@ <h3>Virtual Career Fair Platform</h3>
         <a href="index.html">Return to portfolio ↑</a>
       </footer>
     </main>
+
+    <section class="pdf-viewer" aria-label="PDF résumé viewer">
+      <iframe
+        src="assets/Tharuka-Chathura-Resume.pdf#view=FitH"
+        title="Tharuka Chathura ATS résumé PDF"
+      ></iframe>
+      <p class="pdf-fallback">
+        If the PDF does not appear,
+        <a
+          href="assets/Tharuka-Chathura-Resume.pdf"
+          download="Tharuka-Chathura-Resume.pdf"
+        >download the résumé</a>.
+      </p>
+    </section>
+    </div>
     <script src="resume.js"></script>
   </body>
 </html>

resume.js

@@ -19,18 +19,16 @@ function applyTheme(theme) {
 applyTheme(root.dataset.theme || "light");
 
 function applyLayout(layout) {
-  const classic = layout === "classic";
-  root.dataset.layout = layout;
-  layoutToggle?.setAttribute("aria-pressed", String(classic));
+  const pdf = layout === "pdf" || layout === "classic";
+  root.dataset.layout = pdf ? "pdf" : "modern";
+  layoutToggle?.setAttribute("aria-pressed", String(pdf));
   layoutToggle?.setAttribute(
     "aria-label",
-    classic
-      ? "Switch to modern résumé layout"
-      : "Switch to classic résumé layout",
+    pdf ? "View modern résumé" : "View PDF résumé",
   );
   layoutToggle?.setAttribute(
     "title",
-    classic ? "Use modern layout" : "Use classic résumé layout",
+    pdf ? "View modern résumé" : "View PDF résumé",
   );
 }
 
@@ -47,7 +45,7 @@ themeToggle?.addEventListener("click", () => {
 });
 
 layoutToggle?.addEventListener("click", () => {
-  const nextLayout = root.dataset.layout === "classic" ? "modern" : "classic";
+  const nextLayout = root.dataset.layout === "pdf" ? "modern" : "pdf";
   try {
     localStorage.setItem("resume-layout", nextLayout);
   } catch {