Feat: added gallery carousel to events

gdcmec · Sep 8, 2024 · efc2976 · efc2976
1 parent cb1f1a8
commit efc2976
Show file tree

Hide file tree

Showing 8 changed files with 339 additions and 88 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,8 @@
     "react-router-dom": "^6.10.0",
     "react-router-hash-link": "^2.4.3",
     "react-scroll": "^1.9.0",
+    "react-swiper": "^0.1.5",
+    "swiper": "^11.1.12",
     "tailwindcss": "^3.2.7",
     "three": "^0.153.0"
   },

diff --git a/src/App.css b/src/App.css
@@ -16,6 +16,9 @@
   background-image: url(./assets/events-bg.jpg);
   background-size: cover;
   background-repeat: no-repeat;
+  min-height: 100vh;
+  max-height: fit-content;
+  height: fit-content;
 }
 
 #team{

diff --git a/src/components/CardContainer/CardContainer.jsx b/src/components/CardContainer/CardContainer.jsx
@@ -131,6 +131,8 @@ const CardContainer = () => {
             </p>
           )}
         </div>
+
+
       )}
     </>
   );

diff --git a/src/components/CardContainer/eventDetails.js b/src/components/CardContainer/eventDetails.js
@@ -14,7 +14,7 @@ const eventDetails = {
       venuep2: 'PROJECT LAB',
       date: '11/09/24',
       detail: ' Hosted by CODEC , the Department Association of Computer Science and Engineering, in collaboration with the Game Development Club of ICET. Learn Godot Engine and dive into the world of game development!',
-      image: 'https://rare-gallery.com/thumbnail/394521-valorant-game-agents-hero-4k-pc-wallpaper.jpg',
+      image: 'https://i.imgur.com/P5SZOEO.jpeg',
       status: 'REGISTER',
       link: 'https://airtable.com/appJ3s5rLsvkbclNC/pagDVMIfVcog8C8qH/form',
     },

