Create Mentors Page (#298)

* create mentors page * create mentor card component * add in mobile scroll * create grid layout component * create judges page using mentors data * update mentors and judges --------- Co-authored-by: Jacob <[email protected]>
HackIllinois · Feb 27, 2025 · dcca21f · dcca21f
1 parent 16983c8
commit dcca21f
Show file tree

Hide file tree

Showing 68 changed files with 1,127 additions and 0 deletions.
diff --git a/app/judges/page.tsx b/app/judges/page.tsx
@@ -0,0 +1,28 @@
+import { judges } from "@/modules/JudgesData";
+import styles from "./styles.module.scss";
+import BACKGROUND from "@/public/mentors/mentors-background.svg";
+import BACKGROUND_CLOUDS from "@/public/mentors/background-clouds.svg";
+import Image from "next/image";
+import GridLayout from "@/components/GridLayout/GridLayout";
+
+const Judges = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.backgroundContainer}>
+                <Image
+                    src={BACKGROUND}
+                    alt="background"
+                    className={styles.background}
+                />
+                <Image
+                    src={BACKGROUND_CLOUDS}
+                    alt="background-clouds"
+                    className={styles.backgroundCloudsTop}
+                />
+            </div>
+            <GridLayout data={judges} header="Judges" />
+        </div>
+    );
+};
+
+export default Judges;
diff --git a/app/judges/styles.module.scss b/app/judges/styles.module.scss
@@ -0,0 +1,33 @@
+.container {
+    background: linear-gradient(180deg, #84bcb9 37%, #fdf1db 110%);
+    width: 100vw;
+    min-height: 100vh;
+    color: #fff;
+}
+
+.backgroundContainer {
+    position: fixed;
+    width: 100vw;
+    min-height: 100vh;
+    filter: brightness(0.85);
+}
+
+.background {
+    width: 100vw;
+    min-height: 100vh;
+    position: absolute;
+    bottom: -20vw;
+    @media screen and (max-width: 800px) {
+        bottom: -35vw;
+    }
+    @media screen and (max-width: 500px) {
+        bottom: -60vw;
+    }
+}
+
+.backgroundCloudsTop {
+    position: absolute;
+    top: -20vh;
+    width: 100vw;
+    min-height: 100vh;
+}
diff --git a/app/mentors/page.tsx b/app/mentors/page.tsx
@@ -0,0 +1,28 @@
+import { mentors } from "@/modules/MentorsData";
+import styles from "./styles.module.scss";
+import BACKGROUND from "@/public/mentors/mentors-background.svg";
+import BACKGROUND_CLOUDS from "@/public/mentors/background-clouds.svg";
+import Image from "next/image";
+import GridLayout from "@/components/GridLayout/GridLayout";
+
+const Mentors = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.backgroundContainer}>
+                <Image
+                    src={BACKGROUND}
+                    alt="background"
+                    className={styles.background}
+                />
+                <Image
+                    src={BACKGROUND_CLOUDS}
+                    alt="background-clouds"
+                    className={styles.backgroundCloudsTop}
+                />
+            </div>
+            <GridLayout data={mentors} header="Mentors" />
+        </div>
+    );
+};
+
+export default Mentors;
diff --git a/app/mentors/styles.module.scss b/app/mentors/styles.module.scss
@@ -0,0 +1,33 @@
+.container {
+    background: linear-gradient(180deg, #84bcb9 37%, #fdf1db 110%);
+    width: 100vw;
+    min-height: 100vh;
+    color: #fff;
+}
+
+.backgroundContainer {
+    position: fixed;
+    width: 100vw;
+    min-height: 100vh;
+    filter: brightness(0.85);
+}
+
+.background {
+    width: 100vw;
+    min-height: 100vh;
+    position: absolute;
+    bottom: -20vw;
+    @media screen and (max-width: 800px) {
+        bottom: -35vw;
+    }
+    @media screen and (max-width: 500px) {
+        bottom: -60vw;
+    }
+}
+
+.backgroundCloudsTop {
+    position: absolute;
+    top: -20vh;
+    width: 100vw;
+    min-height: 100vh;
+}
diff --git a/components/GridLayout/GridLayout.module.scss b/components/GridLayout/GridLayout.module.scss
@@ -0,0 +1,24 @@
+.content {
+    padding-top: 20vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    z-index: 1;
+}
+
+.content h1 {
+    font-size: 65px;
+    z-index: 1;
+}
+
+.body {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 1;
+    padding: 4rem;
+    width: 100%;
+}
diff --git a/components/GridLayout/GridLayout.tsx b/components/GridLayout/GridLayout.tsx
@@ -0,0 +1,34 @@
+import MentorCard from "../Mentors/MentorCard/MentorCard";
+import styles from "./GridLayout.module.scss";
+
+type mentorProps = {
+    name: string;
+    image: string;
+    desc: string;
+};
+
+type GridLayoutProps = {
+    data: mentorProps[];
+    header: string;
+};
+
+const GridLayout: React.FC<GridLayoutProps> = ({ data, header }) => {
+    return (
+        <div className={styles.content}>
+            <h1>{header}</h1>
+            <div className={styles.body}>
+                {data.map((mentor: mentorProps, id) => (
+                    <MentorCard
+                        key={id}
+                        id={id}
+                        name={mentor.name}
+                        image={mentor.image}
+                        desc={mentor.desc}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default GridLayout;
diff --git a/components/Mentors/MentorCard/MentorCard.module.scss b/components/Mentors/MentorCard/MentorCard.module.scss
@@ -0,0 +1,112 @@
+.container {
+    position: relative;
+    text-align: center;
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 7rem;
+    cursor: pointer;
+}
+
+.image {
+    width: 225px;
+    height: 225px;
+    object-fit: cover;
+    border-radius: 50%;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -15%);
+}
+
+.frontCloud {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -15%);
+}
+
+.scroll {
+    position: absolute;
+    top: -10%;
+    left: -5%;
+    pointer-events: none;
+    width: 90vw;
+    height: 100vh;
+}
+
+.modalContainer {
+    height: 100%;
+    width: 100%;
+}
+
+.modalContent {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: space-around;
+    gap: 2rem;
+    padding: 10vw;
+}
+
+.modalImage {
+    z-index: 1;
+    border-radius: 96px;
+    width: 20vw;
+    height: 20vw;
+}
+
+.modalText {
+    color: black;
+    text-align: center;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.modalText h1 {
+    font-size: 2.5vw;
+
+    @media screen and (max-width: 700px) {
+        font-size: 3.5vw;
+    }
+}
+
+.modalText p {
+    font-size: 1.2vw;
+
+    @media screen and (max-width: 700px) {
+        font-size: 1.5vw;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .modalContent {
+        flex-direction: column;
+        gap: 1rem;
+        padding: 5rem 1rem;
+        width: 80%;
+        margin: auto;
+        justify-content: center;
+    }
+
+    .modalImage {
+        width: 30vw;
+        height: 30vw;
+        border-radius: 40px;
+    }
+
+    .modalText {
+        gap: 0.5rem;
+    }
+
+    .modalText h1 {
+        font-size: 4.5vw;
+    }
+
+    .modalText p {
+        font-size: 2.5vw;
+    }
+}
diff --git a/components/Mentors/MentorCard/MentorCard.tsx b/components/Mentors/MentorCard/MentorCard.tsx
@@ -0,0 +1,92 @@
+"use client";
+import React from "react";
+import styles from "./MentorCard.module.scss";
+import BACK_CLOUD from "@/public/mentors/mentor-back-cloud.svg";
+import FRONT_CLOUD from "@/public/mentors/mentor-front-cloud.svg";
+import Image from "next/image";
+import Modal from "react-modal";
+import { useState } from "react";
+import SCROLL from "@/public/mentors/mentor-scroll.svg";
+import MOBILE_SCROLL from "@/public/mentors/mobile-scroll.svg";
+import useWindowSize from "@/hooks/use-window-size";
+
+type mentorProps = {
+    id: number;
+    name: string;
+    image: string;
+    desc: string;
+};
+
+const MentorCard: React.FC<mentorProps> = ({ id, name, image, desc }) => {
+    const [modalOpen, setModalOpen] = useState(false);
+    const windowSizeHook = useWindowSize();
+
+    const handleClick = () => {
+        setModalOpen(true);
+    };
+
+    return (
+        <>
+            {modalOpen && (
+                <Modal
+                    isOpen={modalOpen}
+                    onRequestClose={() => setModalOpen(false)}
+                    style={{
+                        overlay: { zIndex: 1000 },
+                        content: {
+                            padding: 0,
+                            overflow: "visible",
+                            border: "none",
+                            width: "80%",
+                            height: "80%",
+                            margin: "auto",
+                            background: "transparent"
+                        }
+                    }}
+                    ariaHideApp={false}
+                >
+                    <Image
+                        src={
+                            windowSizeHook?.width && windowSizeHook?.width < 480
+                                ? MOBILE_SCROLL
+                                : SCROLL
+                        }
+                        alt="scroll"
+                        className={styles.scroll}
+                    />
+                    <div className={styles.modalContainer}>
+                        <div className={styles.modalContent}>
+                            <img
+                                src={image}
+                                alt="image"
+                                className={styles.modalImage}
+                            />
+                            <div className={styles.modalText}>
+                                <h1>{name}</h1>
+                                <p>{desc}</p>
+                            </div>
+                        </div>
+                    </div>
+                </Modal>
+            )}
+            <div className={styles.container} key={id} onClick={handleClick}>
+                <Image
+                    src={BACK_CLOUD}
+                    alt="back-cloud"
+                    className={styles.backCloud}
+                />
+                <div>
+                    <img src={image} alt="image" className={styles.image} />
+                </div>
+                <Image
+                    src={FRONT_CLOUD}
+                    alt="front-cloud"
+                    className={styles.frontCloud}
+                />
+                <h2>{name}</h2>
+            </div>
+        </>
+    );
+};
+
+export default MentorCard;