@@ -15,4 +15,4 @@ const OnePager: React.FC = () => {
);
};
-export default OnePager;
+export default Content;
diff --git a/src/Components/Data/experience.ts b/src/Components/Data/experience.ts
index 4a4f7b4..ca51610 100644
--- a/src/Components/Data/experience.ts
+++ b/src/Components/Data/experience.ts
@@ -8,8 +8,8 @@ export const experience = [
},
{
date: 'March 2024 - Ongoing',
- title: 'Head Delegate Montreal',
- company: 'Canadian University Software Engineering Conference (CUSEC)',
+ title: 'HD Montreal',
+ company: 'CUSEC',
description:
'Leading the delegation of post-secondary students across Montreal for the annual conference.',
statsKey: 'Head Delegate Montreal',
@@ -19,7 +19,7 @@ export const experience = [
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.',
+ 'Delivered technical support to government employees and trained under the Cybersecurity Lead of the municipality.',
statsKey: 'IT Intern',
},
{
diff --git a/src/Components/Experience/Experience.scss b/src/Components/Experience/Experience.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/Components/Experience/Experience.tsx b/src/Components/Experience/Experience.tsx
index 45ce7a6..dd281e1 100644
--- a/src/Components/Experience/Experience.tsx
+++ b/src/Components/Experience/Experience.tsx
@@ -1,6 +1,5 @@
import React from 'react';
import ExperienceTimeline from './ExperienceTimeline';
-import './Experience.scss';
const Experience = () => (
diff --git a/src/Components/Experience/ExperienceTimeline.scss b/src/Components/Experience/ExperienceTimeline.scss
index 1287f5b..4e59c53 100644
--- a/src/Components/Experience/ExperienceTimeline.scss
+++ b/src/Components/Experience/ExperienceTimeline.scss
@@ -5,56 +5,144 @@ $quaternary-color: #95b9b0;
$background-color: #262f2aec;
$text-color: #fafff0;
$font-color: #a2aa94;
+$list-item-color: #2bd4a0;
+$hover-color: #ced4da;
+$box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+$border-radius: 8px;
+$language-item-tint: darken($list-item-color, 30%);
+$framework-item-tint: darken($list-item-color, 35%);
+$tools-item-tint: darken($list-item-color, 40%);
+
+.experience-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 6rem;
+ padding: 2rem;
+ max-width: 1900px;
+ margin: 0 auto;
+ align-items: start;
+
+ .category-containers {
+ display: grid;
+ grid-template-columns: 1fr;
+
+ .CategoryContainer {
+ padding: 1rem;
+ border-radius: 8px;
+
+ .CategoryTitle {
+ font-size: 1.5rem;
+ color: $text-color;
+ text-align: center;
+ &:not(:first-child) {
+ margin-top: 0;
+ }
+ }
+
+ .TechList {
+ font-family: 'Poppins', sans-serif;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 0.5rem;
+ list-style-type: none;
+ padding: 0;
+
+ li {
+ display: flex;
+ align-items: center;
+ color: darken(white, 5%);
+ padding: 1rem;
+ font-weight: 500;
+ font-size: 1.1rem;
+ border-radius: $border-radius;
+
+ svg {
+ margin-right: 0.5rem;
+ color: white;
+ }
+ }
+
+ li:hover {
+ background-color: darken($background-color, 15%);
+ transform: scale(1.05);
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 768px) {
+ .experience-grid {
+ grid-template-columns: 1fr;
+ gap: 0em;
+
+ .category-containers {
+ .CategoryContainer {
+ .TechList {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+ }
+ }
+}
+
+.TechList.programming-languages li {
+ background-color: $language-item-tint;
+}
+
+.TechList.frameworks-libraries li {
+ background-color: $framework-item-tint;
+}
+
+.TechList.tools-platforms li {
+ background-color: $tools-item-tint;
+}
.timeline {
position: relative;
- padding: 20px 0;
+ padding: 15px 0;
margin-left: 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
@media (max-width: 768px) {
- margin-left: 20px;
+ margin-left: 15px;
}
@media (max-width: 430px) {
- margin-left: 15px;
- padding: 10px 0;
+ margin-left: 10px;
+ padding: 5px 0;
}
}
.timeline-item {
position: relative;
- margin-right: 20px;
- margin-bottom: 30px;
- padding-left: 20px;
+ margin-left: -15px;
+ margin-bottom: 20px;
+ padding-left: 15px;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(245, 245, 245, 0.1) 200%
);
+ background-size: 200% 100%;
+ background-position: left;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
transform-origin: left center;
+ transition: background-position 0.3s ease-in-out, transform 0.3s ease-in-out;
&:hover {
- background: linear-gradient(
- 90deg,
- rgba(255, 255, 255, 0.1) 0%,
- rgba(245, 245, 245, 0.2) 200%
- );
+ background-position: right;
transform: translateY(-5px);
- transition:
- transform 0.3s ease-in-out,
- background 0.3s ease-in-out;
}
.timeline-content {
padding-left: 10px;
- margin-right: 20px;
+ margin-right: 10px;
color: $text-color;
border-left: 2px solid $primary-color;
@@ -67,10 +155,6 @@ $font-color: #a2aa94;
@media (max-width: 768px) {
font-size: 1.3em;
}
-
- @media (max-width: 430px) {
- font-size: 1.1em;
- }
}
p {
@@ -78,18 +162,12 @@ $font-color: #a2aa94;
color: lighten($font-color, 30%);
@media (max-width: 768px) {
- font-size: 0.9em;
- }
-
- @media (max-width: 430px) {
- font-size: 0.8em;
+ font-size: 0.95em;
}
}
}
- .timeline-company {
- color: lighten($secondary-color, 10%);
- }
+ .timeline-company,
.timeline-institution {
color: lighten($secondary-color, 10%);
}
@@ -107,7 +185,7 @@ $font-color: #a2aa94;
.timeline-step {
position: absolute;
- left: -12px;
+ left: -10px;
top: 0;
height: 100%;
display: flex;
@@ -115,15 +193,16 @@ $font-color: #a2aa94;
}
.timeline-section {
- margin-left: 30px;
- margin-right: 30px;
+ margin-left: 20px;
+ margin-right: 20px;
}
.timeline-section-title {
font-size: 2em;
color: $text-color;
- margin-bottom: 15px;
- padding-left: 10px;
+ margin-bottom: 10px;
+ margin-left: -15px;
+ padding-left: 5px;
font-weight: bold;
@media (max-width: 768px) {
@@ -136,18 +215,18 @@ $font-color: #a2aa94;
}
.timeline-stats {
- margin-top: 10px;
- margin-bottom: 10px;
+ margin-top: 5px;
+ margin-bottom: 5px;
display: flex;
flex-direction: column;
.stat-item {
font-size: 0.9em;
color: $text-color;
- margin-bottom: 5px;
+ margin-bottom: 3px;
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 e455ce9..184d8d1 100644
--- a/src/Components/Experience/ExperienceTimeline.tsx
+++ b/src/Components/Experience/ExperienceTimeline.tsx
@@ -4,12 +4,60 @@ import { education } from '../Data/education';
import { experience } from '../Data/experience';
import { statistics } from '../Data/statistics';
import './ExperienceTimeline.scss';
+import {
+ FaPython,
+ FaJava,
+ FaJsSquare,
+ FaReact,
+ FaGitAlt,
+ FaDocker,
+ FaHtml5,
+ FaCss3Alt,
+ FaAws,
+ FaNodeJs,
+ FaSass,
+ FaPhp,
+ FaAngular,
+ FaBootstrap,
+ FaFigma,
+ FaRaspberryPi,
+} from 'react-icons/fa';
+import {
+ SiCsharp,
+ SiSqlite,
+ SiKotlin,
+ SiDotnet,
+ SiXamarin,
+ SiTypescript,
+ SiJquery,
+ SiNextdotjs,
+ SiAzuredevops,
+ SiFirebase,
+ SiVercel,
+ SiCloudflare,
+ SiExpress,
+ SiTailwindcss,
+ SiNginx,
+ SiMongodb,
+ SiMysql,
+ SiMicrosoftsqlserver,
+ SiKeras,
+ SiPytorch,
+ SiScikitlearn,
+ SiPostman,
+ SiSwagger,
+ SiJira,
+ SiKubernetes,
+ SiUnity,
+ SiGnubash,
+ SiPowershell,
+} from 'react-icons/si';
const ExperienceTimeline = () => {
const controls = useAnimation();
useEffect(() => {
- controls.start(i => ({
+ controls.start((i) => ({
opacity: 1,
y: 0,
transition: { delay: i * 0.2 },
@@ -17,75 +65,235 @@ const ExperienceTimeline = () => {
}, [controls]);
return (
-
-
+
+
+
-
-
Education
- {education.map((item, index) => (
-
-
-
-
- {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()}
-
- ),
- )}
+
+
Education
+ {education.map((item, index) => (
+
+
+
+
+ {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()}
+
+ ),
+ )}
+
-
- ))}
-
+
+ ))}
+
-
Experience
- {experience.map((item, index) => (
-
-
-
-
- {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()}
-
- ),
- )}
+
+
Experience
+ {experience.map((item, index) => (
+
+
+
+
+ {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()}
+
+ ),
+ )}
+
-
- ))}
+
+ ))}
+
+
+
+
Languages
+
+ -
+ Python
+
+ -
+ Java
+
+ -
+ JavaScript
+
+ -
+ TypeScript
+
+ -
+ C#
+
+ -
+ Kotlin
+
+ -
+ PHP
+
+ -
+ PowerShell
+
+ -
+ Bash
+
+ -
+ HTML
+
+ -
+ CSS
+
+ -
+ MSSQL
+
+ -
+ SQLite
+
+ -
+ MySQL
+
+
+
+
+
+
Frameworks & Libraries
+
+ -
+ ASP.NET
+
+ -
+ .NET MAUI
+
+ -
+ WPF
+
+ -
+ Xamarin
+
+ -
+ React
+
+ -
+ Next.js
+
+ -
+ jQuery
+
+ -
+ Angular
+
+ -
+ Bootstrap
+
+ -
+ Node.js
+
+ -
+ SCSS
+
+ -
+ TailwindCSS
+
+ -
+ Express.js
+
+ -
+ Keras
+
+ -
+ PyTorch
+
+ -
+ scikit-learn
+
+
+
+
+
+
Tools
+
+ -
+ Git
+
+ -
+ MongoDB
+
+ -
+ Docker
+
+ -
+ Azure
+
+ -
+ AWS
+
+ -
+ Cloudflare
+
+ -
+ Firebase
+
+ -
+ Vercel
+
+ -
+ Nginx
+
+ -
+ Unity
+
+ -
+ Kubernetes
+
+ -
+ Postman
+
+ -
+ Swagger
+
+ -
+ Jira
+
+ -
+ Rasp Pi
+
+ -
+ Figma
+
+
+
+