Merge pull request #6 from User-DK/main

An attempt to optimise the page performance in production

Author: User-DK

Frontend/dependency-dump.txt

@@ -8,4 +8,4 @@
         "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    
+    

Frontend/package-lock.json

@@ -7,7 +7,7 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/icons-material": "^5.14.6",
     "@mui/material": "^5.14.6",
-    "framer-motion": "^10.15.0",
+    "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
@@ -17,8 +17,7 @@
     "sweetalert": "^2.1.2",
     "sweetalert2": "^11.7.27",
     "swiper": "^10.1.0",
-    "web-vitals": "^2.1.4",
-    "axios": "^1.4.0"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

Frontend/package.json

@@ -3,24 +3,24 @@ const events = [
     index: 1,
     Name: 'Yuvarang 2025',
     description:
-      'Yuvarang is the signature event of Art Circle. It is the only cultural mega event of WCE Sangli. The event is open to all colleges and for all trades. Art Circle tries to cover and enhance all the artforms in all the domains (eg- drama, dance, music or content writing like poetry sketching colouring and many more. Art Circle also gives an opportunity to school going children to showcase their talent.We members of Art Circle always try to preserve the culture,promote and encourage the artforms of India and always try to do our best in this initiative',
-    icon: "https://github.com/wce-artcircle/Assets/blob/main/events/yuvarang-final-2025.png?raw=true",
+      'Yuvarang is the signature event of Art Circle. It is the only cultural mega event of WCE Sangli. The event is open to all colleges and for all trades. Art Circle tries to cover and enhance all the artforms in all the domains - drama, dance, music or content writing like poetry sketching colouring and many more. Art Circle also gives an opportunity to school going children to showcase their talent. We members of Art Circle always try to preserve the culture,promote and encourage the artforms of India and always try to do our best in this initiative',
+    icon: "    https://cdn.statically.io/gh/wce-artcircle/Assets/main/assets/yuvarang-2025.png",
     register: "https://konfhub.com/yuvarang-2025"
   },
   {
     index: 2,
     Name: 'GIM 2024',
     description:
       'Kalarambh is the most awaited and most celebrated event of ArtCircle. It is basically General interest meet(GIM) arranged for newly admitted first year members to get the overall idea about the ArtCircle and events arranged by ArtCircle. Kalarambh is the golden opportunity for all the teams of ArtCircle to showcase their talent and encourage the new artists to be a part of ArtCircle to enhance and polish their artistic skills by joining ArtCircle.As the name suggests its the beautiful beginning of the art for the first year members in their 4 year journey with WCE.',
-    icon: "https://raw.githubusercontent.com/wce-artcircle/Assets/main/events/Kalarambh.jpg",
+    icon: "https://cdn.statically.io/gh/wce-artcircle/Assets/main/events/Kalarambh.jpg",
     // register: "https://konfhub.com/gim-2024"
   },
   {
     index: 3,
     Name: 'Ganjyot 2024',
     description:
       'It is a Photography Competition which aims at celebrating Ganpati Festival and capturing it with a different perspective. The competition is open to all WCE students. The participants are required to click a photograph of Ganpati Bappa in the campus and submit it to the club. The best photographs are selected by the judges and the winners are awarded Free ticket to GIM 2024. The competition is a great opportunity for the students to showcase their photography skills and creativity.',
-    icon: "https://raw.githubusercontent.com/wce-artcircle/Assets/main/events/Ganjyot.jpg",
+    icon: "https://cdn.statically.io/gh/wce-artcircle/Assets/main/events/Ganjyot.jpg",
     more: ""
   },
   {
@@ -29,28 +29,28 @@ const events = [
     Name: 'Dandiya Nights 2023',
     description:
       'Dandiya Nights is the most awaited program of WCE ART Circle, which typically falls in October. It is celebrated at Open Air Theatre of WCE with great energy and enthusiasm. The members of Art Circle perform dandiya dance which is set beforehand. On the event day, individuals attire themselves in the traditional Gujarati fashion. Dandiyas(sticks) are also provided by the club. An energetic and colourful aura is formed with the beats of song and dance.',
-    icon: "https://raw.githubusercontent.com/wce-artcircle/Assets/main/events/2023-navratri.png",
+    icon: "https://cdn.statically.io/gh/wce-artcircle/Assets/main/events/2023-navratri.png",
   },
   {
     index: 5,
     Name: 'YUVARANG 2023',
     description:
       'Yuvarang is the signature event of ArtCircle. It is the only cultural mega event of WCE Sangli. The event is open to all colleges and for all trades. ArtCircle tries to cover and enhance all the artforms in all the domains (eg- drama ,dance,music, litrature or Content writing like poetry sketching colouring and many more. ArtCircle also gives an opportunity to school going children to showcase their talent.We members of ArtCircle always try to preserve the culture,promote and encourage the artforms of India and alwyas try to do our best in this initiative',
-    icon: "https://raw.githubusercontent.com/wce-artcircle/Assets/main/events/yuvarang-23.jpeg",
+    icon: "https://cdn.statically.io/gh/wce-artcircle/Assets/main/events/yuvarang-23.jpeg",
   },
   {
     index: 6,
     Name: 'VARSHAV 2023',
     description:
       'Varshav is the newly added online photography competition introduced by Wce ArtCircle. It is an online photography competition exclusively for WCE students.Varshav promotes nature photography during Rainy season which also gives the message of environment conservation. WCE has always been rich and blessed with natural greeney which is more beautified by the Rains. Almost everyone in the campus is amazed by the scenic beauty and captures it in a photograph. This fondness of nature by fellow students of WCE needs an appreciation and  ArtCircle tries its best to do so via Varshav.',
-    icon: "https://raw.githubusercontent.com/wce-artcircle/Assets/main/events/photography-contest.png",
+    icon: "https://cdn.statically.io/gh/wce-artcircle/Assets/main/events/photography-contest.png",
   },
   {
     index: 7,
     Name: 'FAREWELL 2023',
     description:
       'Runanubandh is every emotional and close to heart event for all the ArtCircle members. It is a  farewell cum declaration program, where the current assistant and joint board members arrange the farewell for the Chief board and then the newly elected president, chief board and joint board members are declared. It is followed by the games that refresh the memories of all the ArtCircle members that the experienced during their tenure and motivates the newly elected board to do the same.The program is concluded with the oath by the newly elected president and board members and then followed by taking hand impressions of the Ex- Chief board members to preserve the memories.Overall the program is filled with all kinds of emotions and is exclusively for only ArtCircle members.',
-    icon: "https://raw.githubusercontent.com/wce-artcircle/Assets/main/events/farewell.png",
+    icon: "https://cdn.statically.io/gh/wce-artcircle/Assets/main/events/farewell.png",
   },
   // {
   //   index: 5,

Frontend/src/assets/yuvarang-2025.png

@@ -141,8 +141,6 @@
 }
 .modal {
   background-color: rgba(0, 0, 0, 0.7);
-  justify-content: center;
-  align-items: center;
   border-radius: 10px;
   border-width: 5rem;
 
@@ -155,6 +153,10 @@
   color: rgb(255, 255, 255);
   font-weight: 400;
   overflow-y: auto;
+    border-radius: 10px;
+      justify-content: center;
+  align-items: center;
+
 }
 .modal-content img {
   width: 40rem;

Frontend/src/components/events/allEvents.js

@@ -1,5 +1,5 @@
 // import React, { useState } from 'react'
-import { motion } from "framer-motion";
+// import { motion } from "framer-motion";
 // import {
 //   CarouselComponent,
 //   CarouselItemsDirective,
@@ -42,14 +42,14 @@ const Teams = () => {
     navigate(card.link[index]);
   };
 
-  const cardVariables = {
-    expand: {
-      width: "400px",
-    },
-    collapsed: {
-      width: "200px",
-    },
-  };
+  // const cardVariables = {
+  //   expand: {
+  //     width: "400px",
+  //   },
+  //   collapsed: {
+  //     width: "200px",
+  //   },
+  // };
   const card = {
     name: [
       "Dance Team",
@@ -81,24 +81,18 @@ const Teams = () => {
           </div>
           <div className="cards">
             {[0, 1, 2, 3, 4, 5].map((index) => (
-              <motion.div
-                className={`${
-                  index === expandIndex ? "expand" : " "
-                }, cards-style`}
+              <div
+                className={`cards-style ${
+                  index === expandIndex ? "expand" : ""
+                }`}
                 key={index}
-                variants={cardVariables}
-                initial="collapsed"
-                animate={index === expandIndex ? "expand" : "collapsed"}
-                transition={{ duration: 0.5 }}
-                onHoverStart={() => {
-                  handleHover(index);
-                }}
-                onHoverEnd={() => {
-                  handleHover(index);
-                }}
+                onMouseEnter={() => handleHover(index)}
+                onMouseLeave={() => handleHover(index)}
                 onClick={() => handleCardClick(index)}
                 style={{
                   backgroundImage: `url(${card.images[index]})`,
+                  transition: "width 0.5s",
+                  width: index === expandIndex ? "400px" : "200px",
                 }}
               >
                 <div className="card-content">
@@ -107,7 +101,7 @@ const Teams = () => {
                     {index === expandIndex && <p>{card.name[index]}</p>}
                   </div>
                 </div>
-              </motion.div>
+              </div>
             ))}
           </div>
         </div>

Frontend/src/components/events/events.css

@@ -24,6 +24,7 @@
     background-size: cover;
     background-position: center;
     border: 2px solid var(--color-primary);
+    transition: width 0.5s;
   }
   .card-content {
     display: flex;
@@ -104,4 +105,8 @@
       margin-top: 40px;
     }
   }
+  
+  .expand {
+    width: 400px;
+  }