Move ProjectCard to Projects as one entity, Add projectModal feature

src/App.jsx

@@ -7,6 +7,7 @@ import Hero from "./components/hero/Hero";
 // import Experience from "./components/experience/Experience";
 import InfoSection from "./components/info/InfoSection";
 import Separator from "./components/separater/Separater";
+import Projects from "./components/projects/Projects";
 
 import styles from "./App.module.css";
 
@@ -109,6 +110,20 @@ const experienceData = [
 	},
 ];
 
+const projectsData = [
+	{
+		id: 1,
+		title: "Project 1",
+		images: ["/path/to/project1-image1.jpg", "/path/to/project1-image2.jpg"],
+		description: "A brief description of Project 1.",
+		technologies: ["React", "Node.js", "MongoDB"],
+		features: ["User authentication", "Real-time data updates", "Responsive design"],
+		githubLink: "https://github.com/yourusername/project1",
+		liveLink: "https://project1-demo.com",
+	},
+	// Add more projects...
+];
+
 function App() {
 	return (
 		<div className={styles.app}>
@@ -131,6 +146,7 @@ function App() {
 				<Separator width="70%" thickness="3px" />
 				<InfoSection title="Education" data={educationData} isEducation={true} />
 				<Separator width="70%" thickness="3px" />
+				<Projects title="Projects" data={projectsData} />
 				{/* Add more sections as needed */}
 			</main>
 			<Footer />