finishing touches.

src/App.jsx

@@ -8,6 +8,12 @@ import "./main.css";
 /*
  * Primary portfolio application. Utilizes swiper.js (via /components/VerticalSlider.jsx) to
  * have a scrolling section to section effect.
+ *
+ * Managed by /main.jsx.
+ * Data by /main.jsx.
+ *
+ * @param projectData JSON[], data necessary to create project cards.
+ * @param skillData JSON, data necessary to create skill cards.
  */
 const App = ({ projectData, skillData }) => {
   const slides = [

src/Home.jsx

@@ -5,7 +5,7 @@ import SkillCard from "./components/SkillCard";
  * "Home" page/slide of my portfolio.
  *
  * Managed by /App.jsx.
- * Data by /App.jsx.
+ * Data by /main.jsx.
  *
  * @param image String
  * @param skills json, containing JSON values of String arrays.
@@ -18,10 +18,10 @@ const Home = ({ image, skills }) => {
     <>
       <div id="primary">
         <div className="header">
-          <div className="header-image">
+          <div className="header-image center-row">
             <img id="profile" src={image} />
           </div>
-          <div className="header-text">
+          <div className="center-column">
             <div className="center-column">
               <h1>Hi, I'm Josh Ashton.</h1>
               <h3>Junior full-stack developer.</h3>
@@ -32,7 +32,7 @@ const Home = ({ image, skills }) => {
           </div>
         </div>
         <div id="skill-cards">
-          <div id="card-grid">
+          <div className="center-row">
             <SkillCard
               header="Languages"
               symbol="code"

src/Projects.jsx

@@ -12,7 +12,7 @@ import "swiper/css/scrollbar";
  * (see /components/ProjectCard.jsx), generated for each element of the parameter cardData.
  *
  * Managed by /App.jsx.
- * Data by /App.jsx.
+ * Data by /main.jsx.
  *
  * @param cardData json[], each object contains the following: title, descriptionA, featureList, image, url
  *

src/Resume.jsx

@@ -1,27 +1,9 @@
 import React from "react";
 
 /*
- * Page to display my Resume.
- *
- * TODO: Rework resume to make it one page
- * TODO: Convert resume to a React component, with a link to save as PDF
+ * Resume page component.
  */
-export default function Resume({ jobData, eduData, skillData }) {
-  /*
-   *     
-  {
-    company: "",
-    title: "",
-    start: "",
-    end: "",
-    location: "",
-    responsibilities: [
-      "",
-    ],
-  },
-
-   */
-
+const Resume = ({ jobData, eduData, skillData }) => {
   return (
     <>
       <div id="resume-section">
@@ -110,3 +92,5 @@ function Job({ company, title, start, end, location, responsibilities }) {
     </>
   )
 }
+
+export default Resume;

src/components/PdfViewer.jsx

@@ -1,49 +0,0 @@
-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";
-
-export default function PdfViewer({ file }) {
-  pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-    "pdfjs-dist/build/pdf.worker.min.mjs",
-    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) {
-      setPageNumber(pageNumber + 1);
-    }
-  }
-
-  return (
-    <>
-      <div className="pdf-container">
-        <Document
-          file={file}
-          onLoadSuccess={({ numPages: numPagesInPdf }) => {
-            setNumPages(numPagesInPdf);
-          }}
-          className="pdf-document"
-        >
-          <Page pageNumber={pageNumber} scale={0.8} />
-        </Document>
-        <div className="pdf-buttons shadow">
-          <button className="pdf-button" onClick={() => prev()}>
-            <span className="material-icons">arrow_back</span>
-          </button>
-          <button className="pdf-button" onClick={() => next()}>
-            <span className="material-icons">arrow_forward</span>
-          </button>
-        </div>
-      </div>
-    </>
-  );
-}

src/components/ProjectCard.jsx

@@ -7,7 +7,7 @@ import React from "react";
  * project.
  *
  * Managed by /Projects.jsx.
- * Data by /App.jsx.
+ * Data by /main.jsx > /App.jsx > /Projects.jsx.
  *
  * @param title String
  * @param description String

src/components/SkillCard.jsx

@@ -5,6 +5,9 @@ import React, { useState, useEffect } from "react";
  *
  * On mobile, only one card at a time may be active. The currently active card is
  * managed by the parent component, Home.jsx, via the isActive and onToggle props.
+ *
+ * Managed by /Home.jsx.
+ * Data by /main.jsx > /App.jsx > /Home.jsx
  * 
  * @param header String, the skill card's header
  * @param symbol String, a Material Icon from https://fonts.google.com/icons?icon.size=24&icon.color=%23e8eaed

src/main.css

@@ -61,7 +61,7 @@ h1 {
 
 h2,
 h3 {
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 2px;
   width: max-content;
 }
@@ -165,7 +165,7 @@ li {
 }
 
 .mySwiper {
-  width: 100vw;
+  width: 100%;
   height: 100%;
 }
 

src/main.jsx

@@ -6,12 +6,14 @@ import Resume from "./Resume.jsx";
 import ErrorPage from "./ErrorPage.jsx";
 
 /*
- * Root React container and renderer. Also manages the router. Any new pages should be added here.
+ * Root React container and renderer.
+ *
+ * Contains all data and data processing, as well as routing to different pages.
+ * TODO: Read data in from plain text files.
  */
 const container = document.getElementById("app");
 const root = createRoot(container);
 
-// TODO: Read data in from plain text files.
 const projectData = [
   {
     title: "One AI",