Add experience section, and also created a folder for logo of companies

src/App.jsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import React from "react";
 
-import Header from './components/header/Header';
+import Header from "./components/header/Header";
-import Footer from './components/footer/Footer';
+import Footer from "./components/footer/Footer";
-import Hero from './components/hero/Hero';
+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 styles from './App.module.css';
+import styles from "./App.module.css";
 
 function App() {
 	return (
@@ -13,7 +14,7 @@ function App() {
 			<Header />
 			<main className={styles.main}>
 				<Hero />
-        <section className={styles.section} style={{backgroundColor: '#333', color: '#fff'}}>
+				<section className={styles.section} style={{ backgroundColor: "#333", color: "#fff" }}>
 					<div className={styles.content}>
 						<h1>Welcome to My Portfolio</h1>
 						<p>This is where you'll add your portfolio content.</p>
@@ -25,6 +26,7 @@ function App() {
             <p>This section has a different background color.</p>
           </div>
         </section> */}
+				<Experience />
 				<Education />
 				{/* Add more sections as needed */}
 			</main>

src/components/experience/Experience.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import styles from "./Experience.module.css";
+
+const experienceData = [
+	{
+		title: "SOFTWARE DEVELOPMENT ENGINEER",
+		company: "Amazon",
+		logo: "/amazon.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 experiences as needed
+];
+
+function Experience() {
+	return (
+		<section className={styles.experience}>
+			<h2 className={styles.sectionTitle}>Experience</h2>
+			{experienceData.map((exp, index) => (
+				<div key={index} className={styles.entry}>
+					<div className={styles.logoContainer}>
+						<img src={exp.logo} alt={`${exp.company} logo`} className={styles.logo} />
+					</div>
+					<div className={styles.content}>
+						<h3 className={styles.title}>{exp.title}</h3>
+						<p className={styles.companyInfo}>
+							{exp.company} | {exp.location} | {exp.duration}
+						</p>
+						<p className={styles.description}>{exp.description}</p>
+						<div className={styles.additionalInfo}>
+							<div className={styles.infoSection}>
+								<h4>Skills Gained:</h4>
+								<ul>
+									{exp.skills.map((skill, i) => (
+										<li key={i}>{skill}</li>
+									))}
+								</ul>
+							</div>
+							<div className={styles.infoSection}>
+								<h4>Tech Stack:</h4>
+								<ul>
+									{exp.techStack.map((tech, i) => (
+										<li key={i}>{tech}</li>
+									))}
+								</ul>
+							</div>
+						</div>
+					</div>
+				</div>
+			))}
+		</section>
+	);
+}
+
+export default Experience;

src/components/experience/Experience.module.css

@@ -0,0 +1,113 @@
+:root {
+	--accent-color: #ff6b00;
+}
+
+.experience {
+	padding: 50px 10%;
+	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;
+}
+
+.companyInfo {
+	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: 20px;
+}
+
+.infoSection {
+	flex: 1;
+}
+
+.infoSection h4 {
+	font-size: 1rem;
+	color: #333;
+	margin-bottom: 5px;
+}
+
+.infoSection ul {
+	padding-left: 20px;
+	margin: 0;
+	list-style-type: none;
+}
+
+.infoSection li {
+	font-size: 0.9rem;
+	margin-bottom: 3px;
+	display: inline-block;
+	background-color: #f0f0f0;
+	padding: 2px 8px;
+	border-radius: 12px;
+	margin-right: 5px;
+	margin-bottom: 5px;
+}
+
+@media (max-width: 768px) {
+	.experience {
+		padding: 30px 5%;
+	}
+
+	.entry {
+		flex-direction: column;
+	}
+
+	.logoContainer {
+		margin-bottom: 15px;
+	}
+
+	.content {
+		padding-left: 0;
+	}
+
+	.additionalInfo {
+		flex-direction: column;
+		gap: 15px;
+	}
+}