style: Code formatting

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',
+];

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' },
-  ];
+  { path: '/', label: 'HOME' },
+  { path: '/about', label: 'ABOUT' },
+  { path: '/projects', label: 'PROJECTS' },
+  { path: '/stats', label: 'STATS' },
+];

src/Components/Experience/ExperienceTimeline.scss

@@ -29,22 +29,32 @@ $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;
   position: relative;
   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;
     }
   }
-  
+}

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 = () => {
           >
             <div className="timeline-step education-step"></div>
             <div className="timeline-content">
-              <h3>{item.title} <span className="timeline-atsign">@ </span><span className="timeline-institution">{item.institution}</span></h3>
+              <h3>
+                {item.title} <span className="timeline-atsign">@ </span>
+                <span className="timeline-institution">{item.institution}</span>
+              </h3>
               <div className="timeline-date">{item.date}</div>
               <p>{item.description}</p>
               <div className="timeline-stats">
-                {Object.entries(statistics[item.statsKey] || {}).map(([key, value]: [string, number | string]) => (
-                  <div key={key} className="stat-item">
-                    <strong>{value}</strong> {key.replace(/([A-Z])/g, ' $1').toLowerCase()}
-                  </div>
-                ))}
+                {Object.entries(statistics[item.statsKey] || {}).map(
+                  ([key, value]: [string, number | string]) => (
+                    <div key={key} className="stat-item">
+                      <strong>{value}</strong>{' '}
+                      {key.replace(/([A-Z])/g, ' $1').toLowerCase()}
+                    </div>
+                  ),
+                )}
               </div>
             </div>
           </motion.div>
@@ -61,15 +67,21 @@ const ExperienceTimeline = () => {
           >
             <div className="timeline-step experience-step"></div>
             <div className="timeline-content">
-              <h3>{item.title} <span className="timeline-atsign">@ </span><span className="timeline-company">{item.company}</span></h3>
+              <h3>
+                {item.title} <span className="timeline-atsign">@ </span>
+                <span className="timeline-company">{item.company}</span>
+              </h3>
               <div className="timeline-date">{item.date}</div>
               <p>{item.description}</p>
               <div className="timeline-stats">
-                {Object.entries(statistics[item.statsKey] || {}).map(([key, value]: [string, number | string]) => (
-                  <div key={key} className="stat-item">
-                    <strong>{value}</strong> {key.replace(/([A-Z])/g, ' $1').toLowerCase()}
-                  </div>
-                ))}
+                {Object.entries(statistics[item.statsKey] || {}).map(
+                  ([key, value]: [string, number | string]) => (
+                    <div key={key} className="stat-item">
+                      <strong>{value}</strong>{' '}
+                      {key.replace(/([A-Z])/g, ' $1').toLowerCase()}
+                    </div>
+                  ),
+                )}
               </div>
             </div>
           </motion.div>

src/Components/Home/Hero/AnimatedImage.tsx

@@ -1,9 +1,5 @@
 import React, { useState, useEffect } from 'react';
-
-interface AnimatedImageProps {
-  imageNames: string[];
-  hoverImageNames: string[];
-}
+import { AnimatedImageProps } from '../../Interfaces/animatedImageProps';
 
 const AnimatedImage: React.FC<AnimatedImageProps> = ({
   imageNames,
@@ -64,6 +60,7 @@ const AnimatedImage: React.FC<AnimatedImageProps> = ({
       onMouseEnter={() => handleMouseEnter(currentIndex)}
       onMouseLeave={handleMouseLeave}
       width="280"
+      loading='lazy'
     />
   );
 };

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 (
     <div className="RightContainer">

src/Components/Interfaces/animatedImageProps.ts

@@ -0,0 +1,4 @@
+export interface AnimatedImageProps {
+  imageNames: string[];
+  hoverImageNames: string[];
+}

src/Components/Interfaces/projectItemProps.ts

@@ -1,5 +1,5 @@
 import { Project } from './projects';
 
 export interface ProjectItemProps {
-    project: Project;
-  }
+  project: Project;
+}

src/Components/Interfaces/projects.ts

@@ -1,8 +1,8 @@
 export interface Project {
-    image: string;
-    title: string;
-    languages: string;
-    description: string;
-    github?: string;
-    website?: string;
-  }
+  image: string;
+  title: string;
+  languages: string;
+  description: string;
+  github?: string;
+  website?: string;
+}

src/Components/Interfaces/types.ts

@@ -1,5 +1,5 @@
 export type Statistics = {
-    [key: string]: {
-      [key: string]: number | string;
-      } | null;
-  };
+  [key: string]: {
+    [key: string]: number | string;
+  } | null;
+};

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'
-    }
-  ];
+  {
+    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',
+  },
+];

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'
-    }
-  ];
+  {
+    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',
+  },
+];