Merge pull request #47 from gdsc-nits-org/SpeakJudge

Judge Card Added

src/Components/Footer/Footer.module.scss

@@ -17,7 +17,9 @@
   .container {
     background-image: linear-gradient(
       to bottom,
-      rgba(0, 240, 255, 0) 50%,
+      #00f0ff00 42%,
+      #00f0ff4e 67%,
+      #00f0ff70 77%,
       #00f0ff 100%
     ) !important;
     width: 100%;

src/Components/JudgeCard/JudgeCard.jsx

@@ -0,0 +1,90 @@
+import styles from "./JudgeCard.module.scss";
+
+const Card = ({ image, name, role, data }) => {
+  return (
+    <div className={styles.flip_card}>
+      <div className={styles.flip_card_front}>
+        <div className={styles.flip_card_inner}>
+          <img src={image} className={styles.speaker_image} alt={name} />
+          <h1 className={styles.name}>{name}</h1>
+          <h2 className={styles.role}>{role}</h2>
+        </div>
+      </div>
+      <div className={styles.flip_card_back}>
+        <div className={styles.flip_card_inner}>
+          <ul className={styles.data}>
+            {data.map((info) => (
+              <li key={image}>{info}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const JudgeCard = () => {
+  const SWJudge = {
+    id: 1,
+    image:
+      "https://res.cloudinary.com/dnuhxx8aa/image/upload/v1705826342/utkarsh_ekhwgs.webp",
+    name: "Utkarsh Gupta",
+    role: "SDE @Graviton",
+    data: "AIR 1 @Google Kickstart; Ex AIR 1 @Codeforces; Grandmaster @Codeforces; 7 Star on CodeChef; ICPC '21 World Finalist",
+  };
+  const UIUXJudges = [
+    {
+      id: 1,
+      image:
+        "https://res.cloudinary.com/dnuhxx8aa/image/upload/v1705826342/utkarsh_ekhwgs.webp",
+      name: "Utkarsh Gupta",
+      role: "SDE @Graviton",
+      data: "AIR 1 @Google Kickstart; Ex AIR 1 @Codeforces; Grandmaster @Codeforces; 7 Star on CodeChef; ICPC '21 World Finalist",
+    },
+    {
+      id: 2,
+      image:
+        "https://res.cloudinary.com/dnuhxx8aa/image/upload/v1705826158/harsh_mu4xlo.webp",
+      name: "Harsh Mishra",
+      role: "Open Source Engineer @LocalStack",
+      data: "Google Summer of Code '21; Google Season of Docs '21; AWS Community Builder; Open Source Contributor @moja global",
+    },
+  ];
+  return (
+    <section className={styles.section} id="speakers">
+      <h1 className={styles.heading}>software tracU judge</h1>
+      <div className={styles.SWjudge}>
+        <div
+          className={styles.gridContainer}
+          style={{ position: "relative", left: "25%" }}
+        >
+          <Card
+            image={SWJudge.image}
+            name={SWJudge.name}
+            role={SWJudge.role}
+            data={SWJudge.data.split(";")}
+          />
+        </div>
+        <h1 className={styles.heading} style={{ marginTop: "2rem" }}>
+          ui/ux judges
+        </h1>
+      </div>
+      <div className={styles.gridContainer}>
+        {UIUXJudges.map((judge) => {
+          const dataList = judge.data.split(";");
+          return (
+            <Card
+              key={judge.id}
+              image={judge.image}
+              name={judge.name}
+              role={judge.role}
+              data={dataList}
+            />
+          );
+        })}
+      </div>
+    </section>
+  );
+};
+
+export default JudgeCard;

src/Components/JudgeCard/JudgeCard.module.scss

@@ -0,0 +1,162 @@
+.section {
+  text-align: center;
+  color: white;
+  padding-top: 2rem;
+}
+
+.gridContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: 1rem 2rem;
+  gap: 1.5rem;
+  justify-items: center;
+}
+
+.heading {
+  font-family: "StarJedi";
+  color: #f2c300;
+  font-size: 3rem;
+  margin-bottom: 3rem;
+}
+
+.speaker_image {
+  width: 100%;
+  height: 100%;
+  border-radius: 1rem;
+}
+
+.data {
+  font-size: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 2.5rem;
+}
+
+.name {
+  font-size: 1.5rem;
+}
+
+.role {
+  font-size: 1rem;
+}
+
+.flip_card {
+  border-radius: 1rem;
+  transform-style: preserve-3d;
+  perspective: 1000px;
+  width: 50%;
+}
+
+@media screen and (max-width: 600px) {
+  .flip_card {
+    width: 100%;
+  }
+
+  .name {
+    font-size: 1rem;
+  }
+
+  .role {
+    font-size: 0.8rem;
+    height: 0rem;
+  }
+
+  .data {
+    font-size: 0.7rem;
+  }
+
+  .heading {
+    margin-bottom: 1rem;
+  }
+}
+
+@media screen and (max-width: 850px) and (min-width: 601px) {
+  .flip_card {
+    width: 50%;
+  }
+
+  .name {
+    font-size: 1rem;
+  }
+
+  .role {
+    font-size: 0.8rem;
+    height: 0rem;
+  }
+
+  .data {
+    font-size: 0.7rem;
+  }
+
+  .heading {
+    margin-bottom: 1rem;
+  }
+}
+
+.flip_card_front,
+.flip_card_back {
+  background-size: cover;
+  background-position: center;
+  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
+  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
+  backface-visibility: hidden;
+  width: 100%;
+  height: 425px;
+  border-radius: 0.6rem;
+  background-color: black;
+  color: #fff;
+  font-size: 1.5rem;
+}
+
+.flip_card_front::after,
+.flip_card_back::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  content: "";
+  display: block;
+  opacity: 1;
+  backface-visibility: hidden;
+  border-radius: 0.6rem;
+}
+
+.flip_card_inner {
+  transform: translateY(-50%) translateZ(60px) scale(0.94);
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  padding: 0rem;
+  box-sizing: border-box;
+  outline: 1px solid transparent;
+  background-color: black;
+  perspective: inherit;
+  z-index: 2;
+}
+
+.flip_card_back {
+  transform: rotateY(180deg);
+  transform-style: preserve-3d;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  border: 2px solid white;
+}
+
+.flip_card_front,
+.flip_card:hover .flip_card_back {
+  transform: rotateY(0deg);
+  transform-style: preserve-3d;
+}
+
+.flip_card:hover .flip_card_front {
+  transform: rotateY(-180deg);
+  transform-style: preserve-3d;
+}

src/Components/Navbar/Navbar.jsx

@@ -13,7 +13,7 @@ const Navbar = () => {
     if (location.hash) {
       const id = location.hash.split("#")[1];
       const element = document.getElementById(id);
-      const headerOffset = 100;
+      const headerOffset = 200;
       const bodyRect = document.body.getBoundingClientRect().top;
       if (element) {
         const elementRect = element.getBoundingClientRect().top;

src/Components/Teams/Card/Card.module.scss

@@ -4,6 +4,7 @@
 
 .cardBox {
   margin: auto;
+  margin-bottom: 2rem;
   width: 18rem;
   height: 23rem;
   border: white;

src/Components/index.js

@@ -8,6 +8,7 @@ import Hero from "./Hero/Hero";
 import Event from "./Event/Event";
 import Testimonial from "./Testimonial/Testimonial";
 import Carousel from "./Carausel/Carausel";
+import JudgeCard from "./JudgeCard/JudgeCard";
 
 export {
   Navbar,
@@ -21,4 +22,5 @@ export {
   Event,
   Testimonial,
   Carousel,
+  JudgeCard,
 };

src/Pages/CFStandings/CfStandings.jsx

@@ -7,7 +7,7 @@ import styles from "./CfStandings.module.scss";
 const queryClient = new QueryClient();
 
 const CfStandings = () => {
-  const [comingsoon] = useState(false);
+  const [comingsoon] = useState(true);
   return (
     <QueryClientProvider client={queryClient}>
       <div className={styles.mainCont}>

src/Pages/Home/Home.jsx

@@ -9,6 +9,7 @@ import {
   Sponsor,
   Hero,
   Testimonial,
+  JudgeCard,
 } from "../../Components/index";
 
 const Home = () => {
@@ -27,6 +28,7 @@ const Home = () => {
           <Tecno />
         </div>
         <Event />
+        <JudgeCard/>
         <Sponsor />
         <Testimonial />
       </div>

src/Pages/Team/Team.module.scss

@@ -2,7 +2,7 @@ $fontcolor: #ffffff;
 
 @font-face {
   font-family: "StarJedi";
-  src: url("/public/fonts/Starjedi.ttf") format("truetype");
+  src: url("/fonts/Starjedi.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
 }
@@ -114,6 +114,7 @@ $fontcolor: #ffffff;
   align-items: center;
   justify-content: center;
   padding-top: 2rem;
+  text-align: center;
 
   .Events {
     margin: 0 3rem;
@@ -127,6 +128,10 @@ $fontcolor: #ffffff;
   }
   .content {
     font-family: "Courier New", Courier, monospace;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     .heading {
       margin-bottom: 8rem;
       color: #f2c300;

src/Pages/Team/TeamSection.jsx

@@ -13,6 +13,7 @@ const DeskTeam = ({
   techLead,
   tech,
   organisers,
+  volunteers,
 }) => {
   return (
     <div className={styles.page}>
@@ -45,12 +46,12 @@ const DeskTeam = ({
         <div className={styles.teamname_body}>{organisers.map(MemberDetails)}</div>
       </div>
 
-      {/* <div className={styles.teamname}>
+      <div className={styles.teamname}>
         <div className={styles.headingteamsa} id="VOLUNTEERS">
           volunteers
         </div>{" "}
         <div className={styles.teamname_body}>{volunteers.map(MemberDetails)}</div>
-      </div> */}
+      </div>
     </div>
   );
 };
@@ -63,6 +64,7 @@ const MobTeam = ({
   techLead,
   tech,
   organisers,
+  volunteers,
 }) => {
   return (
     <div className={styles.page2}>
@@ -102,14 +104,14 @@ const MobTeam = ({
           <Carousel>{organisers.map(MemberDetails)}</Carousel>
         </div>
       </div>
-      {/* <div className={styles.content}>
+      <div className={styles.content}>
         <div className={styles.heading}>
           <p>volunteers</p>
         </div>
         <div className={styles.Events}>
           <Carousel>{volunteers.map(MemberDetails)}</Carousel>
         </div>
-      </div> */}
+      </div>
     </div>
   );
 };