added slideshow view to project cards and added dnd project.

src/Projects.jsx

@@ -1,5 +1,9 @@
 import React from "react";
 import ProjectCard from "./components/ProjectCard";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Mousewheel, Scrollbar, Pagination } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/effect-cards";
 
 export default function Projects({ cardData }) {
   return (
@@ -7,18 +11,31 @@ export default function Projects({ cardData }) {
       <div id="project-section">
         <div id="project-grid-container">
           <h1>Projects</h1>
-          <div id="project-cards-section">
-            {cardData.map((c) => (
-              <ProjectCard
-                title={c.title}
-                descriptionA={c.descriptionA}
-                featureList={c.featureList}
-                image={c.image}
-                imageGallery={c.imageGallery}
-                url={c.url}
-              />
+          <Swiper
+            modules={[Scrollbar, Mousewheel, Pagination]}
+            slidesPerView={1}
+            loop={false}
+            id="project-cards-section"
+            className="mySwiper"
+            mousewheel={{
+              thresholdDelta: 50,
+              sensitivity: 1,
+            }}
+            scrollbar={{ hide: false }}
+          >
+            {cardData.map((c, index) => (
+              <SwiperSlide key={index}>
+                <ProjectCard
+                  title={c.title}
+                  descriptionA={c.descriptionA}
+                  featureList={c.featureList}
+                  image={c.image}
+                  imageGallery={c.imageGallery}
+                  url={c.url}
+                />
+              </SwiperSlide>
             ))}
-          </div>
+          </Swiper>
         </div>
       </div>
     </>