From 5688ae674f7ee17b977c453d917d9ad895adef5d Mon Sep 17 00:00:00 2001
From: Joshua Ashton <joshuatashton+dev@gmail.com>
Date: Thu, 2 Jan 2025 18:15:01 -0700
Subject: [PATCH] implemented pdf viewer functionality.

---
 src/PageNotFound.jsx         | 10 +++++++++
 src/Resume.jsx               |  5 ++++-
 src/components/PdfViewer.jsx | 35 ++++++++++++++++++++++++++----
 src/components/SkillCard.jsx |  2 +-
 src/main.css                 | 42 +++++++++++++++++++++++++-----------
 src/main.jsx                 |  6 ++++--
 6 files changed, 80 insertions(+), 20 deletions(-)
 create mode 100644 src/PageNotFound.jsx

diff --git a/src/PageNotFound.jsx b/src/PageNotFound.jsx
new file mode 100644
index 00000000..7628295a
--- /dev/null
+++ b/src/PageNotFound.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function PageNotFound() {
+  return (
+    <>
+      <h1>404</h1>
+      <p>This is not the page you are looking for.</p>
+    </>
+  );
+}
diff --git a/src/Resume.jsx b/src/Resume.jsx
index a6145a5d..50c4850a 100644
--- a/src/Resume.jsx
+++ b/src/Resume.jsx
@@ -4,7 +4,10 @@ import PdfViewer from "./components/PdfViewer";
 export default function Resume() {
   return (
     <>
-      <PdfViewer file="resume.pdf" />
+      <div id="resume-section">
+        <h1>Resume</h1>
+        <PdfViewer file="resume.pdf" />
+      </div>
     </>
   );
 }
diff --git a/src/components/PdfViewer.jsx b/src/components/PdfViewer.jsx
index 91f7d168..57b494c6 100644
--- a/src/components/PdfViewer.jsx
+++ b/src/components/PdfViewer.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Document, Page, pdfjs } from "react-pdf";
 import "react-pdf/dist/Page/TextLayer.css";
 import "react-pdf/dist/Page/AnnotationLayer.css";
@@ -9,13 +9,40 @@ export default function PdfViewer({ file }) {
     import.meta.url,
   ).toString();
 
+  const [numPages, setNumPages] = useState(0);
+  const [pageNumber, setPageNumber] = useState(1);
+  function prev() {
+    if (pageNumber >= 2) {
+      setPageNumber(pageNumber - 1);
+    }
+  }
+
+  function next() {
+    if (pageNumber < numPages - 1) {
+      setPageNumber(pageNumber + 1);
+    }
+  }
+
+  console.log("numPages: " + numPages);
+  console.log("pageNumber: " + pageNumber);
+
   return (
     <>
       <div className="pdf-container">
-        <Document file={file}>
-          <Page pageNumber={1} />
-          <Page pageNumber={2} />
+        <button className="pdf-button shadow" onClick={() => prev()}>
+          <span className="material-icons">arrow_back</span>
+        </button>
+        <Document
+          file={file}
+          onLoadSuccess={({ numPages: numPagesInPdf }) => {
+            setNumPages(numPagesInPdf);
+          }}
+        >
+          <Page pageNumber={pageNumber} />
         </Document>
+        <button className="pdf-button shadow" onClick={() => next()}>
+          <span className="material-icons">arrow_forward</span>
+        </button>
       </div>
     </>
   );
diff --git a/src/components/SkillCard.jsx b/src/components/SkillCard.jsx
index fb2639cd..16c74d11 100644
--- a/src/components/SkillCard.jsx
+++ b/src/components/SkillCard.jsx
@@ -24,7 +24,7 @@ const SkillCard = ({ header, symbol, list, isActive, onToggle }) => {
         <span className="material-icons skill-symbol">{symbol}</span>
         <h3>{header}</h3>
       </div>
-      {isActive && (
+      {(isActive || !isMobile) && (
         <ul>
           {list.map((item, index) => (
             <li key={index}>{item}</li>
diff --git a/src/main.css b/src/main.css
index 28cac8f3..08c1c489 100644
--- a/src/main.css
+++ b/src/main.css
@@ -211,7 +211,6 @@ h4 {
 }
 
 #skill-cards {
-  border: 1px solid white;
   width: 100%;
 }
 
@@ -228,7 +227,7 @@ h4 {
   background-color: #ebd2ff;
   border-radius: 20px;
   min-width: 20vw;
-  max-width: 40vw;
+  max-width: 50vw;
   margin: 1vw;
 }
 
@@ -236,7 +235,7 @@ h4 {
   display: grid;
   grid-template-columns: 20% 60%;
   grid-template-rows: 100%;
-  column-gap: 20%;
+  column-gap: 10%;
   align-items: center;
   justify-content: center;
   text-align: center;
@@ -246,6 +245,10 @@ h4 {
   background-color: #4a245e;
   border-radius: 18px 18px 0 0;
 }
+.skill-card-header h3 {
+  font-size: clamp(1.3rem, 2vw, 3rem);
+  text-align: right;
+}
 
 .skill-symbol {
   font-variation-settings:
@@ -311,6 +314,7 @@ h4 {
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  margin-left: 1vw;
 }
 
 .project-card img {
@@ -447,12 +451,31 @@ h4 {
   justify-content: center;
 }
 
+#resume-section {
+  margin: 2vw;
+}
+
 /**PDF Viewer**/
 .pdf-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  max-width: 100%;
+  height: 70vh;
+}
+
+.pdf-button {
+  background-color: #ebd2ff;
+  color: #4a245e;
+  outline: none;
+  border: none;
+  padding: 1vw;
+  margin: 1vw;
+}
+
+.pdf-button span {
+  color: #4a245e;
 }
 
 /**Animations**/
@@ -614,21 +637,16 @@ h4 {
     margin-left: 5vw;
   }
 
-  .pdf-viewer {
-    max-width: 100%;
-    margin-right: 0;
-  }
-
-  .pdf-page {
-    width: 100%;
-  }
-
   #card-grid {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }
+
+  .button {
+    border-radius: 10px;
+  }
 }
 
 @media (max-width: 485px) {
diff --git a/src/main.jsx b/src/main.jsx
index 286cda5a..c659f026 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -3,14 +3,16 @@ import { createRoot } from "react-dom/client";
 import { BrowserRouter as Router, Routes, Route } from "react-router";
 import App from "./App.jsx";
 import Resume from "./Resume.jsx";
+import PageNotFound from "./PageNotFound.jsx";
 
 const container = document.getElementById("app");
 const root = createRoot(container); // createRoot(container!) if you use TypeScript
 root.render(
   <Router>
     <Routes>
-      <Route path="/" element={<App />} />
-      <Route path="/resume" element={<Resume />} />
+      <Route exact path="/" element={<App />} />
+      <Route exact path="/resume" element={<Resume />} />
+      <Route path="*" element={<PageNotFound />} />
     </Routes>
   </Router>,
 );