Bayda77/digital-resume-FE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add skill category descriptions, update favicon and site title, and include new images.

Browse Source
This commit is contained in:
Bayda77
2026-01-20 01:52:27 -06:00
parent 89a35f286d
commit c2f3b57837
9 changed files with 41 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
public/images/about/gamecube.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/images/about/steak.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

0
public/metaImage.png → public/images/work/cnh.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

44
public/index.html
View File

@@ -1,22 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" /> <head>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<meta name="theme-color" content="#000000" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta <meta name="theme-color" content="#000000" />
name="description" <meta name="description" content="Digital portfolio and resume of Sasha Bayda, a passionate web developer." />
content="Digital portfolio and resume of Sasha Bayda, a passionate web developer." <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
/> <!--
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
@@ -25,12 +23,13 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>Sasha Bayda | Digital Resume</title> <title>Bayda's Digital Resume</title>
</head> </head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript> <body>
<div id="root"></div> <noscript>You need to enable JavaScript to run this app.</noscript>
<!-- <div id="root"></div>
<!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.
@@ -40,5 +39,6 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
</body> </body>
</html>
</html>

BIN
public/old_favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

11
src/components/SkillCard.tsx
View File

@@ -7,6 +7,7 @@ export interface SkillDetail {
export interface SkillCategory { export interface SkillCategory {
category: string; category: string;
description?: string;
skills: SkillDetail[]; skills: SkillDetail[];
} }
@@ -65,6 +66,16 @@ export default function SkillCard({ category, isExpanded, onToggle }: SkillCardP
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
style={{ borderTop: "1px solid rgba(255,255,255,0.2)", paddingTop: "20px" }} style={{ borderTop: "1px solid rgba(255,255,255,0.2)", paddingTop: "20px" }}
> >
{category.description && (
<p style={{
color: "rgba(255, 255, 255, 0.8)",
marginBottom: "20px",
fontSize: "1rem",
lineHeight: "1.5"
}}>
{category.description}
</p>
)}
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "15px" }}> <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "15px" }}>
{category.skills.map((skill) => ( {category.skills.map((skill) => (
<div key={skill.name} style={{ display: "flex", flexDirection: "column", gap: "5px" }}> <div key={skill.name} style={{ display: "flex", flexDirection: "column", gap: "5px" }}>

8
src/pages/Skills.tsx
View File

@@ -10,6 +10,7 @@ interface ProfessionalSkill {
const TECHNICAL_SKILLS: SkillCategory[] = [ const TECHNICAL_SKILLS: SkillCategory[] = [
{ {
category: "Languages", category: "Languages",
description: "Core programming languages I have utilized across professional roles, academic coursework, and personal projects.",
skills: [ skills: [
{ name: "JavaScript (ES6+)", description: "Used for frontend logic in 'Digital Resume', WordPress plugins at 'Allan's Landscaping', and the University of Saskatchewan class 'Full Stack Web Programming'." }, { name: "JavaScript (ES6+)", description: "Used for frontend logic in 'Digital Resume', WordPress plugins at 'Allan's Landscaping', and the University of Saskatchewan class 'Full Stack Web Programming'." },
{ name: "TypeScript", description: "Primary language for 'Digital Resume' and 'Nutrien' cloud apps" }, { name: "TypeScript", description: "Primary language for 'Digital Resume' and 'Nutrien' cloud apps" },
@@ -25,6 +26,7 @@ const TECHNICAL_SKILLS: SkillCategory[] = [
}, },
{ {
category: "Frameworks/Libraries", category: "Frameworks/Libraries",
description: "Key frameworks and libraries that power my applications, enabling efficient and scalable development.",
skills: [ skills: [
{ name: "React", description: "Built UI for 'Digital Resume', 'Nutrien' tools, and projects for the University of Saskatchewan class 'Full Stack Web Programming'." }, { name: "React", description: "Built UI for 'Digital Resume', 'Nutrien' tools, and projects for the University of Saskatchewan class 'Full Stack Web Programming'." },
{ name: "Express.js", description: "Minimalist web framework for Node.js servers. Used for early Server Testing" }, { name: "Express.js", description: "Minimalist web framework for Node.js servers. Used for early Server Testing" },
@@ -34,6 +36,7 @@ const TECHNICAL_SKILLS: SkillCategory[] = [
}, },
{ {
category: "Databases", category: "Databases",
description: "Data storage solutions I have implemented for varied use cases, from relational structure to flexible document stores.",
skills: [ skills: [
{ name: "PostgreSQL", description: "Backend database for self-hosted services like Authentik and Immich. Used both professionally and at the University of Saskatchewan for various classes." }, { name: "PostgreSQL", description: "Backend database for self-hosted services like Authentik and Immich. Used both professionally and at the University of Saskatchewan for various classes." },
{ name: "CouchDB", description: "Seamless multi-master sync capability database (No-SQL). Used for 'full stack web programming' class at the University of Saskatchewan." } { name: "CouchDB", description: "Seamless multi-master sync capability database (No-SQL). Used for 'full stack web programming' class at the University of Saskatchewan." }
@@ -41,6 +44,7 @@ const TECHNICAL_SKILLS: SkillCategory[] = [
}, },
{ {
category: "DevOps & Tools", category: "DevOps & Tools",
description: "Tools and practices I employ to automate workflows, manage infrastructure, and ensure reliable deployments.",
skills: [ skills: [
{ name: "Docker", description: "Containerized the 'Digital Resume', 'Gitea Workers', and 20+ 'self-hosted' services." }, { name: "Docker", description: "Containerized the 'Digital Resume', 'Gitea Workers', and 20+ 'self-hosted' services." },
{ name: "CircleCI", description: "Managed CI/CD pipelines and deployment workflows at 'Nutrien'." }, { name: "CircleCI", description: "Managed CI/CD pipelines and deployment workflows at 'Nutrien'." },
@@ -51,7 +55,8 @@ const TECHNICAL_SKILLS: SkillCategory[] = [
] ]
}, },
{ {
category: "AWS Technologies (Nutrien Internship)", category: "AWS Technologies",
description: "Cloud services I extensively utilized during my internship at Nutrien to build serverless and scalable solutions.",
skills: [ skills: [
{ name: "S3", description: "Utilized for scalable object storage and artifact management." }, { name: "S3", description: "Utilized for scalable object storage and artifact management." },
{ name: "Cloudfront", description: "Configured content delivery for refined user experience." }, { name: "Cloudfront", description: "Configured content delivery for refined user experience." },
@@ -66,6 +71,7 @@ const TECHNICAL_SKILLS: SkillCategory[] = [
}, },
{ {
category: "Concepts", category: "Concepts",
description: "Fundamental software engineering principles and methodologies that guide my architectural decisions and development process.",
skills: [ skills: [
{ name: "RESTful APIs", description: "Designed and consumed APIs for 'Digital Resume', 'Nutrien', and the University of Saskatchewan class 'Mobile & Cloud Computing'." }, { name: "RESTful APIs", description: "Designed and consumed APIs for 'Digital Resume', 'Nutrien', and the University of Saskatchewan class 'Mobile & Cloud Computing'." },
{ name: "Agile/Scrum", description: "Participated in iterative delivery and sprint planning at 'Nutrien'." }, { name: "Agile/Scrum", description: "Participated in iterative delivery and sprint planning at 'Nutrien'." },

2
src/pages/WorkExperience.tsx
View File

@@ -48,7 +48,7 @@ const WORK_EXPERIENCES = [
"Leveraged Python and OpenCV to control the simulator, ensuring accurate performance evaluations.", "Leveraged Python and OpenCV to control the simulator, ensuring accurate performance evaluations.",
"Utilized C# to integrate controls into the testing framework, streamlining the automation process." "Utilized C# to integrate controls into the testing framework, streamlining the automation process."
], ],
image: "/metaImage.png", image: "/images/work/cnh.png",
highlighted: true highlighted: true
}, },
{ {