event update

TCP-Tech · Sep 18, 2023 · 5b19eff · 5b19eff
1 parent 5196dca
commit 5b19eff
Show file tree

Hide file tree

Showing 11 changed files with 100 additions and 99 deletions.
diff --git a/src/assets/data/eventsData.js b/src/assets/data/eventsData.js
@@ -1,68 +1,68 @@
-import event1 from '../images/event1.png'
-import event2 from '../images/event2.png'
-import event3 from '../images/event3.png'
-import event4 from '../images/event4.png'
-import event5 from '../images/event5.png'
-import event6 from '../images/event6.png'
-import event7 from '../images/event7.png'
-import event8 from '../images/event8.png'
-import event9 from '../images/event9.png'
+import event1 from "../images/event1.png";
+import event2 from "../images/event2.png";
+import event3 from "../images/event3.png";
+import event4 from "../images/event4.png";
+import event5 from "../images/event5.png";
+import event6 from "../images/event6.png";
+import event7 from "../images/event7.png";
+import event8 from "../images/event8.png";
+import event9 from "../images/event9.png";
 
 const events = [
   {
     title: "Codease",
     date: "10th February",
     img: event5,
-    link:"https://forms.gle/FmCBiEwB8Cx72sfB7",
+    link: "https://forms.gle/FmCBiEwB8Cx72sfB7",
   },
   {
     title: "Code Riddles",
     date: "11th February",
     img: event6,
-    link:"",
+    link: "",
   },
   {
     title: "IT Quiz",
     date: "11th February",
     img: event8,
-    link:"",
+    link: "",
   },
   {
     title: "Logo Design",
     date: "12th February",
     img: event9,
-    link:"",
+    link: "",
   },
   {
     title: "Ultimate Gaming",
     date: "11th and 12th February",
     img: event7,
-    link:"",
+    link: "",
   },
   {
     title: "Cloud Techniques and Placement Tips",
     date: "14th and 15th January",
     img: event1,
-    link:"",
+    link: "",
   },
   {
     title: "28 Hours Hackathon",
     date: "11th and 12th February",
     img: event2,
-    link:"",
+    link: "",
   },
   {
     title: "CP and Algo Bootcamp",
     date: "21st and 22nd January",
     img: event3,
-    link:"",
+    link: "",
   },
   {
     title: "AI and Machine Learning",
     date: "28th and 29th January",
     img: event4,
-    link:"https://forms.gle/zetADszoQMTad7JV8",
+    link: "https://forms.gle/zetADszoQMTad7JV8",
   },
 ];
 
