v0.11.7 Create new directory for reusable components, and created new component, ResumeDownloader

src/shared/components/info/InfoSection.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+import styles from "./InfoSection.module.css";
+
+function InfoSection({ title, data, isEducation }) {
+	const sortedData = [...data].sort((a, b) => b.id - a.id);
+
+	return (
+		<section className={styles.infoSection}>
+			<h2 className={styles.sectionTitle}>{title}</h2>
+			{sortedData.map((item) => (
+				<div key={item.id} className={styles.entry}>
+					<div className={styles.headerSection}>
+						<div className={styles.logoContainer}>
+							<img src={item.logo} alt={`${item.organization} logo`} className={styles.logo} />
+						</div>
+						<div className={styles.titleSection}>
+							<h3 className={styles.title}>{item.title}</h3>
+							<p className={styles.organizationInfo}>
+								{item.organization} | {item.location} | {item.duration}
+							</p>
+						</div>
+					</div>
+					<div className={styles.content}>
+						<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>
+									{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/shared/components/info/InfoSection.module.css

@@ -0,0 +1,128 @@
+.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 {
+	position: relative;
+	margin-bottom: 40px;
+	padding-left: 20px;
+	border-left: 2px solid var(--accent-color);
+}
+
+.headerSection {
+	display: flex;
+	align-items: center;
+	margin-bottom: 15px;
+}
+
+.logoContainer {
+	flex: 0 0 auto;
+	margin-right: 20px;
+	height: 60px; /* Adjust this value to match your desired logo height */
+	width: 60px; /* Adjust this value to maintain aspect ratio */
+}
+
+.logo {
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
+.titleSection {
+	flex: 1;
+}
+
+.title {
+	font-size: 1.4rem;
+	font-weight: bold;
+	color: var(--accent-color);
+	margin-bottom: 5px;
+}
+
+.organizationInfo {
+	font-size: 1.1rem;
+	color: #333;
+}
+
+.content {
+	margin-left: 80px; /* This should match the logoContainer width + its right margin */
+}
+
+.description {
+	font-size: 1rem;
+	line-height: 1.6;
+	color: #333;
+	margin-bottom: 15px;
+}
+
+.additionalInfo {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 2%;
+}
+
+.skillSection {
+	flex: 1 1 30%;
+	min-width: 200px;
+	margin-bottom: 15px;
+}
+
+.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%;
+	}
+
+	.headerSection {
+		flex-direction: row;
+		align-items: flex-start;
+	}
+
+	.logoContainer {
+		margin-right: 15px;
+	}
+
+	.content {
+		margin-left: 0;
+	}
+
+	.additionalInfo {
+		flex-direction: column;
+		gap: 15px;
+	}
+
+	.skillSection {
+		flex: 1 1 100%;
+	}
+}

src/shared/components/resumeDownloader/ResumeDownloader.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import styles from "./ResumeDownloader.module.css";
+
+const ResumeDownload = ({ resumeLink }) => {
+	const handleDownload = (e) => {
+		e.preventDefault();
+
+		const link = document.createElement("a");
+		link.href = resumeLink;
+		console.log(link.href);
+		link.download = "Murtadha.pdf";
+		link.target = "_blank";
+		link.rel = "noopener noreferrer";
+
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	};
+
+	return (
+		<button onClick={handleDownload} className={styles.button}>
+			Download Resume (PDF)
+		</button>
+	);
+};
+
+export default ResumeDownload;

src/shared/components/resumeDownloader/ResumeDownloader.module.css

@@ -0,0 +1,29 @@
+.button {
+	color: #fff;
+	text-decoration: none;
+	padding: 12px 24px;
+	border: 2px solid #ff6600;
+	border-radius: 5px;
+	transition: background-color 0.3s ease, color 0.3s ease;
+	display: inline-block;
+	font-size: 1rem;
+	font-weight: bold;
+	text-align: center;
+	min-width: 180px;
+	line-height: 1.5;
+	cursor: pointer;
+	background-color: transparent;
+}
+
+.button:hover {
+	background-color: #ff6600;
+	color: #fff;
+}
+
+@media (max-width: 768px) {
+	.button {
+		width: 100%;
+		max-width: 250px;
+		margin: 10px 0;
+	}
+}