Add new component InfoSection to reusability, and replace Education and Experience components

src/components/info/InfoSection.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import styles from "./InfoSection.module.css";
+
+function InfoSection({ title, data }) {
+	return (
+		<section className={styles.infoSection}>
+			<h2 className={styles.sectionTitle}>{title}</h2>
+			{data.map((item, index) => (
+				<div key={index} className={styles.entry}>
+					<div className={styles.logoContainer}>
+						<img src={item.logo} alt={`${item.organization} logo`} className={styles.logo} />
+					</div>
+					<div className={styles.content}>
+						<h3 className={styles.title}>{item.title}</h3>
+						<p className={styles.organizationInfo}>
+							{item.organization} | {item.location} | {item.duration}
+						</p>
+						<p className={styles.description}>{item.description}</p>
+						<div className={styles.additionalInfo}>
+							<div className={styles.skillSection}>
+								<h4>{item.skillsTitle || "Skills Gained"}:</h4>
+								<ul>
+									{item.skills.map((skill, i) => (
+										<li key={i}>{skill}</li>
+									))}
+								</ul>
+							</div>
+							<div className={styles.skillSection}>
+								<h4>{item.techStackTitle || "Tech Stack"}:</h4>
+								<ul>
+									{item.techStack.map((tech, i) => (
+										<li key={i}>{tech}</li>
+									))}
+								</ul>
+							</div>
+						</div>
+					</div>
+				</div>
+			))}
+		</section>
+	);
+}
+
+export default InfoSection;

src/components/info/InfoSection.module.css

@@ -0,0 +1,110 @@
+.infoSection {
+	width: var(--content-width);
+	margin: 0 auto;
+	padding: 50px 0;
+	background-color: #ffffff;
+}
+
+.sectionTitle {
+	text-align: left;
+	font-size: 2.5rem;
+	margin-bottom: 30px;
+	color: #333;
+}
+
+.entry {
+	display: flex;
+	position: relative;
+	margin-bottom: 40px;
+	padding-left: 20px;
+	border-left: 2px solid var(--accent-color);
+}
+
+.logoContainer {
+	flex: 0 0 80px;
+	margin-right: 20px;
+}
+
+.logo {
+	width: 100%;
+	height: auto;
+	object-fit: contain;
+}
+
+.content {
+	flex: 1;
+}
+
+.title {
+	font-size: 1.4rem;
+	font-weight: bold;
+	color: var(--accent-color);
+	margin-bottom: 5px;
+}
+
+.organizationInfo {
+	font-size: 1.1rem;
+	margin-bottom: 10px;
+	color: #333;
+}
+
+.description {
+	font-size: 1rem;
+	line-height: 1.6;
+	color: #333;
+	margin-bottom: 15px;
+}
+
+.additionalInfo {
+	display: flex;
+	gap: 2%;
+}
+
+.skillSection {
+	flex: 1;
+}
+
+.skillSection h4 {
+	font-size: 1rem;
+	color: #333;
+	margin-bottom: 5px;
+}
+
+.skillSection ul {
+	padding-left: 0;
+	margin: 0;
+	list-style-type: none;
+}
+
+.skillSection li {
+	font-size: 0.9rem;
+	display: inline-block;
+	background-color: #f0f0f0;
+	padding: 2px 8px;
+	border-radius: 12px;
+	margin-right: 5px;
+	margin-bottom: 5px;
+}
+
+@media (max-width: 768px) {
+	.infoSection {
+		padding: 30px 5%;
+	}
+
+	.entry {
+		flex-direction: column;
+	}
+
+	.logoContainer {
+		margin-bottom: 15px;
+	}
+
+	.content {
+		padding-left: 0;
+	}
+
+	.additionalInfo {
+		flex-direction: column;
+		gap: 15px;
+	}
+}