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

src/App.jsx

@@ -3,11 +3,44 @@ import React from "react";
 import Header from "./components/header/Header";
 import Footer from "./components/footer/Footer";
 import Hero from "./components/hero/Hero";
-import Education from "./components/education/Education";
+// import Education from "./components/education/Education";
-import Experience from "./components/experience/Experience";
+// import Experience from "./components/experience/Experience";
+import InfoSection from "./components/info/InfoSection";
 
 import styles from "./App.module.css";
 
+// Temp data
+const educationData = [
+	{
+		title: "BACHELOR OF COMPUTER ENGINEERING",
+		organization: "University of Guelph",
+		logo: "/university-logo.png",
+		location: "Guelph, ON",
+		duration: "2018 - 2023",
+		description: "Completed a comprehensive program in Computer Engineering, focusing on both hardware and software aspects of computing systems.",
+		skills: ["Problem Solving", "Critical Thinking", "Team Collaboration", "Technical Writing"],
+		techStack: ["C++", "Java", "Python", "VHDL", "MATLAB"],
+		skillsTitle: "Key Skills",
+		techStackTitle: "Core Technologies",
+	},
+	// Add more education entries as needed
+];
+
+const experienceData = [
+	{
+		title: "SOFTWARE DEVELOPMENT ENGINEER",
+		organization: "Amazon",
+		logo: "/amazon-logo.png",
+		location: "Vancouver, BC",
+		duration: "June 2022 - September 2022",
+		description:
+			"Conducted a thorough investigation, proposing solutions to streamline the resolution of manual conflicts for on-call teams. I then designed and developed a comprehensive full-stack solution to automate their workflow, which I presented to upper management as the ideal dashboard solution for on-call operations. To ensure its effectiveness, I conducted rigorous end-to-end testing and maintained the feature for ongoing success.",
+		skills: ["Full-stack development", "Workflow automation", "End-to-end testing", "Project management"],
+		techStack: ["React", "Node.js", "AWS Lambda", "DynamoDB", "Jest"],
+	},
+	// Add more experience entries as needed
+];
+
 function App() {
 	return (
 		<div className={styles.app}>
@@ -26,8 +59,8 @@ function App() {
             <p>This section has a different background color.</p>
           </div>
         </section> */}
-				<Experience />
+				<InfoSection title="Education" data={educationData} />
-				<Education />
+				<InfoSection title="Experience" data={experienceData} />
 				{/* Add more sections as needed */}
 			</main>
 			<Footer />

src/App.module.css

@@ -1,37 +1,47 @@
 .app {
-  display: flex;
+	display: flex;
-  flex-direction: column;
+	flex-direction: column;
-  min-height: 100vh;
+	min-height: 100vh;
 }
 
 .main {
-  flex: 1;
+	flex: 1;
-  display: flex;
+	display: flex;
-  flex-direction: column;
+	flex-direction: column;
-  padding-top: 60px; /* Adjust based on your header height */
+	padding-top: 60px; /* Adjust based on your header height */
 }
 
 .section {
-  width: 100%;
+	width: 100%;
-  display: flex;
+	display: flex;
-  justify-content: center;
+	justify-content: center;
-  padding: 40px 0;
+	padding: 40px 0;
 }
 
 .content {
-  width: 75%;
+	width: 75%;
-  max-width: 1200px;
+	max-width: 1200px;
 }
 
 /* Global styles */
 body {
-  margin: 0;
+	margin: 0;
-  padding: 0;
+	padding: 0;
-  font-family: Arial, sans-serif;
+	font-family: Arial, sans-serif;
-  line-height: 1.6;
+	line-height: 1.6;
-  color: #333;
+	color: #333;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
-  margin-top: 0;
+h2,
-}
+h3,
+h4,
+h5,
+h6 {
+	margin-top: 0;
+}
+
+:root {
+	--content-width: 75%;
+	--accent-color: #ff6b00;
+}

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;
+	}
+}