Move ProjectCard to Projects as one entity, Add projectModal feature

src/components/projects/Projects.jsx

@@ -0,0 +1,30 @@
+import React, { useState, useCallback } from "react";
+import ProjectCard from "./projectCard/ProjectCard";
+import ProjectModal from "./projectModal/ProjectModal";
+import styles from "./Projects.module.css";
+
+function Projects({ title, data }) {
+	const [selectedProject, setSelectedProject] = useState(null);
+
+	const openModal = (project) => {
+		setSelectedProject(project);
+	};
+
+	const closeModal = useCallback(() => {
+		setSelectedProject(null);
+	}, []);
+
+	return (
+		<section className={styles.projects}>
+			<h2 className={styles.sectionTitle}>{title}</h2>
+			<div className={styles.projectGrid}>
+				{data.map((project) => (
+					<ProjectCard key={project.id} project={project} onClick={openModal} />
+				))}
+			</div>
+			{selectedProject && <ProjectModal project={selectedProject} onClose={closeModal} />}
+		</section>
+	);
+}
+
+export default Projects;

src/components/projects/Projects.module.css

@@ -0,0 +1,28 @@
+.projects {
+	width: var(--content-width);
+	margin: 0 auto;
+	padding: 50px 0;
+}
+
+.sectionTitle {
+	text-align: left;
+	font-size: 2.5rem;
+	margin-bottom: 30px;
+	color: #333;
+}
+
+.projectGrid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+	gap: 2rem;
+}
+
+@media (max-width: 768px) {
+	.projects {
+		padding: 30px 5%;
+	}
+
+	.projectGrid {
+		grid-template-columns: 1fr;
+	}
+}

src/components/projects/projectCard/ProjectCard.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import styles from "./ProjectCard.module.css";
+
+function ProjectCard({ project, onClick }) {
+	return (
+		<div className={styles.card} onClick={() => onClick(project)}>
+			<div className={styles.imageSlider}>
+				<img src={project.images[0]} alt={`${project.title} - main image`} className={styles.projectImage} />
+			</div>
+			<h3 className={styles.title}>{project.title}</h3>
+			<p className={styles.description}>{project.description}</p>
+		</div>
+	);
+}
+
+export default ProjectCard;

src/components/projects/projectCard/ProjectCard.module.css

@@ -0,0 +1,38 @@
+.card {
+	background-color: #fff;
+	border-radius: 8px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+	overflow: hidden;
+	transition: transform 0.3s ease;
+	cursor: pointer;
+}
+
+.card:hover {
+	transform: translateY(-5px);
+}
+
+.imageSlider {
+	position: relative;
+	height: 200px;
+	overflow: hidden;
+}
+
+.projectImage {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	transition: opacity 0.5s ease;
+}
+
+.title {
+	font-size: 1.2rem;
+	font-weight: bold;
+	margin: 1rem;
+	color: #333;
+}
+
+.description {
+	font-size: 0.9rem;
+	margin: 0 1rem 1rem;
+	color: #666;
+}

src/components/projects/projectModal/ProjectModal.jsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useRef } from "react";
+import styles from "./ProjectModal.module.css";
+
+function ProjectModal({ project, onClose }) {
+	const modalRef = useRef(null);
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			modalRef.current.classList.add(styles.active);
+		}, 10);
+
+		return () => clearTimeout(timer);
+	}, []);
+
+	const handleClose = () => {
+		modalRef.current.classList.remove(styles.active);
+		setTimeout(onClose, 300); // Wait for the animation to finish before closing
+	};
+
+	return (
+		<div className={styles.modalOverlay} onClick={handleClose} ref={modalRef}>
+			<div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
+				<button className={styles.closeButton} onClick={handleClose}>
+					&times;
+				</button>
+				<h2>{project.title}</h2>
+				<div className={styles.imageSlider}>
+					{project.images.map((image, index) => (
+						<img key={index} src={image} alt={`${project.title} - image ${index + 1}`} />
+					))}
+				</div>
+				<p>{project.description}</p>
+				<h3>Technologies Used:</h3>
+				<ul>
+					{project.technologies.map((tech, index) => (
+						<li key={index}>{tech}</li>
+					))}
+				</ul>
+				<h3>Key Features:</h3>
+				<ul>
+					{project.features.map((feature, index) => (
+						<li key={index}>{feature}</li>
+					))}
+				</ul>
+				{project.githubLink && (
+					<a href={project.githubLink} target="_blank" rel="noopener noreferrer">
+						GitHub Repository
+					</a>
+				)}
+				{project.liveLink && (
+					<a href={project.liveLink} target="_blank" rel="noopener noreferrer">
+						Live Demo
+					</a>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default ProjectModal;

src/components/projects/projectModal/ProjectModal.module.css

@@ -0,0 +1,90 @@
+.modalOverlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.7);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 1000;
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.modalOverlay.active {
+	opacity: 1;
+	visibility: visible;
+}
+
+.modalContent {
+	background-color: white;
+	padding: 2rem;
+	border-radius: 8px;
+	max-width: 80%;
+	max-height: 80%;
+	overflow-y: auto;
+	position: relative;
+	transform: scale(0.7);
+	opacity: 0;
+	transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.modalOverlay.active .modalContent {
+	transform: scale(1);
+	opacity: 1;
+}
+
+.closeButton {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	font-size: 1.5rem;
+	background: none;
+	border: none;
+	cursor: pointer;
+}
+
+.imageSlider {
+	display: flex;
+	overflow-x: auto;
+	margin-bottom: 1rem;
+}
+
+.imageSlider img {
+	width: 200px;
+	height: 150px;
+	object-fit: cover;
+	margin-right: 1rem;
+}
+
+.modalContent h2 {
+	margin-bottom: 1rem;
+}
+
+.modalContent p {
+	margin-bottom: 1rem;
+}
+
+.modalContent h3 {
+	margin-top: 1rem;
+	margin-bottom: 0.5rem;
+}
+
+.modalContent ul {
+	margin-bottom: 1rem;
+	padding-left: 1.5rem;
+}
+
+.modalContent a {
+	display: inline-block;
+	margin-right: 1rem;
+	margin-top: 1rem;
+	padding: 0.5rem 1rem;
+	background-color: #007bff;
+	color: white;
+	text-decoration: none;
+	border-radius: 4px;
+}