Update InfoSection to sort experiences by newest

src/App.jsx

@@ -6,31 +6,66 @@ import Hero from "./components/hero/Hero";
 // import Education from "./components/education/Education";
 // import Experience from "./components/experience/Experience";
 import InfoSection from "./components/info/InfoSection";
+import Separator from "./components/separater/Separater";
 
 import styles from "./App.module.css";
 
 // Temp data
 const educationData = [
 	{
+		id: 1,
 		title: "BACHELOR OF COMPUTER ENGINEERING",
 		organization: "University of Guelph",
-		logo: "/university-logo.png",
+		logo: "/logos/uog.png", // Add the actual path to the university logo
-		location: "Guelph, ON",
+		location: "Guelph, ON", // Add the location if available
 		duration: "2018 - 2023",
-		description: "Completed a comprehensive program in Computer Engineering, focusing on both hardware and software aspects of computing systems.",
+		description:
-		skills: ["Problem Solving", "Critical Thinking", "Team Collaboration", "Technical Writing"],
+			"As a graduate in Computer Engineering, my expertise encompasses a wide range of skills essential for modern computing systems. This includes circuit design and development, hardware integration, and system-level design integration. I am well-versed in the science and tools required for designing, constructing, implementing, and maintaining both software and hardware components in computing systems.",
-		techStack: ["C++", "Java", "Python", "VHDL", "MATLAB"],
+		achievements: ["Dean's Honor List for 2 consecutive years", "Engineering Design Winner: Portable UTI Diagnosis"],
+		skills: ["Circuit design and development", "Hardware integration", "System-level design integration", "Software and hardware component maintenance"],
+		techStack: ["Data Structures and Algorithms", "Computer Networks", "Operating Systems", "Digital Systems Design", "Embedded Systems Programming", "Modeling Complex Systems"],
 		skillsTitle: "Key Skills",
-		techStackTitle: "Core Technologies",
+		techStackTitle: "Relevant Courses",
+	},
+	{
+		id: 2, // This will be displayed after the Masters degree
+		title: "BACHELOR OF COMPUTER SCIENCE",
+		organization: "University of Guelph",
+		logo: "/logos/uog.png",
+		location: "Guelph, ON",
+		duration: "2020 - 2023",
+		description:
+			"As a graduate in Computer Science, the journey emphasizes mathematical principles, systems development, programming, and in-depth algorithm design and analysis. With a curriculum that spans topics like databases, data structures, and full-stack development. Additionally, my educational background covers essential aspects such as cybersecurity, networking, and other crucial disciplines.",
+		skills: ["Mathematical principles", "Systems development", "Programming", "Algorithm design and analysis", "Full-stack development", "Networking"],
+		techStack: ["Databases", "Data Structures", "Algorithms", "Web Development", "Computer Networks"],
+		achievements: [
+			// Add any specific achievements, awards, or notable projects here
+		],
+		skillsTitle: "Key Skills",
+		techStackTitle: "Core Areas",
+	},
+	{
+		id: 3,
+		title: "MASTERS OF COMPUTER ENGINEERING",
+		organization: "University of Guelph",
+		logo: "/logos/uog.png", // Add the actual path to the university logo
+		location: "Guelph, ON", // Add the location if available
+		duration: "2023 - 2024",
+		description: "Pursuing advanced studies in Computer Engineering with a focus on AI systems and machine learning applications.",
+		achievements: ["Published on 'Boosting Edge-to-Cloud Data Transmission Efficiency with Semantic Transcoding' in IEEE CCECE 2024 Conference"],
+		skills: ["Advanced AI systems design", "Machine learning model development", "Computer vision techniques", "Deep learning architectures"],
+		techStack: ["Software Architecture in AI systems", "Machine Vision", "Deep Learning", "Artificial Intelligence"],
+		skillsTitle: "Key Skills",
+		techStackTitle: "Relevant Courses",
 	},
-	// Add more education entries as needed
 ];
 
 const experienceData = [
 	{
+		id: 1,
 		title: "SOFTWARE DEVELOPMENT ENGINEER",
 		organization: "Amazon",
-		logo: "/amazon-logo.png",
+		logo: "/logos/amazon.png",
 		location: "Vancouver, BC",
 		duration: "June 2022 - September 2022",
 		description:
@@ -59,8 +94,9 @@ function App() {
             <p>This section has a different background color.</p>
           </div>
         </section> */}
-				<InfoSection title="Education" data={educationData} />
+				<InfoSection title="Education" data={educationData} isEducation={true} />
-				<InfoSection title="Experience" data={experienceData} />
+				<Separator width="70%" thickness="3px" />
+				<InfoSection title="Experience" data={experienceData} isEducation={false} />
 				{/* Add more sections as needed */}
 			</main>
 			<Footer />

src/components/info/InfoSection.jsx

@@ -1,12 +1,15 @@
 import React from "react";
 import styles from "./InfoSection.module.css";
 
-function InfoSection({ title, data }) {
+function InfoSection({ title, data, isEducation }) {
+	// Sort the data array based on ID in descending order (newest first)
+	const sortedData = [...data].sort((a, b) => b.id - a.id);
+
 	return (
 		<section className={styles.infoSection}>
 			<h2 className={styles.sectionTitle}>{title}</h2>
-			{data.map((item, index) => (
+			{sortedData.map((item) => (
-				<div key={index} className={styles.entry}>
+				<div key={item.id} className={styles.entry}>
 					<div className={styles.logoContainer}>
 						<img src={item.logo} alt={`${item.organization} logo`} className={styles.logo} />
 					</div>
@@ -17,6 +20,16 @@ function InfoSection({ title, data }) {
 						</p>
 						<p className={styles.description}>{item.description}</p>
 						<div className={styles.additionalInfo}>
+							{isEducation && item.achievements && item.achievements.length > 0 && (
+								<div className={styles.skillSection}>
+									<h4>Achievements:</h4>
+									<ul>
+										{item.achievements.map((achievement, i) => (
+											<li key={i}>{achievement}</li>
+										))}
+									</ul>
+								</div>
+							)}
 							<div className={styles.skillSection}>
 								<h4>{item.skillsTitle || "Skills Gained"}:</h4>
 								<ul>

src/components/info/InfoSection.module.css

@@ -57,11 +57,14 @@
 
 .additionalInfo {
 	display: flex;
+	flex-wrap: wrap;
 	gap: 2%;
 }
 
 .skillSection {
-	flex: 1;
+	flex: 1 1 30%; /* This allows for 3 columns with some flexibility */
+	min-width: 200px; /* Ensures readability on smaller screens */
+	margin-bottom: 15px;
 }
 
 .skillSection h4 {
@@ -107,4 +110,8 @@
 		flex-direction: column;
 		gap: 15px;
 	}
+
+	.skillSection {
+		flex: 1 1 100%;
+	}
 }