From 5555c50d888bae1672a059e51dd3b165988552be Mon Sep 17 00:00:00 2001 From: Anthony Tedja Date: Wed, 14 Feb 2024 23:03:20 -0500 Subject: [PATCH] MCSS-125: Add Team Section Co-authored-by: Hana Dowe --- components/HomePage/ModalOrganizer/index.tsx | 142 +++++ components/HomePage/Navbar/index.tsx | 3 + components/HomePage/Team/index.tsx | 175 ++++++ package.json | 7 +- pages/index.tsx | 2 + public/team/akira.webp | Bin 0 -> 14292 bytes public/team/anthony.webp | Bin 0 -> 14956 bytes public/team/carina.webp | Bin 0 -> 14412 bytes public/team/ivan.webp | Bin 0 -> 13792 bytes public/team/jasmine.webp | Bin 0 -> 14100 bytes public/team/nina.webp | Bin 0 -> 13386 bytes public/team/shiva.webp | Bin 0 -> 13402 bytes public/team/srishti.webp | Bin 0 -> 14548 bytes public/team/vishnu.webp | Bin 0 -> 13436 bytes yarn.lock | 593 ++++++++++++++++--- 15 files changed, 845 insertions(+), 77 deletions(-) create mode 100644 components/HomePage/ModalOrganizer/index.tsx create mode 100644 components/HomePage/Team/index.tsx create mode 100644 public/team/akira.webp create mode 100644 public/team/anthony.webp create mode 100644 public/team/carina.webp create mode 100644 public/team/ivan.webp create mode 100644 public/team/jasmine.webp create mode 100644 public/team/nina.webp create mode 100644 public/team/shiva.webp create mode 100644 public/team/srishti.webp create mode 100644 public/team/vishnu.webp diff --git a/components/HomePage/ModalOrganizer/index.tsx b/components/HomePage/ModalOrganizer/index.tsx new file mode 100644 index 0000000..81aeaaf --- /dev/null +++ b/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 ( + + + + + + + {emoji} + } + > + + + {(website || linkedin || github) && ( + + {website && ( + + + + + + )} + {github && ( + + + + + + )} + {linkedin && ( + + + + + + )} + + )} + + + + {name} + + {description} + + + + ) +} + +export default ModalOrganizer diff --git a/components/HomePage/Navbar/index.tsx b/components/HomePage/Navbar/index.tsx index b4319aa..9c7906a 100644 --- a/components/HomePage/Navbar/index.tsx +++ b/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" >