-
{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(
- } />
- } />
+ } />
+ } />