diff --git a/src/components/CardContainer/pastEvents.js b/src/components/CardContainer/pastEvents.js
@@ -1,33 +1,24 @@
 const pastEvents = {
   'MEC': [
-    {
-      title: 'Unity Workshop',
-      college: 'MEC',
-      venuep1: 'CCF',
-      venuep2: 'HALL',
-      date: '12/07/22',
-      detail:
-        'We host a variety of events, including seminars, game jams, competitions, and guest lectures to promote learning and creativity. The club also provides chances to promote and publish games, connect with other game makers, and learn useful industry insights',
-      image: 'https://rare-gallery.com/thumbnail/394521-valorant-game-agents-hero-4k-pc-wallpaper.jpg',
-      status: 'View Report',
-    },
-    {
-      title: 'Game Jam',
-      college: 'MEC',
-      venuep1: 'SDPK',
-      venuep2: 'LAB',
-      date: '20/07/22',
-      detail: 'A competition where participants had to create a game prototype in a short period of time.',
-      image: 'https://rare-gallery.com/thumbnail/394522-gaming-game-jam.jpg',
-      status: 'View Report',
-    },
+
   ],
 
   'MES Engineering College': [
 
   ],
-  'Illahia College of Engineering': [
 
+  'Illahia College of Engineering': [
+    {
+      title: 'GDC Annual Fest',
+      college: 'Illahia Engineering College',
+      venuep1: 'Seminar Hall, ',
+      venuep2: 'Auditorium',
+      date: '14/02/24',
+      detail: 'GDC ICET has conducted "GDC ANNUAL FEST", on 14/02/2024 at 9.30 am, in collaboration with AKEF all Kerala eSports Federation. The GDC EXECOM members from other Six colleges participated in this event. The program started parallelly at Seminar Hall & Auditorium, Administrative Block with Introduction to GDC and One Day One Game (AR) Workshop respectively.',
+      image: 'https://rare-gallery.com/thumbnail/394521-valorant-game-agents-hero-4k-pc-wallpaper.jpg',
+      status: 'View Gallery',
+      images: ['https://i.imgur.com/nBbyTm9.jpeg', 'https://i.imgur.com/Il7RMlx.jpeg', 'https://i.imgur.com/07duVjc.jpeg', 'https://i.imgur.com/jaoaKFq.jpeg', 'https://i.imgur.com/q6JzWfi.jpeg', 'https://i.imgur.com/EKBuMVq.jpeg', 'https://i.imgur.com/XKQvqcP.jpeg', 'https://i.imgur.com/YNDoR69.jpeg', 'https://i.imgur.com/E9MjR22.jpeg']
+    }
   ],
   'Adi Shankara Institute of Engineering and Technology': [
 
@@ -38,10 +29,23 @@ const pastEvents = {
       college: 'Mar Athanasius College of Engineering',
       venuep1: 'MAIN',
       venuep2: 'HALL',
-      date: '14/07/22',
+      date: '08/04/24',
       detail: 'The Game Development Club (GDC) held an introductory session to welcome new members and provide an overview of game design, development, and programming. The session covered key aspects like game art, storytelling, and coding, and highlighted past projects to inspire participants to explore game creation and innovation.',
       image: 'https://rare-gallery.com/thumbnail/394521-valorant-game-agents-hero-4k-pc-wallpaper.jpg',
-      status: 'View Report',
+      status: 'View Gallery',
+      images: ['https://i.imgur.com/avwYElR.jpeg', 'https://i.imgur.com/NkxDG9H.jpeg', 'https://i.imgur.com/ITGOJQc.jpeg', 'https://i.imgur.com/NPJR18b.jpeg']
+    },
+
+    {
+      title: '3 Day Workshop',
+      college: 'Mar Athanasius College of Engineering',
+      venuep1: 'Online',
+      venuep2: '',
+      date: 'May 5,6,7 /2024',
+      detail: 'A comprehensive 3-day workshop was conducted, with each session lasting 2 hours. Mr. Mohammed Shijin K, and Mr Abijith, members of the GDC Executive Committee, facilitated the workshop.Participants engaged in an in-depth exploration of Unity Engine features, such as game physics, animations, and scripting.',
+      image: 'https://i.imgur.com/INYVCIO.jpeg',
+      status: 'View Gallery',
+      images: []
     },
   ],
   'LBS Institute of Technology': [
@@ -57,26 +61,7 @@ const pastEvents = {
 
   ],
   'Rajadhani Institute of Science & Technology': [
-   /* {
-      title: 'VR Seminar',
-      college: 'Rajadhani Institute of Science & Technology',
-      venuep1: 'MAIN',
-      venuep2: 'HALL',
-      date: '14/07/22',
-      detail: 'Seminar on the future of virtual reality and its applications in gaming.',
-      image: 'https://rare-gallery.com/thumbnail/394523-vr-gaming.jpg',
-      status: 'View Report',
-    },
-    {
-      title: 'AI in Games Workshop',
-      college: 'Rajadhani Institute of Science & Technology',
-      venuep1: 'LAB',
-      venuep2: '3',
-      date: '18/07/22',
-      detail: 'A hands-on workshop on implementing AI for NPC behavior in games.',
-      image: 'https://rare-gallery.com/thumbnail/394524-ai-gaming.jpg',
-      status: 'View Report',
-    },*/
+
   ],
 };
 

diff --git a/src/components/ValoCard/ValoCard.css b/src/components/ValoCard/ValoCard.css
@@ -147,7 +147,7 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 3rem;
+    gap: 2rem;
     padding: 20px;
     overflow-y: auto; /* Enable vertical scrolling */
     width: 100%; /* Ensure the element takes full width */
@@ -159,7 +159,8 @@ body {
 .card-footer p{
   color: #000;
   text-align: justify;
-  font-size: 15px;
+  font-size: 14px;
+  margin-top: -25px;
 
 }
 
@@ -339,9 +340,136 @@ body {
   --button-bits-color-hover: #ece8e1;
 }
 
+.galleryOverlay{
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+  background-color: #00000088;
+  z-index: 10;
+  top: 0;
+  left: 0;
+}
+
+.galleryContainer{
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 75%;
+  width: 80%;
+  background-color: #000;
+  border: 1px solid gold;
+  border-radius: 20px;
+  z-index: 11;
+  color: #fff;
+  padding-top: 20px;
+}
+
+.galleryContainer h1{
+  font-family: 'valorant';
+  font-size: 2rem;
+}
+
+
+.close-btn{
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  font-size: 2rem;
+  cursor: pointer;
+}
+
+
+.mySwiper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.mySwiper img {
+
+  width: 70%;
+  height: auto; 
+  max-height: 100%;
+  object-fit: contain; 
+  display: block;
+  margin: 0 auto; 
+  padding: 20px;
+  user-select: none;
+  padding-bottom: 35px;
+}
+
+.mySwiper .swiper-pagination-bullet {
+  background: gold; 
+}
+
+.swiper-button-next, .swiper-button-prev {
+  color: #3bcf16;
+  height: 40px; 
+  width: 40px; 
+  z-index: 12;
+  top: 50%; 
+  transform: translateY(-50%);
+  border-radius: 50%;
+}
+
+.swiper-button-prev {
+  left: 10px; 
+}
+
+.swiper-button-next {
+  right: 10px; 
+}
+
 
 @media (max-width: 700px) {
   .cardclass{
     scale: 0.8;
   }
+
+  .close-btn{
+    position: absolute;
+    top: 10px;
+    right: -15%;
+    font-size: 2rem;
+    cursor: pointer;
+  }
+
+  .galleryOverlay{
+    position: fixed;
+    bottom: 0;
+    z-index: 20;
+    right: 0;
+    height: 100vh; /* Full viewport height */
+    width: 100vw;  /* Full viewport width */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .swiper-slide {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding-bottom: 50px;
+  }
+
+  .swiper-button-next, .swiper-button-prev {
+    color: #3bcf16;
+    height: 20px; 
+    width: 20px; 
+    scale: 0.5;
+    z-index: 12;
+    top: 50%; 
+    transform: translateY(-50%);
+  }
+
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -131,6 +131,8 @@ const CardContainer = () => { @@
                 </p>
               )}
             </div>
           )}
         </>
       );
@@ Expand Down @@