feat: added pdf viewer to resume page

assets/css/beautifuljekyll.css

@@ -1215,8 +1215,24 @@ pre {
   margin-top: 0.75rem;
 }
 
+.pdf-container {
+    width: min(87vw, 1000px);
+    margin: 2rem auto;
+}
+
+.pdf-container iframe {
+    display: block;
+    width: 100%;
+    height: clamp(700px, 90vh, 1400px);
+    border: none;
+    border-radius: 12px;
+}
+
 @media (max-width: 767px) {
   :root {
     --project-icon-width: 6.25rem;
   }
+  .pdf-container {
+    display: none;
+  }
 }

resume.html

@@ -1,27 +1,38 @@
 ---
 layout: page
 title: Resume
+full-width: true
 ---
 
-<hr />
-
-<div style="flex-direction: row; margin-bottom: 100px; margin-top: 30px">
-  <p>
-    I am open for Software Engineer roles. You can reach out to me in the
-    <a href="/aboutme">About Me</a> section. My resume can be found below:
-  </p>
-  <div id="resume-download-section">
-    <span
-      id="resume-pdf-icon"
-      class="far fa-file-pdf"
-      style="margin-right: 4px"
-    ></span>
-    <a
-      id="resume-download-link"
-      target="_blank"
-      href="/static/Aryan_Singh_Resume.pdf"
-      >Download/View Resume</a
-    >
+<div class="container-md">
+  <div class="row justify-content-center">
+    <div class="col-xl-8 col-lg-10">
+      <hr />
+      <div style="flex-direction: row">
+        <p>
+          I am open for Software Engineer roles. You can reach out to me
+          <a href="mailto:singh@aryn.info">here</a>. My resume can be found
+          below:
+        </p>
+        <div id="resume-download-section">
+          <span
+            id="resume-pdf-icon"
+            class="far fa-file-pdf"
+            style="margin-right: 4px"
+          ></span>
+          <a
+            id="resume-download-link"
+            target="_blank"
+            href="/static/Aryan_Singh_Resume.pdf"
+            >Download Resume</a
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="pdf-container">
+    <iframe src="/static/Aryan_Singh_Resume.pdf" loading="lazy" title="Resume">
+    </iframe>
   </div>
 </div>
 
@@ -53,8 +64,13 @@
   fetch("/static/Aryan_Singh_Resume.pdf").then((data) => {
     let resumeLastModifiedDate = new Date(data.headers.get("Last-Modified"));
     resumeLastModifiedDate = resumeLastModifiedDate.toShortFormat();
-    document.querySelector(
-      "#resume-download-link"
-    ).innerHTML += ` (Last updated on ${resumeLastModifiedDate})`;
+
+    const resumeLink = document.querySelector("#resume-download-link");
+
+    if (window.matchMedia("(max-width: 768px)").matches) {
+      resumeLink.innerHTML = `Download/View Resume (Last updated on ${resumeLastModifiedDate})`;
+    } else {
+      resumeLink.innerHTML = `Download Resume (Last updated on ${resumeLastModifiedDate})`;
+    }
   });
 </script>