MCSS-125: Add Team Section (#126)

Co-authored-by: Hana Dowe <hana-dowe@users.noreply.github.com>

components/HomePage/ModalOrganizer/index.tsx

@@ -0,0 +1,142 @@
+import CloseIcon from '@mui/icons-material/Close'
+import GitHubIcon from '@mui/icons-material/GitHub'
+import LanguageIcon from '@mui/icons-material/Language'
+import LinkedInIcon from '@mui/icons-material/LinkedIn'
+import Avatar from '@mui/material/Avatar'
+import Badge from '@mui/material/Badge'
+import Box from '@mui/material/Box'
+import Dialog from '@mui/material/Dialog'
+import DialogContent from '@mui/material/DialogContent'
+import Grow from '@mui/material/Grow'
+import IconButton from '@mui/material/IconButton'
+import Link from '@mui/material/Link'
+import Tooltip from '@mui/material/Tooltip'
+import Typography from '@mui/material/Typography'
+
+import theme from '@/styles/theme'
+
+type Props = {
+  open: boolean
+  onClose: () => void
+} & ModalOrganizerProps
+
+export type ModalOrganizerProps = {
+  name: string
+  description: string
+  avatar: string
+  emoji: string
+  website?: string
+  linkedin?: string
+  github?: string
+}
+
+const ModalOrganizer = (props: Props) => {
+  const { open, onClose, name, description, avatar, emoji, website, linkedin, github } = props
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      TransitionComponent={Grow}
+      PaperProps={{
+        elevation: 2,
+        sx: {
+          m: '1rem',
+          maxHeight: 'calc(100% - 2rem)',
+          width: 'calc(100% - 2rem)',
+          backgroundImage:
+            'radial-gradient(circle closest-corner at 25% 60%, rgba(238, 39, 39, 0.25), rgba(255, 255, 255, 0)), radial-gradient(circle farthest-side at 71% 16%, rgba(154, 39, 238, 0.15), rgba(255, 255, 255, 0) 35%), radial-gradient(circle closest-corner at 32% 38%, rgba(238, 164, 39, 0.1), rgba(255, 255, 255, 0) 76%), radial-gradient(circle farthest-side at 69% 81%, rgba(255, 0, 48, 0.1), rgba(255, 255, 255, 0) 76%), linear-gradient(#202124, #202124)',
+        },
+      }}
+      maxWidth="sm"
+    >
+      <IconButton
+        onClick={onClose}
+        sx={{
+          position: 'absolute',
+          right: 8,
+          top: 12,
+          color: 'text.secondary',
+        }}
+      >
+        <CloseIcon />
+      </IconButton>
+      <DialogContent
+        sx={{
+          display: 'flex',
+          gap: '1rem 1.5rem',
+          p: '3rem 2.5rem',
+          alignItems: 'center',
+          flexDirection: { xs: 'column', sm: 'row' },
+        }}
+      >
+        <Box
+          component="div"
+          display="inline-flex"
+          flexDirection="column"
+          alignItems="center"
+          gap="1rem"
+        >
+          <Badge
+            overlap="circular"
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+            badgeContent={
+              <Avatar sx={{ bgcolor: theme.palette.background.default }}>{emoji}</Avatar>
+            }
+          >
+            <Avatar
+              src={avatar}
+              alt={name}
+              sx={{
+                width: 125,
+                height: 125,
+                color: 'white',
+                bgcolor: theme.palette.background.default,
+                border: `6px solid ${theme.palette.background.default}`,
+                filter: 'saturate(0.9)',
+              }}
+            />
+          </Badge>
+          {(website || linkedin || github) && (
+            <Box component="div" display="inline-flex" gap="1rem">
+              {website && (
+                <Tooltip title="Website" placement="top">
+                  <Link rel="noopener" href={website} target="_blank" display="flex">
+                    <LanguageIcon />
+                  </Link>
+                </Tooltip>
+              )}
+              {github && (
+                <Tooltip title="GitHub" placement="top">
+                  <Link rel="noopener" href={github} target="_blank" display="flex">
+                    <GitHubIcon />
+                  </Link>
+                </Tooltip>
+              )}
+              {linkedin && (
+                <Tooltip title="LinkedIn" placement="top">
+                  <Link rel="noopener" href={linkedin} target="_blank" display="flex">
+                    <LinkedInIcon />
+                  </Link>
+                </Tooltip>
+              )}
+            </Box>
+          )}
+        </Box>
+        <Box
+          component="div"
+          display="flex"
+          flexDirection="column"
+          textAlign={{ xs: 'center', sm: 'start' }}
+          gap="0.25rem"
+        >
+          <Typography variant="h2" gutterBottom>
+            {name}
+          </Typography>
+          <Typography>{description}</Typography>
+        </Box>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default ModalOrganizer

components/HomePage/Navbar/index.tsx

@@ -177,6 +177,9 @@ const Navbar = (props: Props) => {
               title={toggles.dashboard ? 'Take me to my dashboard' : ''}
               placement="right"
               arrow
+              data-aos="fade"
+              data-aos-delay="500"
+              data-aos-duration="1000"
             >
               <Button
                 href="/login"

components/HomePage/Team/index.tsx

@@ -0,0 +1,175 @@
+import { Suspense, useState } from 'react'
+import Marquee from 'react-fast-marquee'
+
+import Avatar from '@mui/material/Avatar'
+import Box from '@mui/material/Box'
+import Container from '@mui/material/Container'
+import IconButton from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
+import Typography from '@mui/material/Typography'
+
+import ModalOrganizer, { ModalOrganizerProps } from '@/components/HomePage/ModalOrganizer'
+
+const Team = () => {
+  const [open, setOpen] = useState(false)
+  const [organizer, setOrganizer] = useState<ModalOrganizerProps>({
+    name: '',
+    description: '',
+    avatar: '',
+    emoji: '',
+    website: '',
+    linkedin: '',
+    github: '',
+  })
+
+  const Organizer = (props: ModalOrganizerProps) => {
+    const { name, avatar } = props
+
+    return (
+      <Tooltip title={name} placement="top" sx={{ m: { xs: 0, sm: '0.25rem', m: '0.5rem' } }}>
+        <IconButton
+          tabIndex={-1}
+          onClick={() => {
+            setOrganizer(props)
+            setOpen(true)
+          }}
+        >
+          <Avatar src={avatar} alt={name} sx={{ width: 65, height: 65, filter: 'saturate(0.9)' }} />
+        </IconButton>
+      </Tooltip>
+    )
+  }
+
+  return (
+    <>
+      <Container
+        data-aos="fade"
+        data-aos-offset="100"
+        data-aos-duration="1200"
+        data-aos-once="false"
+        sx={{
+          gap: '1rem 2.5rem',
+          textAlign: { xs: 'center', lg: 'left' },
+          flexDirection: { xs: 'column', lg: 'row' },
+          justifyContent: 'space-between',
+          pt: '3rem !important',
+          pb: '0 !important',
+        }}
+      >
+        <Box component="div" minWidth="fit-content">
+          <Typography
+            variant="h2"
+            gutterBottom
+            data-aos="fade-up"
+            data-aos-delay="100"
+            data-aos-offset="100"
+            data-aos-once="false"
+          >
+            The Organizing Team
+          </Typography>
+          <Typography
+            data-aos="fade-up"
+            data-aos-delay="200"
+            data-aos-offset="100"
+            data-aos-once="false"
+          >
+            & special thanks to all staff ❤️
+          </Typography>
+        </Box>
+        <Marquee
+          play={!open}
+          autoFill
+          direction="right"
+          speed={60}
+          pauseOnHover
+          style={{
+            padding: '0.5rem 0',
+            maskImage:
+              'linear-gradient(to right,transparent,black,black,black,black,black,black,transparent)',
+            WebkitMaskImage:
+              'linear-gradient(to right,transparent,black,black,black,black,black,black,transparent)',
+          }}
+        >
+          <Organizer
+            name="Anthony Tedja"
+            description="i stare at the 3D model the same way how i look at my fridge"
+            avatar="/team/anthony.webp"
+            emoji="😘"
+            website="https://anthonytedja.com"
+            linkedin="https://linkedin.com/in/anthonytedja"
+            github="https://github.com/anthonytedja"
+          />
+          <Organizer
+            name="Nina Ricci Lu"
+            description="stonks master by day, mcss sugar daddy by night"
+            avatar="/team/nina.webp"
+            emoji="💵"
+            website="https://ninariccilu.com"
+            linkedin="https://linkedin.com/in/ninaricci29"
+          />
+          <Organizer
+            name="Ivan Varquez"
+            description="i'm 5'7 but i tell people i'm 5'3¾ online so they say i look taller in person"
+            avatar="/team/ivan.webp"
+            emoji="☕"
+            website="https://varquezi.com"
+            linkedin="https://linkedin.com/in/ivanvarquez"
+            github="https://github.com/varquezi"
+          />
+          <Organizer
+            name="Srishti Gangolly"
+            description="silly, goofy, here for giggles"
+            avatar="/team/srishti.webp"
+            emoji="😜"
+            linkedin="https://linkedin.com/in/srishti-gangolly"
+          />
+          <Organizer
+            name="Shiva Mulwani"
+            description="money don't sleep"
+            avatar="/team/shiva.webp"
+            emoji="🤭"
+            website="https://shivamulwani.netlify.app"
+            linkedin="https://linkedin.com/in/shiva-mulwani"
+            github="https://github.com/Multivalence"
+          />
+          <Organizer
+            name="Jasmine Guruparan"
+            description="monke"
+            avatar="/team/jasmine.webp"
+            emoji="⚰️"
+            website="https://www.youtube.com/watch?v=mUk2x4r6hOY"
+            linkedin="https://linkedin.com/in/jasmine-guruparan-625395156"
+          />
+          <Organizer
+            name="Vishnu Manoj"
+            description="too brainy 200 furious"
+            avatar="/team/vishnu.webp"
+            emoji="😁"
+            linkedin="http://linkedin.com/in/vishnumanoj211101"
+          />
+          <Organizer
+            name="Carina Rastarhuyeva"
+            description="girl boss"
+            avatar="/team/carina.webp"
+            emoji="👸"
+            linkedin="https://linkedin.com/in/crastars"
+            github="https://github.com/crastars"
+          />
+          <Organizer
+            name="Akira Takaki"
+            description="professional bag fumbler"
+            avatar="/team/akira.webp"
+            emoji="🥹"
+            website="http://www.akiratakaki.com"
+            linkedin="https://linkedin.com/in/a1t"
+          />
+        </Marquee>
+      </Container>
+      <Suspense>
+        <ModalOrganizer open={open} onClose={() => setOpen(false)} {...organizer} />
+      </Suspense>
+    </>
+  )
+}
+
+export default Team

package.json

@@ -11,11 +11,13 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@babel/core": "^7.0.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.3.2",
     "@mui/icons-material": "^5.14.11",
     "@mui/material": "^5.14.8",
+    "@mui/system": "^5.15.7",
     "@mui/x-data-grid": "^6.18.7",
     "@pmndrs/assets": "^1.6.0",
     "@react-three/drei": "^9.83.8",
@@ -42,10 +44,11 @@
     "qrcode.react": "^3.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-fast-marquee": "^1.6.4",
     "react-hook-form": "^7.48.2",
-    "sass": "^1.66.1",
-    "three": "^0.156.1",
+    "three": "0.155.0",
     "typescript": "5.2.2",
+    "webpack": "^5.9.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {

pages/index.tsx

@@ -13,6 +13,7 @@ import MNModel from '@/components/HomePage/MNModel'
 import Navbar from '@/components/HomePage/Navbar'
 import Sponsors from '@/components/HomePage/Sponsors'
 import Stats from '@/components/HomePage/Stats'
+import Team from '@/components/HomePage/Team'
 import DeerHacksCollage from '@/components/Shared/DeerHacksCollage'
 import FullPageLoader from '@/components/Shared/FullPageLoader'
 import theme from '@/styles/theme'
@@ -116,6 +117,7 @@ const HomePage = () => {
           >
             <DeerHacksCollage />
           </Container>
+          <Team />
         </>
       )}
     </>