-export default events;
+export default events;
diff --git a/src/assets/images/sahil.jpg b/src/assets/images/sahil.jpg
diff --git a/src/assets/images/samarth_batav.jpg b/src/assets/images/samarth_batav.jpg
diff --git a/src/assets/images/sugandha.jpg b/src/assets/images/sugandha.jpg
diff --git a/src/pages/home/sections/section1/Section1.css b/src/pages/home/sections/section1/Section1.css
@@ -10,7 +10,7 @@
 .codeutsava__section1-bg-canvas{
   display: block !important;
   width: 100%; 
-  height: 875px;
+  height: 900px;
   aspect-ratio: auto;
   position: absolute;
   z-index: -100;

diff --git a/src/pages/home/sections/section1/Section1.js b/src/pages/home/sections/section1/Section1.js
@@ -168,8 +168,6 @@ const Section1 = () => {
     animate();
     var isMouseDown = false;
 
-    setInterval(function () {isMouseDown =! isMouseDown;}, 5000);
-
     window.addEventListener("mousedown", function () {
       isMouseDown = true;
     });

diff --git a/src/pages/home/sections/section15/Section15.css b/src/pages/home/sections/section15/Section15.css
@@ -34,7 +34,7 @@
   background-color: rgb(230, 118, 20);
   overflow: hidden;
   opacity: 0;
-  transition: opacity 0.5s ease; 
+  transition: opacity 0.5s ease;
 }
 .codeutsava__section15-glimpses-panel-oddoverlay {
   display: flex;
@@ -46,13 +46,12 @@
   right: 0;
   bottom: 0;
   margin: 9px;
-  background-color:var(--primary-c);
+  background-color: var(--primary-c);
   overflow: hidden;
-  opacity: 0; 
+  opacity: 0;
   transition: opacity 0.5s ease;
 }
 
-
 .codeutsava__section15-glimpses-container {
   display: flex;
   flex-wrap: wrap;
@@ -84,17 +83,19 @@
   background-image: inherit;
   background-size: cover;
   background-position: center;
-  transition: transform 0.3s ease; 
+  transition: transform 0.3s ease;
 }
 .codeutsava__section15-glimpses-panel:hover::before {
-  transform: scale(1.2); 
+  transform: scale(1.2);
 }
 
-.codeutsava__section15-glimpses-panel:hover .codeutsava__section15-glimpses-panel-oddoverlay {
- opacity: 0.5;
+.codeutsava__section15-glimpses-panel:hover
+  .codeutsava__section15-glimpses-panel-oddoverlay {
+  opacity: 0.5;
 }
-.codeutsava__section15-glimpses-panel:hover .codeutsava__section15-glimpses-panel-evenoverlay {
- opacity: 0.5;
+.codeutsava__section15-glimpses-panel:hover
+  .codeutsava__section15-glimpses-panel-evenoverlay {
+  opacity: 0.5;
 }
 
 .codeutsava__section15-glimpses-panel {
@@ -111,5 +112,5 @@
   position: relative;
   /* transition: flex 0.7s ease-in, transform 0.3s ease;  */
   overflow: hidden;
-  transform-origin: center; 
+  transform-origin: center;
 }
diff --git a/src/pages/home/sections/section15/Section15.js b/src/pages/home/sections/section15/Section15.js
@@ -8,7 +8,7 @@ const Section15 = () => {
   const [activeId, setActiveId] = useState(1);
   const [selectedImage, setSelectedImage] = useState(null);
   const onClick = (id) => setActiveId(id);
-  //passing the clicked image to the modal 
+  //passing the clicked image to the modal
   const openModal = (imgSrc) => {
     setSelectedImage(imgSrc);
   };
@@ -27,7 +27,6 @@ const Section15 = () => {
       </div>
       <div className="codeutsava__section15-glimpses-container">
         {glimpses.map((card) => (
-
           <div
             key={card.id}
             className={`codeutsava__section15-glimpses-panel ${
@@ -36,25 +35,29 @@ const Section15 = () => {
             onClick={() => onClick(card.id)}
             style={{ backgroundImage: `url(${card.imgSrc})` }}
           >
-            <div className={card.id%2==0?'codeutsava__section15-glimpses-panel-evenoverlay':'codeutsava__section15-glimpses-panel-oddoverlay'} onClick={() => openModal(card.imgSrc)} >
+            <div
+              className={
+                card.id % 2 == 0
+                  ? "codeutsava__section15-glimpses-panel-evenoverlay"
+                  : "codeutsava__section15-glimpses-panel-oddoverlay"
+              }
+              onClick={() => openModal(card.imgSrc)}
+            >
               Click
             </div>
           </div>
         ))}
       </div>
 
       {/* Rendering the modal,it is for that bigger image appearence with all that popping and closing functionality through a close button */}
-      <Modal isOpen={selectedImage !== null} onClose={() => setSelectedImage(null)}>
+      <Modal
+        isOpen={selectedImage !== null}
+        onClose={() => setSelectedImage(null)}
+      >
         {selectedImage && <img src={selectedImage} alt="Larger Glimpse" />}
       </Modal>
     </motion.div>
   );
 };
 
 export default Section15;
-
-
-
-
-
-
diff --git a/src/pages/home/sections/section15/modal.css b/src/pages/home/sections/section15/modal.css
@@ -1,51 +1,51 @@
 .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.8); 
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 9999;
-    opacity: 0; 
-    transition: opacity 1s ease-in-out;
-  }
-  .modal-overlay.open {
-    opacity: 1;
-  }
-  
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
+}
+.modal-overlay.open {
+  opacity: 1;
+}
+
 .modal-content {
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-    position: relative;
-    max-width: 80%; 
-    text-align: center;
-  }
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  position: relative;
+  max-width: 80%;
+  text-align: center;
+}
 .modal-content img {
-    max-width: 100%;
-    max-height: 80vh;
-    width: auto;
-    height: auto;
-    display: block;
-    margin: 0 auto; 
-    position: relative;
-    top: 50%;
-    transform: translateY(5%);
-  }
-  .close-button {
-    position: absolute;
-     top: 90px;
-    right: 60px;
-    font-size: 70px;
-    cursor: pointer;
-    background: transparent;
-    border: none;
-    outline: none;
-    color: #e76909;
-  }
-  .close-button::before {
-    content: "×"; 
-  }
+  max-width: 100%;
+  max-height: 80vh;
+  width: auto;
+  height: auto;
+  display: block;
+  margin: 0 auto;
+  position: relative;
+  top: 50%;
+  transform: translateY(5%);
+}
+.close-button {
+  position: absolute;
+  top: 90px;
+  right: 60px;
+  font-size: 70px;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: white;
+}
+.close-button::before {
+  content: "×";
+}
diff --git a/src/pages/home/sections/section15/modal.js b/src/pages/home/sections/section15/modal.js
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import "./modal.css"; 
+import "./modal.css";
 const Modal = ({ isOpen, onClose, children }) => {
   //to hanle the outside clicks,image will close if user clicks outside of the image
   const handleOutsideClick = (event) => {
@@ -18,14 +18,11 @@ const Modal = ({ isOpen, onClose, children }) => {
 
   // Render the modal only if isOpen is true
   if (!isOpen) return null;
-const modalClassname=isOpen?"modal-overlay open":"modal-overlay"
+  const modalClassname = isOpen ? "modal-overlay open" : "modal-overlay";
   return (
     <div className={modalClassname}>
-      <div className="modal-content">
-        {children}
-      </div>
-      <button className="close-button" onClick={onClose}>
-        </button>
+      <div className="modal-content">{children}</div>
+      <button className="close-button" onClick={onClose}></button>
     </div>
   );
 };

diff --git a/src/pages/home/sections/section3/Section3.js b/src/pages/home/sections/section3/Section3.js
@@ -9,6 +9,8 @@ import Slider from "react-slick";
 import { sliderSettings } from "../../../../motionUtils";
 import { motion } from "framer-motion";
 
+import Events from "../../../../assets/data/eventsData"
+
 import { previousYear, baseUrl } from "../../../../constants";
 
 import axios from "axios";
@@ -44,7 +46,7 @@ const Section3 = () => {
       <div className="codeutsava__section3-title">Events</div>
       <div className="codeutsava__section3-events-container">
         <Slider {...sliderSettings} className="slider">
-          {state.data.map((event, index) => (
+          {Events.map((event, index) => (
             <EventCard
               key={index}
               img={event.img}