Merge pull request #79 from carsonSgit/experience-section

chore: Tweak Experience section for mobile display

Author: carsonSgit

src/Components/Data/education.ts

@@ -6,6 +6,7 @@ export const education = [
     description:
       'Continuing my education exploring the world of economics and finance to bridge the gap between tech and business.',
     statsKey: 'Economics',
+    link: 'https://www.concordia.ca/'
   },
   {
     date: 'August 2021 - May 2024',
@@ -14,5 +15,6 @@ export const education = [
     description:
       'Graduated with a focus on software/app/mobile development, including programming and IoT.',
     statsKey: 'Academics',
+    link: 'https://www.johnabbott.qc.ca/'
   },
 ];

src/Components/Data/experience.ts

@@ -5,6 +5,7 @@ export const experience = [
     company: "Tail'ed",
     description: 'Building the company website & developing an AI product.',
     statsKey: 'SDE Intern',
+    link: 'https://tailed.ca/en'
   },
   {
     date: 'March 2024 - Ongoing',
@@ -13,6 +14,7 @@ export const experience = [
     description:
       'Leading the delegation of post-secondary students across Montreal for the annual conference.',
     statsKey: 'Head Delegate Montreal',
+    link: 'https://2024.cusec.net/'
   },
   {
     date: 'January 2024 - May 2024',
@@ -21,6 +23,7 @@ export const experience = [
     description:
       'Delivered technical support to government employees and trained under the Cybersecurity Lead of the municipality.',
     statsKey: 'IT Intern',
+    link: 'https://www.ville.kirkland.qc.ca/'
   },
   {
     date: 'March 2024 - July 2024',
@@ -29,6 +32,7 @@ export const experience = [
     description:
       'Led the organization of the hackathon, overseeing event planning and execution.',
     statsKey: 'Director',
+    link: 'https://jachacks.pages.dev/'
   },
   {
     date: 'February 2024 - April 2024',
@@ -37,5 +41,6 @@ export const experience = [
     description:
       'Learned under PhDs while developing TradeMind for my fellowship project.',
     statsKey: 'R&D Fellowship',
+    link: 'https://launchlab.ai/rd-program/'
   },
 ];

src/Components/Experience/ExperienceTimeline.scss

@@ -46,15 +46,20 @@ $tools-item-tint: darken($list-item-color, 40%);
         gap: 0.5rem;
         list-style-type: none;
         padding: 0;
+        margin: 0 auto;
+        max-width: 600px;
+        width: 100%;
 
         li {
           display: flex;
           align-items: center;
+          justify-content: center;
           color: darken(white, 5%);
           padding: 1rem;
           font-weight: 500;
           font-size: 1.1rem;
           border-radius: $border-radius;
+          transition: transform 0.3s ease, background-color 0.3s ease;
 
           svg {
             margin-right: 0.5rem;
@@ -63,10 +68,19 @@ $tools-item-tint: darken($list-item-color, 40%);
         }
 
         li:hover {
-          background-color: darken($background-color, 15%);
+          background-color: darken($background-color, 8%);
           transform: scale(1.05);
         }
       }
+
+      @media (max-width: 768px) {
+        .TechList {
+          grid-template-columns: repeat(2, 1fr);
+          gap: 0.5rem;
+          margin: 0 auto;
+          max-width: 100%;
+        }
+      }
     }
   }
 }
@@ -75,14 +89,6 @@ $tools-item-tint: darken($list-item-color, 40%);
   .experience-grid {
     grid-template-columns: 1fr;
     gap: 0em;
-
-    .category-containers {
-      .CategoryContainer {
-        .TechList {
-          grid-template-columns: repeat(2, 1fr);
-        }
-      }
-    }
   }
 }
 

src/Components/Experience/ExperienceTimeline.tsx

@@ -84,7 +84,9 @@ const ExperienceTimeline = () => {
               <div className="timeline-content">
                 <h3>
                   {item.title} <span className="timeline-atsign">@ </span>
-                  <span className="timeline-institution">{item.institution}</span>
+                  <a href={item.link} target="_blank" rel="noopener noreferrer" className="timeline-institution">
+                    {item.institution}
+                  </a>
                 </h3>
                 <div className="timeline-date">{item.date}</div>
                 <p>{item.description}</p>
@@ -117,8 +119,10 @@ 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>
+                  <a href={item.link} target="_blank" rel="noopener noreferrer">
+                    {item.title} <span className="timeline-atsign">@ </span>
+                    <span className="timeline-company">{item.company}</span>
+                  </a>
                 </h3>
                 <div className="timeline-date">{item.date}</div>
                 <p>{item.description}</p>