added slideshow view to project cards and added dnd project.

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%;