Speakers Page

apps/admin/src/index.css

@@ -67,3 +67,11 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+@font-face {
+  font-family: "ProRacingSlant";
+  src: url("/pro-racing.slant.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}

apps/site/index.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: "Magistral";
+  src: url("/magistral.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "ProRacingSlant";
+  src: url("/pro-racing.slant.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "ProRacing";
+  src: url("/pro-racing.regular.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}

apps/site/index.html

@@ -7,7 +7,9 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0,viewport-fit=cover"
     />
+    <link rel="stylesheet" href="style.css" />
     <meta name="theme-color" content="#000000" />
+    <!-- Add stylesheet index.css -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

apps/site/src/App.tsx

@@ -13,6 +13,7 @@ import Resume from "./routes/Resume";
 import { Box, ChakraProvider, VStack } from "@chakra-ui/react";
 import theme from "./theme";
 import Navbar from "./components/Navbar";
+import Speakers from "./routes/Speakers/Speakers";
 
 function RefreshHandler() {
   useEffect(() => {
@@ -31,6 +32,7 @@ function App() {
         <Routes>
           <Route element={<Main />}>
             <Route path="/" element={<Home />} />
+            <Route path="/speakers" element={<Speakers />} />
             <Route element={<RequireAuth />}>
               <Route key="/register" path="/register" element={<Register />} />
             </Route>

apps/site/src/components/Navbar.tsx

@@ -16,7 +16,7 @@ const LINKS = [
   { name: "Schedule", href: "/#schedule", hash: "schedule" },
   { name: "FAQ", href: "/#faq", hash: "faq" },
   { name: "Sponsors", href: "/#sponsors", hash: "sponsors" },
-  //   { name: "Speakers", href: "" },
+  { name: "Speakers", href: "/speakers" },
   { name: "Mechmania", href: "https://mechmania.org/", newTab: true },
   { name: "PuzzleBang", href: "https://puzzlebang.com/", newTab: true }
 ];
@@ -255,7 +255,7 @@ const Navbar: React.FC<NavbarProps> = ({ isFlush }) => {
             <Flex
               as="nav"
               mb={{ base: 16, xl: 0 }}
-              gap={{ base: 5, xl: 6 }}
+              gap={{ base: 5, xl: 0 }}
               mr={{ xl: 8 }}
               height="100%"
               flexDir={{ base: "column", xl: "row" }}

apps/site/src/components/Speakers/SpeakerCardRow.tsx

@@ -0,0 +1,269 @@
+import { useElementHeight } from "@/hooks/use-element-height-hook";
+import { SpeakerRow } from "@/types/speaker-types";
+import { CloseIcon } from "@chakra-ui/icons";
+import {
+  Box,
+  HStack,
+  IconButton,
+  Text,
+  useMediaQuery,
+  VStack
+} from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import SpeakerImageCard from "./SpeakerImageCard";
+
+export default function SpeakerCardRow({ row }: { row: SpeakerRow }) {
+  const [isSmallScreen] = useMediaQuery("(max-width: 768px)");
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const { ref: bioTextRef, height: bioTextHeight } =
+    useElementHeight<HTMLParagraphElement>();
+
+  const bioTextDisplayedHeight = Math.max(bioTextHeight + 20, 150);
+
+  const handleSetSelectedIndex = (index: number) => {
+    if (selectedIndex) {
+      return;
+    }
+    setSelectedIndex(index);
+  };
+
+  const handleLeave = () => {
+    if (selectedIndex !== null) {
+      setSelectedIndex(null);
+    }
+  };
+
+  useEffect(() => {
+    // Reset selected index when the number of speakers changes
+    setSelectedIndex(null);
+  }, [row.speakers.length]);
+
+  const speakerSelected = selectedIndex !== null;
+
+  /** For the split-second between changing the number of speakers in a row on a screen width change */
+  const displayedSelectedIndex =
+    selectedIndex !== null
+      ? Math.min(selectedIndex, row.speakers.length - 1)
+      : null;
+
+  const displayedContent =
+    displayedSelectedIndex !== null
+      ? row.speakers[displayedSelectedIndex].bio
+      : null;
+
+  useEffect(() => {
+    console.log("displayedContent", displayedContent?.split("\n"));
+  }, [displayedContent]);
+
+  return (
+    <VStack
+      w={{
+        base: "80%",
+        lg: "80%"
+      }}
+      mb={10}
+      position="relative"
+    >
+      <HStack
+        gap={{ base: speakerSelected ? 0 : 3, md: 3 }}
+        w={row.speakers.length === 1 && !speakerSelected ? "50%" : "100%"}
+        maxW="1000px"
+        ml={{
+          base: speakerSelected ? 0 : 7,
+          md: 28
+        }}
+        transition={"all 0.3s"}
+        mb={{
+          base: 1,
+          md: 3
+        }}
+      >
+        {row.speakers.map((speaker, index) => (
+          <Text
+            display={"flex"}
+            flex={
+              displayedSelectedIndex !== null
+                ? displayedSelectedIndex === index
+                  ? 1
+                  : 0
+                : 1
+            }
+            color={row.color}
+            fontFamily="Magistral"
+            fontSize={{ base: "lg", md: "2xl" }}
+            letterSpacing={"1px"}
+            fontWeight={"bold"}
+            transition={"all 0.3s"}
+            w={
+              displayedSelectedIndex !== null
+                ? displayedSelectedIndex === index
+                  ? "100%"
+                  : "0"
+                : "100%"
+            }
+            opacity={
+              displayedSelectedIndex !== null
+                ? displayedSelectedIndex === index
+                  ? 1
+                  : 0
+                : 1
+            }
+            isTruncated
+            minWidth="0"
+            overflow={"hidden"}
+          >
+            {speaker.name}
+          </Text>
+        ))}
+      </HStack>
+      <HStack
+        display="flex"
+        position="relative"
+        h={speakerSelected ? `${bioTextDisplayedHeight}px` : "150px"}
+        w={row.speakers.length === 1 && !speakerSelected ? "50%" : "100%"}
+        maxW="1000px"
+        alignItems={"center"}
+        gap={displayedSelectedIndex !== null ? 0 : 5}
+        transition={"all 0.3s"}
+        ml={{
+          base: 0,
+          md: 0
+        }}
+      >
+        {row.speakers.map((speaker, index) => (
+          <SpeakerImageCard
+            key={`speaker-image-${index}`}
+            row={row}
+            index={index}
+            displayedSelectedIndex={displayedSelectedIndex}
+            speakerSelected={speakerSelected}
+            speaker={speaker}
+            customHeight={
+              speakerSelected ? `${bioTextDisplayedHeight}px` : "150px"
+            }
+            handleSetSelectedIndex={handleSetSelectedIndex}
+          />
+        ))}
+        <Box
+          display={"flex"}
+          alignItems={"center"}
+          position="absolute"
+          top={0}
+          left={0}
+          right={0}
+          pl={{ base: "1rem", md: "3rem" }}
+          pr={{ base: 14, md: 16 }}
+          h={`${bioTextDisplayedHeight}px`}
+          textAlign="left"
+          color="white"
+          fontFamily="Magistral"
+          fontSize={{
+            base: "md",
+            lg: "xl"
+          }}
+          opacity={displayedSelectedIndex !== null ? 1 : 0.5}
+          transition="all 0.3s"
+          zIndex={3}
+          pointerEvents={displayedSelectedIndex !== null ? undefined : "none"}
+          fontWeight={"semibold"}
+        >
+          <Text ref={bioTextRef} whiteSpace={"pre-wrap"}>
+            {displayedContent ? (
+              displayedContent.split("\\n").map((line, i) => (
+                <>
+                  {line}
+                  {i < displayedContent.split("\\n").length - 1 && (
+                    <>
+                      <br />
+                    </>
+                  )}
+                </>
+              ))
+            ) : (
+              <></>
+            )}
+          </Text>
+        </Box>
+        <Box
+          position="absolute"
+          top={2}
+          right={1}
+          zIndex={4}
+          opacity={displayedSelectedIndex !== null ? "1" : "0"}
+          display={displayedSelectedIndex !== null ? "flex" : "none"}
+        >
+          {/* Exit button, x icon */}
+          <IconButton
+            size="sm"
+            aria-label="Exit"
+            icon={<CloseIcon transform={{ md: "skewX(10deg)" }} />}
+            onClick={handleLeave}
+            transform={{ base: "", md: "skewX(-10deg)" }}
+            px={4}
+          />
+        </Box>
+      </HStack>
+      <HStack
+        gap={{
+          base: 2,
+          md: 0
+        }}
+        w={row.speakers.length === 1 && !speakerSelected ? "50%" : "100%"}
+        maxW="1000px"
+        transition={"all 0.3s"}
+        mt={{
+          base: 0,
+          md: 2
+        }}
+        ml={{
+          base: -4,
+          md: 0
+        }}
+      >
+        {row.speakers.map((speaker, index) => (
+          <Text
+            display={"block"}
+            flex={
+              displayedSelectedIndex !== null
+                ? displayedSelectedIndex === index
+                  ? 1
+                  : 0
+                : 1
+            }
+            color={row.color}
+            fontFamily="Magistral"
+            letterSpacing={"1px"}
+            fontSize={{
+              base: "sm,",
+              md: "xl"
+            }}
+            h={displayedSelectedIndex ? "30px" : "100px"}
+            isTruncated={
+              isSmallScreen ? false : displayedSelectedIndex !== null
+            }
+            pl={speakerSelected ? (index === 0 ? 2 : 0) : 0}
+            pr={
+              displayedSelectedIndex !== null
+                ? displayedSelectedIndex === index
+                  ? 3
+                  : 0
+                : 3
+            }
+            minWidth="0"
+            transition={"all 0.3s"}
+            w={
+              displayedSelectedIndex !== null
+                ? displayedSelectedIndex === index
+                  ? "100%"
+                  : "0"
+                : "100%"
+            }
+            overflow={"hidden"}
+          >
+            {speaker.title}
+          </Text>
+        ))}
+      </HStack>
+    </VStack>
+  );
+}