From 01f7db6642ebcb64cd4f00c8cd3849108751a23f Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Fri, 16 Aug 2024 04:19:17 -0400 Subject: [PATCH 1/4] style: Organizing --- src/Components/Data/imageNames.ts | 12 ++++++++++++ src/Components/Home/Hero/AnimatedImage.tsx | 5 ----- src/Components/Home/Hero/RightContainer.tsx | 14 +------------- src/Components/Interfaces/animatedImageProps.ts | 4 ++++ 4 files changed, 17 insertions(+), 18 deletions(-) create mode 100644 src/Components/Data/imageNames.ts create mode 100644 src/Components/Interfaces/animatedImageProps.ts diff --git a/src/Components/Data/imageNames.ts b/src/Components/Data/imageNames.ts new file mode 100644 index 0000000..3ec2357 --- /dev/null +++ b/src/Components/Data/imageNames.ts @@ -0,0 +1,12 @@ +export const imageNames = [ + 'idleSprite0.png', + 'idleSprite1.png', + 'idleSprite2.png', + 'idleSprite3.png', + ]; + export const hoverImageNames = [ + 'hoverIdleSprite0.png', + 'hoverIdleSprite1.png', + 'hoverIdleSprite2.png', + 'hoverIdleSprite3.png', + ]; \ No newline at end of file diff --git a/src/Components/Home/Hero/AnimatedImage.tsx b/src/Components/Home/Hero/AnimatedImage.tsx index 429fc69..887aa8b 100644 --- a/src/Components/Home/Hero/AnimatedImage.tsx +++ b/src/Components/Home/Hero/AnimatedImage.tsx @@ -1,10 +1,5 @@ import React, { useState, useEffect } from 'react'; -interface AnimatedImageProps { - imageNames: string[]; - hoverImageNames: string[]; -} - const AnimatedImage: React.FC = ({ imageNames, hoverImageNames, diff --git a/src/Components/Home/Hero/RightContainer.tsx b/src/Components/Home/Hero/RightContainer.tsx index ac01039..5d46da3 100644 --- a/src/Components/Home/Hero/RightContainer.tsx +++ b/src/Components/Home/Hero/RightContainer.tsx @@ -1,20 +1,8 @@ import React from 'react'; import AnimatedImage from './AnimatedImage'; +import { imageNames, hoverImageNames } from '../../Data/imageNames'; import './Hero.scss'; -const imageNames = [ - 'idleSprite0.png', - 'idleSprite1.png', - 'idleSprite2.png', - 'idleSprite3.png', -]; -const hoverImageNames = [ - 'hoverIdleSprite0.png', - 'hoverIdleSprite1.png', - 'hoverIdleSprite2.png', - 'hoverIdleSprite3.png', -]; - const RightContainer: React.FC = () => { return (
diff --git a/src/Components/Interfaces/animatedImageProps.ts b/src/Components/Interfaces/animatedImageProps.ts new file mode 100644 index 0000000..aaaba24 --- /dev/null +++ b/src/Components/Interfaces/animatedImageProps.ts @@ -0,0 +1,4 @@ +export interface AnimatedImageProps { + imageNames: string[]; + hoverImageNames: string[]; + } \ No newline at end of file From 1a26059750b461aae1fc9bf55c1b6a2fd9ee5507 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Fri, 16 Aug 2024 04:20:32 -0400 Subject: [PATCH 2/4] style: Code organization --- src/Components/Home/Hero/AnimatedImage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Components/Home/Hero/AnimatedImage.tsx b/src/Components/Home/Hero/AnimatedImage.tsx index 887aa8b..90a7381 100644 --- a/src/Components/Home/Hero/AnimatedImage.tsx +++ b/src/Components/Home/Hero/AnimatedImage.tsx @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import { AnimatedImageProps } from '../../Interfaces/animatedImageProps'; const AnimatedImage: React.FC = ({ imageNames, From bfc77c6dc04d67860608b96567212e2032f585b0 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Fri, 16 Aug 2024 04:21:08 -0400 Subject: [PATCH 3/4] style: Run Prettier --- src/Components/Data/imageNames.ts | 22 +++--- src/Components/Data/navbarLinks.ts | 10 +-- .../Experience/ExperienceTimeline.scss | 49 +++++++----- .../Experience/ExperienceTimeline.tsx | 38 ++++++---- .../Interfaces/animatedImageProps.ts | 6 +- src/Components/Interfaces/projectItemProps.ts | 4 +- src/Components/Interfaces/projects.ts | 14 ++-- src/Components/Interfaces/types.ts | 8 +- src/Components/data/education.ts | 32 ++++---- src/Components/data/experience.ts | 76 ++++++++++--------- src/Components/data/statistics.ts | 50 ++++++------ 11 files changed, 168 insertions(+), 141 deletions(-) diff --git a/src/Components/Data/imageNames.ts b/src/Components/Data/imageNames.ts index 3ec2357..0f2dcd7 100644 --- a/src/Components/Data/imageNames.ts +++ b/src/Components/Data/imageNames.ts @@ -1,12 +1,12 @@ export const imageNames = [ - 'idleSprite0.png', - 'idleSprite1.png', - 'idleSprite2.png', - 'idleSprite3.png', - ]; - export const hoverImageNames = [ - 'hoverIdleSprite0.png', - 'hoverIdleSprite1.png', - 'hoverIdleSprite2.png', - 'hoverIdleSprite3.png', - ]; \ No newline at end of file + 'idleSprite0.png', + 'idleSprite1.png', + 'idleSprite2.png', + 'idleSprite3.png', +]; +export const hoverImageNames = [ + 'hoverIdleSprite0.png', + 'hoverIdleSprite1.png', + 'hoverIdleSprite2.png', + 'hoverIdleSprite3.png', +]; diff --git a/src/Components/Data/navbarLinks.ts b/src/Components/Data/navbarLinks.ts index e46b8db..5b1333b 100644 --- a/src/Components/Data/navbarLinks.ts +++ b/src/Components/Data/navbarLinks.ts @@ -1,6 +1,6 @@ export const links = [ - { path: '/', label: 'HOME' }, - { path: '/about', label: 'ABOUT' }, - { path: '/projects', label: 'PROJECTS' }, - { path: '/stats', label: 'STATS' }, - ]; \ No newline at end of file + { path: '/', label: 'HOME' }, + { path: '/about', label: 'ABOUT' }, + { path: '/projects', label: 'PROJECTS' }, + { path: '/stats', label: 'STATS' }, +]; diff --git a/src/Components/Experience/ExperienceTimeline.scss b/src/Components/Experience/ExperienceTimeline.scss index 434086c..1287f5b 100644 --- a/src/Components/Experience/ExperienceTimeline.scss +++ b/src/Components/Experience/ExperienceTimeline.scss @@ -29,7 +29,11 @@ $font-color: #a2aa94; margin-right: 20px; margin-bottom: 30px; padding-left: 20px; - background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(245,245,245,0.1) 200%); + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0%, + rgba(245, 245, 245, 0.1) 200% + ); border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); overflow: hidden; @@ -37,14 +41,20 @@ $font-color: #a2aa94; transform-origin: left center; &:hover { - background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(245,245,245,0.2) 200%); + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0.1) 0%, + rgba(245, 245, 245, 0.2) 200% + ); transform: translateY(-5px); - transition: transform 0.3s ease-in-out, background 0.3s ease-in-out; + transition: + transform 0.3s ease-in-out, + background 0.3s ease-in-out; } .timeline-content { padding-left: 10px; - margin-right: 20px; + margin-right: 20px; color: $text-color; border-left: 2px solid $primary-color; @@ -105,8 +115,8 @@ $font-color: #a2aa94; } .timeline-section { - margin-left: 30px; - margin-right: 30px; + margin-left: 30px; + margin-right: 30px; } .timeline-section-title { @@ -126,19 +136,18 @@ $font-color: #a2aa94; } .timeline-stats { - margin-top: 10px; - margin-bottom:10px; - display: flex; - flex-direction: column; - - .stat-item { - font-size: 0.9em; - color: $text-color; - margin-bottom: 5px; - - strong { - color: $primary-color; - } + margin-top: 10px; + margin-bottom: 10px; + display: flex; + flex-direction: column; + + .stat-item { + font-size: 0.9em; + color: $text-color; + margin-bottom: 5px; + + strong { + color: $primary-color; } } - \ No newline at end of file +} diff --git a/src/Components/Experience/ExperienceTimeline.tsx b/src/Components/Experience/ExperienceTimeline.tsx index 9e26069..e455ce9 100644 --- a/src/Components/Experience/ExperienceTimeline.tsx +++ b/src/Components/Experience/ExperienceTimeline.tsx @@ -9,7 +9,7 @@ const ExperienceTimeline = () => { const controls = useAnimation(); useEffect(() => { - controls.start((i) => ({ + controls.start(i => ({ opacity: 1, y: 0, transition: { delay: i * 0.2 }, @@ -33,15 +33,21 @@ const ExperienceTimeline = () => { >
-

{item.title} @ {item.institution}

+

+ {item.title} @ + {item.institution} +

{item.date}

{item.description}

- {Object.entries(statistics[item.statsKey] || {}).map(([key, value]: [string, number | string]) => ( -
- {value} {key.replace(/([A-Z])/g, ' $1').toLowerCase()} -
- ))} + {Object.entries(statistics[item.statsKey] || {}).map( + ([key, value]: [string, number | string]) => ( +
+ {value}{' '} + {key.replace(/([A-Z])/g, ' $1').toLowerCase()} +
+ ), + )}
@@ -61,15 +67,21 @@ const ExperienceTimeline = () => { >
-

{item.title} @ {item.company}

+

+ {item.title} @ + {item.company} +

{item.date}

{item.description}

- {Object.entries(statistics[item.statsKey] || {}).map(([key, value]: [string, number | string]) => ( -
- {value} {key.replace(/([A-Z])/g, ' $1').toLowerCase()} -
- ))} + {Object.entries(statistics[item.statsKey] || {}).map( + ([key, value]: [string, number | string]) => ( +
+ {value}{' '} + {key.replace(/([A-Z])/g, ' $1').toLowerCase()} +
+ ), + )}
diff --git a/src/Components/Interfaces/animatedImageProps.ts b/src/Components/Interfaces/animatedImageProps.ts index aaaba24..1587d0f 100644 --- a/src/Components/Interfaces/animatedImageProps.ts +++ b/src/Components/Interfaces/animatedImageProps.ts @@ -1,4 +1,4 @@ export interface AnimatedImageProps { - imageNames: string[]; - hoverImageNames: string[]; - } \ No newline at end of file + imageNames: string[]; + hoverImageNames: string[]; +} diff --git a/src/Components/Interfaces/projectItemProps.ts b/src/Components/Interfaces/projectItemProps.ts index 62dd60e..248f008 100644 --- a/src/Components/Interfaces/projectItemProps.ts +++ b/src/Components/Interfaces/projectItemProps.ts @@ -1,5 +1,5 @@ import { Project } from './projects'; export interface ProjectItemProps { - project: Project; - } \ No newline at end of file + project: Project; +} diff --git a/src/Components/Interfaces/projects.ts b/src/Components/Interfaces/projects.ts index 922f2a5..70e4bc8 100644 --- a/src/Components/Interfaces/projects.ts +++ b/src/Components/Interfaces/projects.ts @@ -1,8 +1,8 @@ export interface Project { - image: string; - title: string; - languages: string; - description: string; - github?: string; - website?: string; - } \ No newline at end of file + image: string; + title: string; + languages: string; + description: string; + github?: string; + website?: string; +} diff --git a/src/Components/Interfaces/types.ts b/src/Components/Interfaces/types.ts index f3e9008..5a83eef 100644 --- a/src/Components/Interfaces/types.ts +++ b/src/Components/Interfaces/types.ts @@ -1,5 +1,5 @@ export type Statistics = { - [key: string]: { - [key: string]: number | string; - } | null; - }; \ No newline at end of file + [key: string]: { + [key: string]: number | string; + } | null; +}; diff --git a/src/Components/data/education.ts b/src/Components/data/education.ts index 4a1f7d8..357a4f2 100644 --- a/src/Components/data/education.ts +++ b/src/Components/data/education.ts @@ -1,16 +1,18 @@ export const education = [ - { - date: 'September 2024 - Ongoing', - title: 'Bachelors of Economics', - institution: 'Concordia University', - description: 'Continuing my education exploring the world of economics and finance to bridge the gap between tech and business.', - statsKey: 'Economics' - }, - { - date: 'August 2021 - May 2024', - title: 'Computer Science DEC', - institution: 'John Abbott College', - description: 'Graduated with a focus on software/app/mobile development, including programming and IoT.', - statsKey: 'Academics' - } - ]; \ No newline at end of file + { + date: 'September 2024 - Ongoing', + title: 'Bachelors of Economics', + institution: 'Concordia University', + description: + 'Continuing my education exploring the world of economics and finance to bridge the gap between tech and business.', + statsKey: 'Economics', + }, + { + date: 'August 2021 - May 2024', + title: 'Computer Science DEC', + institution: 'John Abbott College', + description: + 'Graduated with a focus on software/app/mobile development, including programming and IoT.', + statsKey: 'Academics', + }, +]; diff --git a/src/Components/data/experience.ts b/src/Components/data/experience.ts index 6f06736..d6ca818 100644 --- a/src/Components/data/experience.ts +++ b/src/Components/data/experience.ts @@ -1,37 +1,41 @@ export const experience = [ - { - date: 'June 2024 - Ongoing', - title: 'SDE Intern', - company: 'Tail\'ed', - description: 'Building the company website & developing an AI product.', - statsKey: 'SDE Intern' - }, - { - date: 'March 2024 - Ongoing', - title: 'Head Delegate Montreal', - company: 'Canadian University Software Engineering Conference (CUSEC)', - description: 'Leading the delegation of post-secondary students across Montreal for the annual conference.', - statsKey: 'Head Delegate Montreal' - }, - { - date: 'January 2024 - May 2024', - title: 'IT Intern', - company: 'Town of Kirkland', - description: 'Delivered technical support to government employees and received training in cybersecurity under the Cybersecurity Analyst of the municipality.', - statsKey: 'IT Intern' - }, - { - date: 'March 2024 - July 2024', - title: 'Director', - company: 'JACHacks', - description: 'Led the organization of the hackathon, overseeing event planning and execution.', - statsKey: 'Director' - }, - { - date: 'February 2024 - April 2024', - title: 'R&D Fellowship', - company: 'AI Launch Lab', - description: 'Learned under PhDs while developing TradeMind for my fellowship project.', - statsKey: 'R&D Fellowship' - } - ]; \ No newline at end of file + { + date: 'June 2024 - Ongoing', + title: 'SDE Intern', + company: "Tail'ed", + description: 'Building the company website & developing an AI product.', + statsKey: 'SDE Intern', + }, + { + date: 'March 2024 - Ongoing', + title: 'Head Delegate Montreal', + company: 'Canadian University Software Engineering Conference (CUSEC)', + description: + 'Leading the delegation of post-secondary students across Montreal for the annual conference.', + statsKey: 'Head Delegate Montreal', + }, + { + date: 'January 2024 - May 2024', + title: 'IT Intern', + company: 'Town of Kirkland', + description: + 'Delivered technical support to government employees and received training in cybersecurity under the Cybersecurity Analyst of the municipality.', + statsKey: 'IT Intern', + }, + { + date: 'March 2024 - July 2024', + title: 'Director', + company: 'JACHacks', + description: + 'Led the organization of the hackathon, overseeing event planning and execution.', + statsKey: 'Director', + }, + { + date: 'February 2024 - April 2024', + title: 'R&D Fellowship', + company: 'AI Launch Lab', + description: + 'Learned under PhDs while developing TradeMind for my fellowship project.', + statsKey: 'R&D Fellowship', + }, +]; diff --git a/src/Components/data/statistics.ts b/src/Components/data/statistics.ts index 939ac3e..c27b717 100644 --- a/src/Components/data/statistics.ts +++ b/src/Components/data/statistics.ts @@ -1,28 +1,28 @@ import { Statistics } from '../Interfaces/types'; export const statistics: Statistics = { - 'SDE Intern': { - productsMade: 3, - languagesAndFrameworksUsed: 5, - }, - 'Head Delegate Montreal': { - schools: '10+' - }, - 'IT Intern': { - supportCasesResolved: '100+', - cybersecurityVulnerabilitiesResolved: '4500+' - }, - 'Director': { - attendees: '130+' - }, - 'R&D Fellowship': { - inProgramHistory: 'Best project' - }, - 'Academics': { - inFinalSemester: '4.0 GPA', - outstandingAcademicImprovementAward: 'Awarded the', - semesterlyAwardedScholarship: '$1500', - capstoneProjectInProgramHistory: 'Best' - }, - 'Economics': null // I have no stats yet - }; \ No newline at end of file + 'SDE Intern': { + productsMade: 3, + languagesAndFrameworksUsed: 5, + }, + 'Head Delegate Montreal': { + schools: '10+', + }, + 'IT Intern': { + supportCasesResolved: '100+', + cybersecurityVulnerabilitiesResolved: '4500+', + }, + Director: { + attendees: '130+', + }, + 'R&D Fellowship': { + inProgramHistory: 'Best project', + }, + Academics: { + inFinalSemester: '4.0 GPA', + outstandingAcademicImprovementAward: 'Awarded the', + semesterlyAwardedScholarship: '$1500', + capstoneProjectInProgramHistory: 'Best', + }, + Economics: null, // I have no stats yet +}; From 69d9705f9665060998ead544a7bcee711e86663b Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Fri, 16 Aug 2024 04:33:35 -0400 Subject: [PATCH 4/4] feat: Lazy load images --- src/Components/Home/Hero/AnimatedImage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Components/Home/Hero/AnimatedImage.tsx b/src/Components/Home/Hero/AnimatedImage.tsx index 90a7381..9784fbe 100644 --- a/src/Components/Home/Hero/AnimatedImage.tsx +++ b/src/Components/Home/Hero/AnimatedImage.tsx @@ -60,6 +60,7 @@ const AnimatedImage: React.FC = ({ onMouseEnter={() => handleMouseEnter(currentIndex)} onMouseLeave={handleMouseLeave} width="280" + loading='lazy' /> ); };