From 2be30472e1ccf53626e8eb27a3591ee125f9cac7 Mon Sep 17 00:00:00 2001 From: Joshua Ashton Date: Wed, 8 Jan 2025 14:44:51 -0700 Subject: [PATCH 1/5] sync --- src/Resume.jsx | 77 ++++++++++++++++++++++++++++++++++++++++++-- src/main.css | 87 ++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 148 insertions(+), 16 deletions(-) diff --git a/src/Resume.jsx b/src/Resume.jsx index b38424bc..93cf1284 100644 --- a/src/Resume.jsx +++ b/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 ( <>
-

Resume

- +

Josh Ashton

+

Junior Full-Stack Developer

+

Work Experience

+ {jobData.map((job, index) => ( + + ))} +

Coding Experience
); } + +function Job({ company, title, start, end, location, responsibilities }) { + return ( + <> +
+
+
+
+

{company}

+
- {location}
+
+
{start} - {end}
+
+
{title}
+
+ +
+ + ) +} diff --git a/src/main.css b/src/main.css index b774b62e..8ba1e3ef 100644 --- a/src/main.css +++ b/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 { From 7fe060c09670adb10db7e31fba12ee7c727bd8d6 Mon Sep 17 00:00:00 2001 From: Violet Date: Wed, 8 Jan 2025 18:10:35 -0700 Subject: [PATCH 2/5] sync --- README.md | 1 + src/Resume.jsx | 32 +++++++++++++++++++++++++++++++- src/main.css | 4 ++-- 3 files changed, 34 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 37b390e3..bbe61588 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,7 @@ serve -s

Future Features:

+- [ ] .down-indicator popup text on hover, "scroll down to see my projects!" - [ ] Rewrite CSS into components/modules (v.0.0.2) - [ ] Read in data for portfolio a plain text files. (v.0.0.2) - [ ] Script to easily add new projects. (v.0.0.2) diff --git a/src/Resume.jsx b/src/Resume.jsx index 93cf1284..7f1f3458 100644 --- a/src/Resume.jsx +++ b/src/Resume.jsx @@ -50,6 +50,16 @@ export default function Resume() { ], }, ]; + + const eduData = [ + { + institution: "", + degree: "", + gpa: "", + start: "", + end: "", + } + ]; return ( <>
@@ -59,12 +69,32 @@ export default function Resume() { {jobData.map((job, index) => ( ))} -

Coding Experience

 +

Education

+ +

Click here for my coding experience & skills!
); } +function Education({ institution, degree, gpa, start, end }) { + return ( + <> + +
+
+
+

{institution}

+
- {degree}
+
+
{start} - {end}
+
+
+ + + ); +} + function Job({ company, title, start, end, location, responsibilities }) { return ( <> diff --git a/src/main.css b/src/main.css index 8ba1e3ef..d802d7f4 100644 --- a/src/main.css +++ b/src/main.css @@ -721,7 +721,8 @@ p { .job { width: 100%; - border: 1px solid white; + border-top: 1px solid var(--accent-0); + padding: 0vw 1vw 1vw 1vw; } .job-header-row { @@ -732,7 +733,6 @@ p { .job-time { justify-self: right; - justify-content: right; } .company-and-location { From d83699380ff4a21492b00604f11c63cb3f9413cb Mon Sep 17 00:00:00 2001 From: Joshua Ashton Date: Wed, 8 Jan 2025 21:26:33 -0700 Subject: [PATCH 3/5] implemented responsive portfolio and adjusted font sizes globally. --- src/App.jsx | 111 +-------------------------- src/Resume.jsx | 94 +++++++++++------------ src/components/SkillCard.jsx | 2 +- src/main.css | 64 +++++++++++----- src/main.jsx | 145 ++++++++++++++++++++++++++++++++++- 5 files changed, 233 insertions(+), 183 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index d6a8c4c3..d10baea6 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,119 +8,12 @@ import "./main.css"; /* * Primary portfolio application. Utilizes swiper.js (via /components/VerticalSlider.jsx) to * have a scrolling section to section effect. - * - * This is the primary place where (currently) application data is stored. This information will be read in - * from plain-text files in the future for ease of future editing. In the meantime, generated components, - * specifically the Skill Card and Project Card (see /components/SkillCard.jsx and /components/ProjectCard.jsx) - * get their data from here and thus any additions are made in this file. - * - * TODO: Read in data from a plain text file for easier editing in the future, and to separate domains. */ -const App = () => { - // DATA VARIABLES - const projectData = [ - { - title: "One AI", - description: - "An end-to-end self-hosted Artificial Intelligence solution, using Meta's Ollama platform to run Large Language Models. Go was used for the backend as a wrapper API and the frontend is Flutter. Here are some of the implemented features:", - featureList: [ - "AES encryption of messages between client and server", - "SHA-256 hashing for message validation", - "Base64 encoding for file uploads to the server", - "Docker container for isolation and security", - ], - image: "/images/one-ai-cropped.png", - imageGallery: null, - url: "https://github.com/quaxlyqueen/one-ai", - }, - { - title: "Snake", - description: - "A Snake clone in the command line, written in C#. Utilized a Queue data structure to keep track of the snake's body. Implemented features include:", - featureList: [ - "basic pseudo-randomized obstacle generation", - "difficulty selection by adjusting the frequency of obstacle generation", - "keyboard input to move the snake", - "ASCII art for the menu and game over state", - ], - image: "/images/snake.gif", - imageGallery: null, - url: "https://github.com/quaxlyqueen/2410-Snake", - }, - { - title: "Battery Monitor", - description: - "A battery monitor, written in C with a GUI written in Python. Utilizes the acpi Unix command to gather battery information. Implemented features incldue:", - featureList: [ - "embed Unix commands in C to get the date, time, battery percentage, and battery status", - "basic file I/O to store historical battery data", - "daemonize to run as a background process", - "script to install as a SystemD service", - "basic Python GUI in TKinter to provide graph of data", - ], - image: "/images/battery-mon.png", - imageGallery: null, - url: "https://github.com/quaxlyqueen/battery-mon", - }, - { - title: "D&D Character Builder", - description: - "A Dungeons and Dragons character builder, following the 5th edition rules and creation process. A collaborative project creating a GUI in Java with Swing. Features include:", - featureList: [ - "serialization of character data into custom filetype", - "global styling and custom font import", - "button hover effects", - ], - image: "/images/dnd.png", - imageGallery: null, - url: "https://github.com/quaxlyqueen/dnd", - }, - { - title: "Calculator", - description: - "A simple and themable calculator written in Python. This uses CustomTKinter for the GUI and the eva CLI package for the actual calculator functionality. Supports MacOS and Linux. Implemented features include:", - featureList: [ - "custom theming read in from a global .theme file", - "button hover effects", - "keyboard input", - ], - image: "/images/calculator.gif", - imageGallery: null, - url: "https://github.com/quaxlyqueen/calculator", - }, - ]; - - const skillsData = { - languages: [ - "C & C#", - "HTML & CSS", - "Go", - "Java", - "JavaScript & Dart", - "Python", - ], - tools: [ - "Git & GitHub", - "Docker", - "Flutter & React", - "Linux & NeoVim", - "Cloudflare", - "Microsoft Intune", - ], - other: [ - "Written Communication", - "Conflict Resolution", - "Project Management", - "Event Planning", - "Electronics Repair", - "Soldering", - ], - }; - +const App = ({ projectData, skillData }) => { const slides = [ , , , diff --git a/src/Resume.jsx b/src/Resume.jsx index 7f1f3458..dcd9330d 100644 --- a/src/Resume.jsx +++ b/src/Resume.jsx @@ -6,7 +6,7 @@ import React from "react"; * TODO: Rework resume to make it one page * TODO: Convert resume to a React component, with a link to save as PDF */ -export default function Resume() { +export default function Resume({ jobData, eduData, skillData }) { /* * { @@ -21,57 +21,47 @@ export default function Resume() { }, */ - 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.", - ], - }, - ]; - const eduData = [ - { - institution: "", - degree: "", - gpa: "", - start: "", - end: "", - } - ]; return ( <>

Josh Ashton

-

Junior Full-Stack Developer

+

Junior Full-Stack Developer

Work Experience

- {jobData.map((job, index) => ( - - ))} +
+ {jobData.map((job, index) => ( + + ))} +

Education

+
+ {eduData.map((edu, index) => ( + + ))} +
+

Skills

+ +
+ + ); +} -

Click here for my coding experience & skills!

 +function Skill({ languages, tools, other }) { + return ( + <> +
+
+

Languages:

+

{languages.join(", ")}

+
+
+

Tools:

+

{tools.join(", ")}

+
+
+

Other:

+

{other.join(", ")}

+
); @@ -81,16 +71,18 @@ function Education({ institution, degree, gpa, start, end }) { return ( <> -
-
-
-

{institution}

-
- {degree}
+
+
+
+
+

{institution}

+
- {degree}
+
+
{start} - {end}
-
{start} - {end}
+
{gpa}
- ); } diff --git a/src/components/SkillCard.jsx b/src/components/SkillCard.jsx index 9061fa03..c91610af 100644 --- a/src/components/SkillCard.jsx +++ b/src/components/SkillCard.jsx @@ -32,7 +32,7 @@ const SkillCard = ({ header, symbol, list, isActive, onToggle }) => {
onToggle()}> {symbol} -

{header}

+

{header}

{(isActive || !isMobile) && (
    diff --git a/src/main.css b/src/main.css index d802d7f4..9e495397 100644 --- a/src/main.css +++ b/src/main.css @@ -53,7 +53,7 @@ li { } h1 { - font-size: clamp(4.25rem, 5.5vw, 10rem); + font-size: clamp(4rem, 5vw, 10rem); font-weight: 600; letter-spacing: 2px; width: max-content; @@ -67,11 +67,11 @@ h3 { } h2 { - font-size: clamp(2rem, 3vw, 4rem); + font-size: clamp(3rem, 4vw, 7rem); } h3 { - font-size: clamp(1.5rem, 2rem, 3rem); + font-size: clamp(2rem, 3rem, 6rem); } h4 { @@ -85,20 +85,21 @@ h6 { } h4 { - font-size: clamp(1rem, 1.5vw, 2rem); + font-size: clamp(1rem, 1.5vw, 4rem); } h5 { - font-size: clamp(1rem, 1.25vw, 1.5rem); + font-size: clamp(1rem, 1.25vw, 3.5rem); } h6 { - font-size: clamp(1rem, 1.125vw, 1.25rem); + font-size: clamp(1rem, 1.125vw, 2rem); } -p { - font-weight: 200; - font-size: clamp(1rem, 1.5vw, 2rem); +p, +li { + font-weight: 300; + font-size: clamp(1rem, 1.1vw, 1.5rem); color: var(--text); } @@ -303,8 +304,8 @@ p { border-radius: 18px 18px 0 0; } -.skill-card-header h3 { - font-size: clamp(1.3rem, 2vw, 3rem); +.skill-card-header h4 { + font-weight: 700; text-align: right; } @@ -324,7 +325,6 @@ p { .card ul li { list-style: none; - font-size: clamp(1rem, 1.25vw, 1.5rem); color: var(--dark-0); } @@ -377,7 +377,6 @@ p { display: flex; flex-direction: column; justify-content: center; - margin-right: 5vw; } /* Tooltip container */ @@ -449,6 +448,7 @@ p { } .project-text p { + font-weight: 400; display: flex; flex-direction: column; justify-content: center; @@ -472,7 +472,6 @@ p { } .feature-list li { - font-size: clamp(1rem, 1.5rem, 2rem); color: var(--text); } @@ -719,28 +718,38 @@ p { width: 50%; } -.job { - width: 100%; +.jobs, +.education-section { border-top: 1px solid var(--accent-0); + width: 100%; +} + +.job, +.edu { + width: 100%; padding: 0vw 1vw 1vw 1vw; } -.job-header-row { +.job-header-row, +.edu-header-row { display: grid; grid-template-columns: 70% 30%; align-items: center; } -.job-time { +.job-time, +.edu-time { justify-self: right; } -.company-and-location { +.company-and-location, +.edu-and-degree { display: flex; align-items: center; } -.company-and-location h6 { +.company-and-location h6, +.edu-and-degree h6 { margin-left: .25vw; } @@ -753,6 +762,21 @@ p { font-weight: 300; } +.resume-skills { + border-top: 1px solid var(--accent-0); + width: 100%; +} + +.resume-skills-skill { + display: flex; + align-items: center; +} + +.resume-skills-skill p { + margin-left: .5vw; + padding: 1vw; +} + /**Animations**/ @keyframes background-fade { from { diff --git a/src/main.jsx b/src/main.jsx index 5df50844..0b6cfd8c 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -10,11 +10,152 @@ import ErrorPage from "./ErrorPage.jsx"; */ const container = document.getElementById("app"); const root = createRoot(container); + +// TODO: Read data in from plain text files. +const projectData = [ + { + title: "One AI", + description: + "An end-to-end self-hosted Artificial Intelligence solution, using Meta's Ollama platform to run Large Language Models. Go was used for the backend as a wrapper API and the frontend is Flutter. Here are some of the implemented features:", + featureList: [ + "AES encryption of messages between client and server", + "SHA-256 hashing for message validation", + "Base64 encoding for file uploads to the server", + "Docker container for isolation and security", + ], + image: "/images/one-ai-cropped.png", + imageGallery: null, + url: "https://github.com/quaxlyqueen/one-ai", + }, + { + title: "Snake", + description: + "A Snake clone in the command line, written in C#. Utilized a Queue data structure to keep track of the snake's body. Implemented features include:", + featureList: [ + "basic pseudo-randomized obstacle generation", + "difficulty selection by adjusting the frequency of obstacle generation", + "keyboard input to move the snake", + "ASCII art for the menu and game over state", + ], + image: "/images/snake.gif", + imageGallery: null, + url: "https://github.com/quaxlyqueen/2410-Snake", + }, + { + title: "Battery Monitor", + description: + "A battery monitor, written in C with a GUI written in Python. Utilizes the acpi Unix command to gather battery information. Implemented features incldue:", + featureList: [ + "embed Unix commands in C to get the date, time, battery percentage, and battery status", + "basic file I/O to store historical battery data", + "daemonize to run as a background process", + "script to install as a SystemD service", + "basic Python GUI in TKinter to provide graph of data", + ], + image: "/images/battery-mon.png", + imageGallery: null, + url: "https://github.com/quaxlyqueen/battery-mon", + }, + { + title: "D&D Character Builder", + description: + "A Dungeons and Dragons character builder, following the 5th edition rules and creation process. A collaborative project creating a GUI in Java with Swing. Features include:", + featureList: [ + "serialization of character data into custom filetype", + "global styling and custom font import", + "button hover effects", + ], + image: "/images/dnd.png", + imageGallery: null, + url: "https://github.com/quaxlyqueen/dnd", + }, + { + title: "Calculator", + description: + "A simple and themable calculator written in Python. This uses CustomTKinter for the GUI and the eva CLI package for the actual calculator functionality. Supports MacOS and Linux. Implemented features include:", + featureList: [ + "custom theming read in from a global .theme file", + "button hover effects", + "keyboard input", + ], + image: "/images/calculator.gif", + imageGallery: null, + url: "https://github.com/quaxlyqueen/calculator", + }, +]; + +const skillData = { + languages: [ + "C & C#", + "HTML & CSS", + "Go", + "Java", + "JavaScript & Dart", + "Python", + ], + tools: [ + "Git & GitHub", + "Docker", + "Flutter & React", + "Linux & NeoVim", + "Cloudflare", + "Microsoft Intune", + ], + other: [ + "Written Communication", + "Conflict Resolution", + "Project Management", + "Event Planning", + "Electronics Repair", + "Soldering", + ], +}; + +const jobData = [ + { + company: "SLC Public Library", + title: "Technology & Digital Equity Assistant", + start: "Aug '23", + 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 Admin.", + title: "IT Intern", + start: "Aug '23", + end: "Aug '24", + 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.", + ], + }, +]; + +const eduData = [ + { + institution: "Salt Lake Comm. College", + degree: "AS Comp Sci", + gpa: "3.48 (CS) || 2.87 (Cumulative)", + start: "Jan '21", + end: "Present", + } +]; + root.render( - } /> - } /> + } /> + } /> Date: Thu, 9 Jan 2025 10:13:03 -0700 Subject: [PATCH 4/5] finishing touches. --- src/App.jsx | 6 +++++ src/Home.jsx | 8 +++--- src/Projects.jsx | 2 +- src/Resume.jsx | 24 +++-------------- src/components/PdfViewer.jsx | 49 ---------------------------------- src/components/ProjectCard.jsx | 2 +- src/components/SkillCard.jsx | 3 +++ src/main.css | 4 +-- src/main.jsx | 6 +++-- 9 files changed, 25 insertions(+), 79 deletions(-) delete mode 100644 src/components/PdfViewer.jsx diff --git a/src/App.jsx b/src/App.jsx index d10baea6..457e524c 100644 --- a/src/App.jsx +++ b/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 = [ diff --git a/src/Home.jsx b/src/Home.jsx index fa5e2e76..1b39ed65 100644 --- a/src/Home.jsx +++ b/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 }) => { <>
    -
    +
    -
    +

    Hi, I'm Josh Ashton.

    Junior full-stack developer.

    @@ -32,7 +32,7 @@ const Home = ({ image, skills }) => {
    -
    +
    { return ( <>
    @@ -110,3 +92,5 @@ function Job({ company, title, start, end, location, responsibilities }) { ) } + +export default Resume; diff --git a/src/components/PdfViewer.jsx b/src/components/PdfViewer.jsx deleted file mode 100644 index ad1b3ec3..00000000 --- a/src/components/PdfViewer.jsx +++ /dev/null @@ -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 ( - <> -
    - { - setNumPages(numPagesInPdf); - }} - className="pdf-document" - > - - -
    - - -
    -
    - - ); -} diff --git a/src/components/ProjectCard.jsx b/src/components/ProjectCard.jsx index 2475e374..ffc8d0ae 100644 --- a/src/components/ProjectCard.jsx +++ b/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 diff --git a/src/components/SkillCard.jsx b/src/components/SkillCard.jsx index c91610af..7dc38ae4 100644 --- a/src/components/SkillCard.jsx +++ b/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 diff --git a/src/main.css b/src/main.css index 9e495397..5bae4aaa 100644 --- a/src/main.css +++ b/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%; } diff --git a/src/main.jsx b/src/main.jsx index 0b6cfd8c..a6eb30de 100644 --- a/src/main.jsx +++ b/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", From 6bd40423a56eeb00969caaa41cd87a639d859c59 Mon Sep 17 00:00:00 2001 From: Joshua Ashton Date: Wed, 15 Jan 2025 10:35:49 -0700 Subject: [PATCH 5/5] sync --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index bbe61588..374b1f60 100644 --- a/README.md +++ b/README.md @@ -83,8 +83,8 @@ serve -s - [x] Template HTML blocks for repeated components. (v.0.0.1) - [x] Contact page. (v.0.0.1) - [x] Proper 404 page (v.0.0.1) -- [ ] Resume page (HTML and PDF options). (v.0.0.1) - - [ ] Make resume 1 page (v.0.0.1) +- [x] Resume page (HTML and PDF options). (v.0.0.1) + - [x] Make resume 1 page (v.0.0.1) - [ ] Security: - [ ] Separate user for self-hosting, with reduced permissions. (v.0.0.1) - [ ] Dockerize (v.0.0.1)