feat: Experience page

src/App.tsx

@@ -2,15 +2,11 @@ import React from 'react';
 import Hero from './Components/Home/Hero/Hero';
 import Project from './Components/Projects/Projects';
 import About from './Components/About/About';
+import Experience from './Components/Experience/Experience';
 import { Route, Routes } from 'react-router-dom';
 import Navbar from './Components/Navbar';
 import './App.scss';
 
-const Home = () => <></>;
-const Abouts = () => <></>;
-const Projects = () => <></>;
-const Contact = () => <></>;
-
 const App: React.FC = () => {
   return (
     <div className="App">
@@ -19,7 +15,7 @@ const App: React.FC = () => {
         <Route path="/" element={<Hero />} />
         <Route path="/about" element={<About />} />
         <Route path="/projects" element={<Project />} />
-        <Route path="/contact" element={<Contact />} />
+        <Route path="/stats" element={<Experience />} />
       </Routes>
     </div>
   );

src/Components/Data/navbarLinks.ts

@@ -0,0 +1,6 @@
+export const links = [
+    { path: '/', label: 'HOME' },
+    { path: '/about', label: 'ABOUT' },
+    { path: '/projects', label: 'PROJECTS' },
+    { path: '/stats', label: 'STATS' },
+  ];

src/Components/Experience/Experience.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ExperienceTimeline from './ExperienceTimeline';
+import './Experience.scss';
+
+const Experience = () => (
+  <div className="experience-page">
+    <ExperienceTimeline />
+  </div>
+);
+
+export default Experience;

src/Components/Experience/ExperienceTimeline.scss

@@ -0,0 +1,144 @@
+$primary-color: #2af598;
+$secondary-color: #00715f;
+$tertiary-color: #33b072;
+$quaternary-color: #95b9b0;
+$background-color: #262f2aec;
+$text-color: #fafff0;
+$font-color: #a2aa94;
+
+.timeline {
+  position: relative;
+  padding: 20px 0;
+  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  @media (max-width: 768px) {
+    margin-left: 20px;
+  }
+
+  @media (max-width: 430px) {
+    margin-left: 15px;
+    padding: 10px 0;
+  }
+}
+
+.timeline-item {
+  position: relative;
+  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%);
+  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%);
+    transform: translateY(-5px);
+    transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
+  }
+
+  .timeline-content {
+    padding-left: 10px;
+    margin-right: 20px; 
+    color: $text-color;
+    border-left: 2px solid $primary-color;
+
+    h3 {
+      font-size: 1.5em;
+      margin-bottom: 3px;
+      color: darken($primary-color, 20%);
+      transition: color 0.3s ease-in-out;
+
+      @media (max-width: 768px) {
+        font-size: 1.3em;
+      }
+
+      @media (max-width: 430px) {
+        font-size: 1.1em;
+      }
+    }
+
+    p {
+      font-size: 1em;
+      color: lighten($font-color, 30%);
+
+      @media (max-width: 768px) {
+        font-size: 0.9em;
+      }
+
+      @media (max-width: 430px) {
+        font-size: 0.8em;
+      }
+    }
+  }
+
+  .timeline-company {
+    color: lighten($secondary-color, 10%);
+  }
+  .timeline-institution {
+    color: lighten($secondary-color, 10%);
+  }
+
+  .timeline-atsign {
+    color: $text-color;
+  }
+
+  .timeline-date {
+    margin-top: 5px;
+    font-size: 0.9em;
+    color: $quaternary-color;
+  }
+}
+
+.timeline-step {
+  position: absolute;
+  left: -12px;
+  top: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.timeline-section {
+    margin-left: 30px;
+    margin-right: 30px;
+}
+
+.timeline-section-title {
+  font-size: 2em;
+  color: $text-color;
+  margin-bottom: 15px;
+  padding-left: 10px;
+  font-weight: bold;
+
+  @media (max-width: 768px) {
+    font-size: 1.7em;
+  }
+
+  @media (max-width: 430px) {
+    font-size: 1.4em;
+  }
+}
+
+.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;
+      }
+    }
+  }
+

src/Components/Experience/ExperienceTimeline.tsx

@@ -0,0 +1,82 @@
+import { motion, useAnimation } from 'framer-motion';
+import { useEffect } from 'react';
+import { education } from '../Data/education';
+import { experience } from '../Data/experience';
+import { statistics } from '../Data/statistics';
+import './ExperienceTimeline.scss';
+
+const ExperienceTimeline = () => {
+  const controls = useAnimation();
+
+  useEffect(() => {
+    controls.start((i) => ({
+      opacity: 1,
+      y: 0,
+      transition: { delay: i * 0.2 },
+    }));
+  }, [controls]);
+
+  return (
+    <div className="timeline">
+      <motion.div className="particle-background" />
+
+      <div className="timeline-section">
+        <h2 className="timeline-section-title">Education</h2>
+        {education.map((item, index) => (
+          <motion.div
+            key={index}
+            custom={index}
+            initial={{ opacity: 0, y: 20 }}
+            animate={controls}
+            exit={{ opacity: 0, y: 20 }}
+            className="timeline-item"
+          >
+            <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>
+              <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>
+                ))}
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+
+      <div className="timeline-section">
+        <h2 className="timeline-section-title">Experience</h2>
+        {experience.map((item, index) => (
+          <motion.div
+            key={index}
+            custom={index + education.length}
+            initial={{ opacity: 0, y: 20 }}
+            animate={controls}
+            exit={{ opacity: 0, y: 20 }}
+            className="timeline-item"
+          >
+            <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>
+              <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>
+                ))}
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ExperienceTimeline;

src/Components/Interfaces/projectItemProps.ts

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

src/Components/Interfaces/projects.ts

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

src/Components/Interfaces/types.ts

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

src/Components/Navbar.tsx

@@ -1,18 +1,12 @@
 import React, { useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import { FaBars, FaTimes } from 'react-icons/fa';
+import { links } from './Data/navbarLinks';
 import './Navbar.scss';
 
 const Navbar: React.FC = () => {
   const [menuOpen, setMenuOpen] = useState(false);
 
-  const links = [
-    { path: '/', label: 'HOME' },
-    { path: '/about', label: 'ABOUT' },
-    { path: '/projects', label: 'PROJECTS' },
-    { path: '/contact', label: 'RESUME' },
-  ];
-
   const toggleMenu = () => {
     setMenuOpen(!menuOpen);
   };

src/Components/Projects/ProjectItem.tsx

@@ -3,13 +3,9 @@ import { useInView } from 'react-intersection-observer';
 import { FaGithub, FaExternalLinkAlt } from 'react-icons/fa';
 import { motion } from 'framer-motion';
 import { useSpring } from 'react-spring';
-import { Project } from './data/portfolioProjects';
+import { ProjectItemProps } from '../Interfaces/projectItemProps';
 import './Projects.scss';
 
-interface ProjectItemProps {
-  project: Project;
-}
-
 const ProjectItem: React.FC<ProjectItemProps> = ({ project }) => {
   const [ref, inView] = useInView({
     triggerOnce: true,

src/Components/Projects/Projects.tsx

@@ -1,7 +1,7 @@
 // src/components/Projects.tsx
 import React from 'react';
 import ProjectItem from './ProjectItem';
-import projects from './data/portfolioProjects';
+import { projects } from '../Data/portfolioProjects';
 import './Projects.scss';
 
 const Projects: React.FC = () => {

src/Components/data/education.ts

@@ -0,0 +1,16 @@
+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'
+    }
+  ];

src/Components/data/experience.ts

@@ -0,0 +1,37 @@
+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'
+    }
+  ];