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

src/App.jsx

@@ -1,36 +1,38 @@
-import React from 'react';
+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 Header from "./components/header/Header";
+import Footer from "./components/footer/Footer";
+import Hero from "./components/hero/Hero";
+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 (
-    <div className={styles.app}>
-      <Header />
-      <main className={styles.main}>
-        <Hero />
-        <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>
-          </div>
-        </section>
-        {/* <section className={styles.section} style={{backgroundColor: '#f0f0f0'}}>
+	return (
+		<div className={styles.app}>
+			<Header />
+			<main className={styles.main}>
+				<Hero />
+				<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>
+					</div>
+				</section>
+				{/* <section className={styles.section} style={{backgroundColor: '#f0f0f0'}}>
           <div className={styles.content}>
             <h2>Another Section</h2>
             <p>This section has a different background color.</p>
           </div>
         </section> */}
-        <Education />
-        {/* Add more sections as needed */}
-      </main>
-      <Footer />
-    </div>
-  );
+				<Experience />
+				<Education />
+				{/* Add more sections as needed */}
+			</main>
+			<Footer />
+		</div>
+	);
 }
 
-export default App;
+export default App;

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