sync

src/Resume.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import PdfViewer from "./components/PdfViewer";
 
 /*
  * Page to display my Resume.
@@ -8,12 +7,84 @@ import PdfViewer from "./components/PdfViewer";
  * TODO: Convert resume to a React component, with a link to save as PDF
  */
 export default function Resume() {
+  /*
+   *     
+  {
+    company: "",
+    title: "",
+    start: "",
+    end: "",
+    location: "",
+    responsibilities: [
+      "",
+    ],
+  },
+
+   */
+  const jobData = [
+    {
+      company: "SLC Public Library",
+      title: "Technology & Digital Equity Assistant",
+      start: "Aug. 2023",
+      end: "Present",
+      location: "Salt Lake City, UT",
+      responsibilities: [
+        "Assist library patrons with using technology, on devices such as publicly available PCs, laptops, mobile devices, and more.",
+        "Teach fundamental computer usage skills.",
+        "Expose patrons to the importance of digital security, password management, and two-factor authentication.",
+        "Developing workshop curriculum for Raspberry Pi’s."
+      ],
+    },
+    {
+      company: "Trust Lands Administration",
+      title: "IT Intern",
+      start: "Aug. 2023",
+      end: "Aug. 2024",
+      location: "Salt Lake City, UT",
+      responsibilities: [
+        "Orchestrated Microsoft Intune setup and deployment to multiple platforms.",
+        "Streamlined IT equipment inventory process",
+        "Provided training to optimize the usage of hardware and software.",
+        "Troubleshoot and repair hardware and software on a variety of devices.",
+        "Developed automation scripts for use in various parts of the business.",
+      ],
+    },
+  ];
   return (
     <>
       <div id="resume-section">
-        <h1>Resume</h1>
-        <PdfViewer file="resume.pdf" />
+        <h1>Josh Ashton</h1>
+        <h2>Junior Full-Stack Developer</h2>
+        <h3>Work Experience</h3>
+        {jobData.map((job, index) => (
+          <Job key={index} company={job.company} title={job.title} start={job.start} end={job.end} location={job.location} responsibilities={job.responsibilities} />
+        ))}
+        <a href="/"><h3>Coding Experience</h3></a>
       </div>
     </>
   );
 }
+
+function Job({ company, title, start, end, location, responsibilities }) {
+  return (
+    <>
+      <div className="job">
+        <div className="job-header">
+          <div className="job-header-row">
+            <div className="company-and-location">
+              <h4>{company} </h4>
+              <h6>- {location}</h6>
+            </div>
+            <h6 className="job-time">{start} - {end}</h6>
+          </div>
+          <h5>{title}</h5>
+        </div>
+        <ul className="job-list">
+          {responsibilities.map((r, index) => (
+            <li key={index} className="job-list-item">{r}</li>
+          ))}
+        </ul>
+      </div>
+    </>
+  )
+}

src/main.css

@@ -41,39 +41,64 @@ body {
   background-attachment: fixed;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+li {
+  color: var(--text);
+}
+
 h1 {
   font-size: clamp(4.25rem, 5.5vw, 10rem);
   font-weight: 600;
   letter-spacing: 2px;
   width: max-content;
-  color: var(--text);
 }
 
-h3,
-h4 {
-  color: var(--text);
-  font-weight: 300;
-  line-height: 1.5;
+h2,
+h3 {
+  font-weight: 600;
+  letter-spacing: 2px;
+  width: max-content;
 }
 
 h2 {
   font-size: clamp(2rem, 3vw, 4rem);
-  font-weight: 600;
-  letter-spacing: 2px;
-  width: max-content;
-  color: var(--text);
 }
 
 h3 {
-  font-size: clamp(1.5rem, 2vw, 3rem);
+  font-size: clamp(1.5rem, 2rem, 3rem);
 }
 
 h4 {
-  font-size: clamp(1rem, 1.5vw, 1.25rem);
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+h5,
+h6 {
+  font-weight: 300;
+}
+
+h4 {
+  font-size: clamp(1rem, 1.5vw, 2rem);
+}
+
+h5 {
+  font-size: clamp(1rem, 1.25vw, 1.5rem);
+}
+
+h6 {
+  font-size: clamp(1rem, 1.125vw, 1.25rem);
 }
 
 p {
-  font-size: clamp(1rem, 1.5rem, 2rem);
+  font-weight: 200;
+  font-size: clamp(1rem, 1.5vw, 2rem);
   color: var(--text);
 }
 
@@ -530,6 +555,8 @@ p {
 #resume-section {
   margin: 2vw;
   display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 /**PDF Viewer**/
@@ -692,6 +719,40 @@ p {
   width: 50%;
 }
 
+.job {
+  width: 100%;
+  border: 1px solid white;
+}
+
+.job-header-row {
+  display: grid;
+  grid-template-columns: 70% 30%;
+  align-items: center;
+}
+
+.job-time {
+  justify-self: right;
+  justify-content: right;
+}
+
+.company-and-location {
+  display: flex;
+  align-items: center;
+}
+
+.company-and-location h6 {
+  margin-left: .25vw;
+}
+
+.job-list {
+  margin: 0 auto;
+  width: 90%;
+}
+
+.job-list-item {
+  font-weight: 300;
+}
+
 /**Animations**/
 @keyframes background-fade {
   from {