added slideshow view to project cards and added dnd project.

src/App.jsx

@@ -37,7 +37,7 @@ export default function App() {
     {
       title: "One AI",
       descriptionA:
-        "An end-to-end self-hosted Artificial Intelligence solution, using Meta's Ollama platform to run Large Language Models. Go was used for the backend as a wrapper API and the frontend is Flutter, for its write once, build anywhere ideology. Here are some of the implemented features:",
+        "An end-to-end self-hosted Artificial Intelligence solution, using Meta's Ollama platform to run Large Language Models. Go was used for the backend as a wrapper API and the frontend is Flutter for its write once, build anywhere ideology. Here are some of the implemented features:",
       featureList: [
         "user authentication",
         "AES encryption",
@@ -45,12 +45,25 @@ export default function App() {
         "file uploads in Base64",
         "dynamic LLM routing",
         "user configuration",
-        "configuration files",
       ],
       image: "/images/one-ai-cropped.png",
       imageGallery: null,
       url: "https://github.com/quaxlyqueen/one-ai",
     },
+    {
+      title: "D&D Character Builder",
+      descriptionA:
+        "A Dungeons and Dragons character builder, following the 5th edition rules and creation process. A collaborative project creating a GUI in Java with Swing. Features include:",
+      featureList: [
+        "serializing data into custom filetype",
+        "image import",
+        "export to PDF",
+        "button hover effects",
+      ],
+      image: "/images/dnd.png",
+      imageGallery: null,
+      url: "https://github.com/quaxlyqueen/dnd",
+    },
   ];
 
   const skillsData = {

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">
+          <Swiper
-            {cardData.map((c) => (
+            modules={[Scrollbar, Mousewheel, Pagination]}
-              <ProjectCard
+            slidesPerView={1}
-                title={c.title}
+            loop={false}
-                descriptionA={c.descriptionA}
+            id="project-cards-section"
-                featureList={c.featureList}
+            className="mySwiper"
-                image={c.image}
+            mousewheel={{
-                imageGallery={c.imageGallery}
+              thresholdDelta: 50,
-                url={c.url}
+              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>
     </>

src/main.css

@@ -32,7 +32,7 @@ body {
     #39124e 61%,
     #170123 100%
   );
-  animation: background-fade 4s linear infinite;
+  animation: background-fade 1s linear infinite;
   animation-direction: alternate;
   background-attachment: fixed;
 }
@@ -95,6 +95,10 @@ h4 {
   justify-content: center;
 }
 
+.mySwiper {
+  height: 100%;
+}
+
 /**ACTIVE PAGE ANIMATIONS**/
 .swiper-slide-active #header,
 .swiper-slide-active #skills-section,
@@ -106,12 +110,14 @@ h4 {
 .swiper-slide-active #header,
 .swiper-slide-active #skills-section,
 .swiper-slide-active #project-section,
-.swiper-slide-active #project-cards-section {
+.swiper-slide-active #project-cards-section,
+.down-indicator {
   animation: moveDown 0.8s ease-in forwards;
 }
 
 .swiper-slide-active #header,
-.swiper-slide-active #project-section {
+.swiper-slide-active #project-section,
+.down-indicator {
   animation-delay: 0.2s;
 }
 
@@ -206,11 +212,6 @@ h4 {
   justify-content: center;
 }
 
-.down-indicator {
-  animation: moveDown 0.8s ease-in forwards;
-  animation-delay: 0.2s;
-}
-
 /**SKILL CARDS**/
 .card {
   align-items: center;
@@ -283,8 +284,9 @@ h4 {
 /**PROJECT CARDS**/
 .project-card {
   display: grid;
-  grid-template-columns: 40% 60%;
+  grid-template-columns: 35% 65%;
   grid-template-rows: 100%;
+  column-gap: 5%;
   overflow: hidden;
   height: 90%;
   width: 100%;
@@ -298,10 +300,13 @@ h4 {
 }
 
 .project-card img {
-  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 18px;
 }
 
 .project-text-column {
+  width: 90%;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -315,7 +320,7 @@ h4 {
   width: 100%;
   height: 100%;
   grid-template-columns: 100%;
-  grid-template-rows: 10% 30% 45% 15%;
+  grid-template-rows: 10% 35% 40% 15%;
 }
 
 .project-text h3 {
@@ -511,7 +516,8 @@ h4 {
   .project-card {
     display: grid;
     grid-template-columns: 100%;
-    grid-template-rows: 40% 60%;
+    grid-template-rows: 35% 55%;
+    row-gap: 10%;
     overflow: hidden;
     height: 100%;
     width: 100%;