Update InfoSection to sort experiences by newest

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) => (
-				<div key={index} className={styles.entry}>
+			{sortedData.map((item) => (
+				<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%;
+	}
 }