From 2a5f7e17928429114aca1d18ef2192b178173f91 Mon Sep 17 00:00:00 2001
From: slugb0t <wheresdorian@gmail.com>
Date: Mon, 23 Dec 2024 10:13:03 -0800
Subject: [PATCH 01/10] refactor: :recycle: remove action workflow

---
 .github/workflows/release-please.yml | 19 -------------------
 1 file changed, 19 deletions(-)
 delete mode 100644 .github/workflows/release-please.yml

diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
deleted file mode 100644
index 7112600..0000000
--- a/.github/workflows/release-please.yml
+++ /dev/null
@@ -1,19 +0,0 @@
-name: release-please
-on:
-  push:
-    branches:
-      - main
-  workflow_dispatch:
-
-permissions:
-  contents: write
-  pull-requests: write
-
-jobs:
-  release-please:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: google-github-actions/release-please-action@v3
-        with:
-          release-type: node
-          package-name: aireadi.org

From 585a5ac2ef81cd41c265b08944ea3660db889242 Mon Sep 17 00:00:00 2001
From: slugb0t <wheresdorian@gmail.com>
Date: Mon, 23 Dec 2024 12:13:09 -0800
Subject: [PATCH 02/10] refactor: :recycle: :construction: creating team member
 component

---
 public/data/team.json    |  30 +++
 src/pages/team/index.tsx | 543 +++++++++++++++++++++------------------
 tailwind.config.js       |   5 +
 3 files changed, 330 insertions(+), 248 deletions(-)

diff --git a/public/data/team.json b/public/data/team.json
index d5eedc1..2a8175c 100644
--- a/public/data/team.json
+++ b/public/data/team.json
@@ -16,6 +16,16 @@
       "american-indian-engagement",
       "data-collection"
     ],
+    "education": [
+      { "degree": "MD Internal Medicine", "institution": "" },
+      { "degree": "MS Ophthalmology", "institution": "" },
+      { "degree": "MCR Translational Research", "institution": "" }
+    ],
+    "expertise": [
+      "Translational Medicine",
+      "Research Methodology Training",
+      "Grant Writing"
+    ],
     "social": {
       "website": ["https://fairdataihub.org"],
       "linkedin": "https://linkedin.com/in/bvhpatel",
@@ -34,6 +44,16 @@
     "image": "https://ucarecdn.com/dca922ac-d2dc-4fb4-8c37-5bdc2d5aa768/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
     "moduleImageParams": "-/crop/face/200px150p/",
     "modules": ["data-sharing", "data-sharing", "data-collection"],
+    "education": [
+      { "degree": "MD Internal Medicine", "institution": "" },
+      { "degree": "MS Ophthalmology", "institution": "" },
+      { "degree": "MCR Translational Research", "institution": "" }
+    ],
+    "expertise": [
+      "Translational Medicine",
+      "Research Methodology Training",
+      "Grant Writing"
+    ],
     "social": {
       "website": ["https://sanjaysoundarajan.dev"],
       "github": "https://github.com/megasanjay",
@@ -52,6 +72,16 @@
     "image": "https://ucarecdn.com/a3ed77eb-24bc-4b55-b8f9-118a9d07f760/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
     "moduleImageParams": "-/crop/face/200px200p/",
     "modules": ["data-sharing", "data-collection"],
+    "education": [
+      { "degree": "MD Internal Medicine", "institution": "" },
+      { "degree": "MS Ophthalmology", "institution": "" },
+      { "degree": "MCR Translational Research", "institution": "" }
+    ],
+    "expertise": [
+      "Translational Medicine",
+      "Research Methodology Training",
+      "Grant Writing"
+    ],
     "social": {
       "website": ["https://dorianportillo.dev"],
       "github": "https://github.com/slugb0t",
diff --git a/src/pages/team/index.tsx b/src/pages/team/index.tsx
index 15addd3..5b071bd 100644
--- a/src/pages/team/index.tsx
+++ b/src/pages/team/index.tsx
@@ -1,255 +1,317 @@
 /* eslint-disable @next/next/no-img-element */
-import { Divider } from '@chakra-ui/react';
+import {
+  Grid,
+  GridItem,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+  Tag,
+  useDisclosure,
+  VStack,
+} from '@chakra-ui/react';
 import { SkipNavContent, SkipNavLink } from '@chakra-ui/skip-nav';
+import { motion } from 'framer-motion';
 import { InferGetStaticPropsType } from 'next';
 import Image from 'next/image';
 import { getPlaiceholder } from 'plaiceholder';
-import { AiFillGithub, AiFillLinkedin, AiOutlineTwitter } from 'react-icons/ai';
-import { BiBuildingHouse } from 'react-icons/bi';
-import { BsGlobe, BsMastodon } from 'react-icons/bs';
-import { FaHospitalUser } from 'react-icons/fa';
-import { HiUserGroup } from 'react-icons/hi';
+import { useState } from 'react';
+import { FaLinkedin } from 'react-icons/fa';
 import { IoSchoolSharp } from 'react-icons/io5';
-import { MdLocationOn } from 'react-icons/md';
-import { RiInstagramFill } from 'react-icons/ri';
+import { RiAwardFill } from 'react-icons/ri';
 
 import Layout from '@/components/layout/Layout';
+import UnstyledLink from '@/components/links/UnstyledLink';
 import Seo from '@/components/Seo';
 
+import { FramerContainer } from '@/utils/framer';
+
 import TEAM_JSON from '~/data/team.json';
 
-const TeamPage: React.FC<InferGetStaticPropsType<typeof getStaticProps>> = ({
-  TeamMembers,
-}) => (
-  <>
-    <SkipNavLink>Skip to content</SkipNavLink>
-
-    <Layout>
-      <Seo templateTitle='Meet the Team' />
-
-      <main>
-        <SkipNavContent />
-
-        <section className='bg-white !font-primary'>
-          <div className='mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16'>
-            <div className='mx-auto mb-8 max-w-screen-sm text-center lg:mb-16'>
-              <h1 className='mb-1 text-3xl font-extrabold tracking-tight sm:text-4xl'>
-                Our Team
-              </h1>
-              <p className='mb-6 text-xl font-medium text-slate-600 sm:mb-8'>
-                Meet the people behind the scenes who make it all happen
-              </p>
+interface Member {
+  id: string;
+  name: string;
+  image: string;
+  blurDataURL: string;
+  moduleImageParams: string;
+  education: { degree: string; institution: string }[];
+  expertise: string[];
+  about: string;
+  after: string;
+  social: {
+    linkedin?: string;
+    resume?: string;
+    medprofile?: string;
+    website?: string[];
+    twitter?: string;
+    instagram?: string;
+    github?: string;
+  };
+}
+
+const MembersGrid: React.FC<{
+  members: Member[];
+  openModal: (scholarId: string) => void;
+}> = ({ members, openModal }) => {
+  return (
+    <motion.div
+      variants={FramerContainer}
+      initial='hidden'
+      whileInView='show'
+      viewport={{ once: true }}
+      className='align-center mx-auto grid max-w-screen-xl gap-8 px-4 pb-8 pt-4 text-center sm:grid-cols-2 md:grid-cols-3 lg:gap-8 lg:px-6 lg:pb-16 lg:pt-8'
+    >
+      {members.map((scholar) => (
+        <motion.div
+          // variants={FadeFramerItem}
+          key={scholar.id + Math.random()}
+          id={scholar.id}
+          onClick={() => openModal(scholar.id)}
+          className='parent hover:child:shadow-xl flex h-full flex-col items-center justify-between rounded-lg border-solid bg-slate-50 px-4 py-4 transition-all hover:shadow-xl'
+        >
+          <div key={scholar.name} className='w-full'>
+            {/* {scholar.tag.length > 0 ? (
+              <Wrap>
+                {scholar.tag.map((tag) => (
+                  <WrapItem key={tag}>
+                    <Badge
+                      className='mb-2'
+                      colorScheme={tag === '#OpenToWork' ? 'teal' : 'cyan'}
+                      fontSize='0.7em'
+                      variant='outline'
+                    >
+                      {tag}
+                    </Badge>
+                  </WrapItem>
+                ))}
+              </Wrap>
+            ) : (
+              <div className='mb-2 h-[18px]'></div>
+            )} */}
+
+            <div className='relative mx-auto mb-2 min-h-[350px] w-full sm:min-h-[500px]'>
+              <Image
+                src={`${scholar.image}${
+                  scholar.moduleImageParams != ''
+                    ? scholar.moduleImageParams
+                    : ''
+                }`}
+                alt={scholar.name + ' image'}
+                fill
+                placeholder='blur'
+                blurDataURL={scholar.blurDataURL}
+                className='child h-full w-full rounded-lg object-cover object-center'
+                sizes='(max-width: 768px) 100vw, 50vw'
+              />
+              <div className='relative left-[-5px] top-[434px] px-4'>
+                <h3 className='relative pb-1 text-left text-2xl font-extrabold text-white'>
+                  {scholar.name}
+                </h3>
+
+                <Grid templateColumns='repeat(10, 1fr)' className='relative'>
+                  <GridItem>
+                    <IoSchoolSharp size={20} style={{ color: 'white' }} />
+                  </GridItem>
+
+                  <GridItem colSpan={9}>
+                    <p className='mb-2 ml-2 text-left font-semibold text-white'>
+                      {scholar.education[0].degree}
+                    </p>
+                  </GridItem>
+
+                  {/* <GridItem>
+                <RiAwardFill size={20} />
+              </GridItem> */}
+
+                  {/* <GridItem colSpan={9}>
+                <Wrap>
+                  {scholar.expertise.map((expertise, index) => (
+                    <WrapItem key={index}>
+                      <Tag colorScheme='blue' size='sm'>
+                        {expertise}
+                      </Tag>
+                    </WrapItem>
+                  ))}
+                </Wrap>
+              </GridItem> */}
+                </Grid>
+              </div>
             </div>
 
-            <div className='grid grid-cols-1 gap-6 lg:grid-cols-2'>
-              {TeamMembers.map((member, index) => (
-                <div
-                  className='flex w-full flex-col items-start overflow-hidden rounded-lg bg-gray-50 shadow-lg md:flex-row'
-                  key={member.name}
-                  id={member.id}
-                >
-                  <div className='relative h-full min-h-[500px] w-full md:min-h-fit md:w-[45%]'>
-                    <Image
-                      src={member.image}
-                      alt='user profile picture'
-                      fill
-                      placeholder='blur'
-                      priority={index < 6}
-                      blurDataURL={member.blurDataURL}
-                      className='h-full w-full object-cover object-top md:object-center'
-                      sizes='(max-width: 768px) 100vw, 50vw'
-                    />
-                  </div>
-
-                  <div className='w-full px-6 py-8 text-left md:w-[55%] md:p-4'>
-                    <h3 className='text-xl font-extrabold text-gray-900'>
-                      {member.name}{' '}
-                      {member.pronoun && (
-                        <span className='text-large font-medium text-gray-600'>
-                          ({member.pronoun})
-                        </span>
-                      )}
-                    </h3>
-
-                    {member.roles.map((role, index) => (
-                      <p className='font-semibold' key={index}>
-                        {role}
-                      </p>
-                    ))}
-
-                    <Divider className='my-1' />
-
-                    <div className='my-2'>
-                      {member.department && (
-                        <div className='my-1 flex items-start font-medium text-gray-600'>
-                          <div className='mt-1 h-[20px] w-[20px]'>
-                            <IoSchoolSharp size={20} />
-                          </div>
-                          <p className='ml-2'>{member.department}</p>
-                        </div>
-                      )}
-
-                      {member.organization && (
-                        <div className='my-1 flex items-start font-semibold text-sky-700'>
-                          <div className='mt-1 h-[20px] w-[20px]'>
-                            <BiBuildingHouse size={20} />
-                          </div>
-                          <p className='ml-2'>{member.organization}</p>
-                        </div>
-                      )}
-                    </div>
-
-                    <div className='mb-3 flex items-center font-semibold text-slate-600'>
-                      <MdLocationOn size={20} />
-                      <p className='ml-2'>{member.location}</p>
-                    </div>
-
-                    <Divider />
-
-                    <p className='mb-1 mt-3 px-1 text-lg md:text-base'>
-                      {member.caption}
-                    </p>
+            {/* <Button
+              size='sm'
+              colorScheme='teal'
+              className='mt-5 place-content-end'
+              rightIcon={<BsPlusCircleDotted />}
+              onClick={() => openModal(scholar.id)}
+            >
+              Expand
+            </Button> */}
+          </div>
+        </motion.div>
+      ))}
+    </motion.div>
+  );
+};
 
-                    {/* <Divider className='my-2' /> */}
+const ScholarsPage: React.FC<
+  InferGetStaticPropsType<typeof getStaticProps>
+> = ({ AllMembers }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [selectedScholar, setSelectedScholar] = useState<Member | null>(null);
 
-                    {/* <ModulesSection modules={member.modules} /> */}
+  const openModal = (scholarid: string) => {
+    const scholar = AllMembers.find((scholar) => scholar.id === scholarid);
 
-                    {Object.keys(member.social).length > 0 && (
-                      <Divider className='my-2' />
-                    )}
+    if (!scholar) {
+      return;
+    }
 
-                    <ul className='flex space-x-3 sm:mt-0'>
-                      {'twitter' in member.social && (
-                        <li className='flex items-center justify-center text-gray-500 transition-all hover:text-sky-600'>
-                          <a
-                            href={member.social.twitter}
-                            rel='noopener noreferrer'
-                            target='_blank'
-                            className='cursor-newtab'
-                          >
-                            <AiOutlineTwitter size={25} />
-                            <span className='sr-only'> Twitter page </span>
-                          </a>
-                        </li>
-                      )}
-
-                      {'mastodon' in member.social && (
-                        <li className='flex items-center justify-center text-gray-500 transition-all hover:text-sky-600'>
-                          <a
-                            href={member.social.mastodon as string | undefined}
-                            rel='noopener noreferrer'
-                            target='_blank'
-                            className='cursor-newtab'
-                          >
-                            <BsMastodon size={20} />
-                            <span className='sr-only'> mastodon page </span>
-                          </a>
-                        </li>
-                      )}
-
-                      {'instagram' in member.social && (
-                        <li className='flex items-center justify-center text-gray-500 transition-all hover:text-sky-600'>
-                          <a
-                            href={member.social.instagram as string}
-                            rel='noopener noreferrer'
-                            target='_blank'
-                            className='cursor-newtab'
-                          >
-                            <RiInstagramFill size={20} />
-                            <span className='sr-only'> instagram page </span>
-                          </a>
-                        </li>
-                      )}
-
-                      {'github' in member.social && (
-                        <li className='flex items-center justify-center text-gray-500 transition-all hover:text-sky-600'>
-                          <a
-                            href={member.social.github}
-                            rel='noopener noreferrer'
-                            target='_blank'
-                            className='cursor-newtab'
-                          >
-                            <AiFillGithub size={25} />
-                            <span className='sr-only'> Github page </span>
-                          </a>
-                        </li>
-                      )}
-
-                      {'linkedin' in member.social && (
-                        <li className='flex items-center justify-center text-gray-500 transition-all hover:text-sky-600'>
-                          <a
-                            href={member.social.linkedin}
-                            rel='noopener noreferrer'
-                            target='_blank'
-                            className='cursor-newtab'
-                          >
-                            <AiFillLinkedin size={25} />
-                            <span className='sr-only'> Linkedin </span>
-                          </a>
-                        </li>
-                      )}
-
-                      {'profiles' in member.social && (
-                        <li className='flex items-center justify-center text-gray-500 transition-all hover:text-sky-600'>
-                          <a
-                            href={member.social.profiles as string | undefined}
-                            rel='noopener noreferrer'
-                            target='_blank'
-                            className='cursor-newtab'
-                          >
-                            <HiUserGroup size={20} />
-                            <span className='sr-only'> website </span>
-                          </a>
-                        </li>
-                      )}
-
-                      {'medprofile' in member.social && (
-                        <li className='flex items-center justify-center text-gray-500 transition-all hover:text-sky-600'>
-                          <a
-                            href={
-                              member.social.medprofile as string | undefined
-                            }
-                            rel='noopener noreferrer'
-                            target='_blank'
-                            className='cursor-newtab'
-                          >
-                            <FaHospitalUser size={22} />
-                            <span className='sr-only'> website </span>
-                          </a>
-                        </li>
-                      )}
-
-                      {'website' in member.social &&
-                        member.social.website?.map((website: string) => (
-                          <li
-                            className='flex items-center justify-center text-gray-500 transition-all hover:text-sky-600'
-                            key={website}
-                          >
-                            <a
-                              href={website}
-                              rel='noopener noreferrer'
-                              target='_blank'
-                              className='cursor-newtab'
-                            >
-                              <BsGlobe size={20} />
-                              <span className='sr-only'> website </span>
-                            </a>
+    setSelectedScholar(scholar);
+
+    onOpen();
+  };
+
+  return (
+    <>
+      <SkipNavLink>Skip to content</SkipNavLink>
+
+      <Layout>
+        <Seo templateTitle='Scholars' />
+
+        <main>
+          <SkipNavContent />
+
+          <h2 className='pt-8 text-center text-3xl font-extrabold tracking-tight sm:text-4xl lg:pt-16'>
+            Meet the Team
+          </h2>
+
+          <MembersGrid members={AllMembers} openModal={openModal} />
+
+          <Modal isOpen={isOpen} onClose={onClose} isCentered size='3xl'>
+            <ModalOverlay />
+            <ModalContent>
+              <ModalCloseButton />
+              <ModalBody>
+                <Grid
+                  templateColumns='repeat(10, 1fr)'
+                  gap={6}
+                  className='px-2 py-3'
+                >
+                  <GridItem colSpan={4}>
+                    <VStack spacing={4} align='stretch'>
+                      <img
+                        src={selectedScholar?.image}
+                        alt={selectedScholar?.name}
+                        className='h-full w-full rounded-lg object-cover object-center'
+                      />
+
+                      <Grid templateColumns='repeat(10, 1fr)' rowGap={3}>
+                        {'linkedin' in (selectedScholar?.social || {}) && (
+                          <>
+                            <GridItem>
+                              <div className='my-auto flex items-center'>
+                                <FaLinkedin size={20} />
+                              </div>
+                            </GridItem>
+
+                            <GridItem colSpan={9}>
+                              <UnstyledLink
+                                href={selectedScholar?.social.linkedin || ''}
+                                className='ml-2 text-left font-semibold text-slate-600'
+                              >
+                                LinkedIn Profile
+                              </UnstyledLink>
+                            </GridItem>
+                          </>
+                        )}
+
+                        {'resume' in (selectedScholar?.social || {}) && (
+                          <>
+                            <GridItem>
+                              <RiAwardFill size={20} />
+                            </GridItem>
+
+                            <GridItem colSpan={9}>
+                              <UnstyledLink
+                                href={selectedScholar?.social.resume || ''}
+                                className='ml-2 text-left font-semibold text-slate-600'
+                              >
+                                Resume
+                              </UnstyledLink>
+                            </GridItem>
+                          </>
+                        )}
+                      </Grid>
+                    </VStack>
+                  </GridItem>
+
+                  <GridItem colSpan={6}>
+                    <VStack align='stretch'>
+                      <h2 className='text-2xl font-bold text-slate-800'>
+                        {selectedScholar?.name}
+                      </h2>
+
+                      <h3 className='text-lg font-semibold text-slate-700'>
+                        Education
+                      </h3>
+
+                      <ul>
+                        {selectedScholar?.education.map((edu, index) => (
+                          <li key={index} className='text-base font-normal'>
+                            {edu.degree}{' '}
+                            {edu.institution && <>({edu.institution})</>}
                           </li>
                         ))}
-                    </ul>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </section>
-      </main>
-    </Layout>
-  </>
-);
+                      </ul>
+
+                      <h3 className='text-lg font-semibold text-slate-700'>
+                        Expertise
+                      </h3>
+
+                      <p>
+                        {selectedScholar?.expertise.map((expertise, index) => (
+                          <Tag
+                            key={index}
+                            colorScheme='blue'
+                            size='sm'
+                            className='mr-2'
+                          >
+                            {expertise}
+                          </Tag>
+                        ))}
+                      </p>
+
+                      <h3 className='text-lg font-semibold text-slate-700'>
+                        About Me
+                      </h3>
+
+                      <p className='text-base font-normal text-slate-600'>
+                        {selectedScholar?.about}
+                      </p>
+
+                      <h3 className='text-lg font-semibold text-slate-700'>
+                        After AI-READI
+                      </h3>
+
+                      <p className='text-base font-normal text-slate-600'>
+                        {selectedScholar?.after}
+                      </p>
+                    </VStack>
+                  </GridItem>
+                </Grid>
+              </ModalBody>
+            </ModalContent>
+          </Modal>
+        </main>
+      </Layout>
+    </>
+  );
+};
 
 export const getStaticProps = async () => {
-  const TeamMembers = await Promise.all(
+  const AllMembers = await Promise.all(
     TEAM_JSON.map(async (member) => {
       const {
         base64,
@@ -267,7 +329,7 @@ export const getStaticProps = async () => {
   ).then((values) => values);
 
   // sort by name
-  TeamMembers.sort((a, b) => {
+  AllMembers.sort((a, b) => {
     if (a.name < b.name) {
       return -1;
     }
@@ -279,26 +341,11 @@ export const getStaticProps = async () => {
     return 0;
   });
 
-  // sort modules by name
-  TeamMembers.forEach((member) => {
-    member.modules.sort((a, b) => {
-      if (a < b) {
-        return -1;
-      }
-
-      if (a > b) {
-        return 1;
-      }
-
-      return 0;
-    });
-  });
-
   return {
     props: {
-      TeamMembers,
+      AllMembers,
     },
   };
 };
 
-export default TeamPage;
+export default ScholarsPage;
diff --git a/tailwind.config.js b/tailwind.config.js
index 79c01eb..725f5a6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -59,6 +59,11 @@ module.exports = {
       },
     },
   },
+  variants: {
+    extend: {
+      boxShadow: ['hover', 'hover:child'],
+    },
+  },
   plugins: [
     require('@tailwindcss/forms'),
     require('@tailwindcss/typography'),

From d42fa9438bb233aa8193c2eab7d30986655a9826 Mon Sep 17 00:00:00 2001
From: slugb0t <wheresdorian@gmail.com>
Date: Mon, 23 Dec 2024 12:16:00 -0800
Subject: [PATCH 03/10] fix: :bug: type issue definition

---
 public/data/team.json    | 6 +++---
 src/pages/team/index.tsx | 9 ---------
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/public/data/team.json b/public/data/team.json
index 2a8175c..46c1afe 100644
--- a/public/data/team.json
+++ b/public/data/team.json
@@ -7,7 +7,7 @@
     "department": "FAIR Data Innovations Hub",
     "organization": "California Medical Innovations Institute",
     "location": "San Diego, CA",
-    "caption": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo.",
+    "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo.",
     "image": "https://ucarecdn.com/b36da179-1c47-4fa9-9e9b-9001ffc9b869/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
     "moduleImageParams": "-/crop/face/200px180p/",
     "modules": [
@@ -40,7 +40,7 @@
     "department": "FAIR Data Innovations Hub",
     "organization": "California Medical Innovations Institute",
     "location": "San Diego, CA",
-    "caption": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. ",
+    "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. ",
     "image": "https://ucarecdn.com/dca922ac-d2dc-4fb4-8c37-5bdc2d5aa768/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
     "moduleImageParams": "-/crop/face/200px150p/",
     "modules": ["data-sharing", "data-sharing", "data-collection"],
@@ -68,7 +68,7 @@
     "department": "FAIR Data Innovations Hub",
     "organization": "California Medical Innovations Institute",
     "location": "San Bernardino, CA",
-    "caption": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. ",
+    "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. ",
     "image": "https://ucarecdn.com/a3ed77eb-24bc-4b55-b8f9-118a9d07f760/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
     "moduleImageParams": "-/crop/face/200px200p/",
     "modules": ["data-sharing", "data-collection"],
diff --git a/src/pages/team/index.tsx b/src/pages/team/index.tsx
index 5b071bd..ae110bd 100644
--- a/src/pages/team/index.tsx
+++ b/src/pages/team/index.tsx
@@ -38,7 +38,6 @@ interface Member {
   education: { degree: string; institution: string }[];
   expertise: string[];
   about: string;
-  after: string;
   social: {
     linkedin?: string;
     resume?: string;
@@ -290,14 +289,6 @@ const ScholarsPage: React.FC<
                       <p className='text-base font-normal text-slate-600'>
                         {selectedScholar?.about}
                       </p>
-
-                      <h3 className='text-lg font-semibold text-slate-700'>
-                        After AI-READI
-                      </h3>
-
-                      <p className='text-base font-normal text-slate-600'>
-                        {selectedScholar?.after}
-                      </p>
                     </VStack>
                   </GridItem>
                 </Grid>

From b293ed4779f6bbe582b053e37180cf290e71275a Mon Sep 17 00:00:00 2001
From: slugb0t <wheresdorian@gmail.com>
Date: Thu, 26 Dec 2024 00:29:57 -0800
Subject: [PATCH 04/10] feat: :sparkles: team page component

---
 public/data/team.json    |  6 +--
 src/pages/team/index.tsx | 87 +++++++++++++++++-----------------------
 2 files changed, 40 insertions(+), 53 deletions(-)

diff --git a/public/data/team.json b/public/data/team.json
index 46c1afe..bbc39da 100644
--- a/public/data/team.json
+++ b/public/data/team.json
@@ -9,7 +9,7 @@
     "location": "San Diego, CA",
     "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo.",
     "image": "https://ucarecdn.com/b36da179-1c47-4fa9-9e9b-9001ffc9b869/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
-    "moduleImageParams": "-/crop/face/200px180p/",
+    "moduleImageParams": "-/crop/face/250px200p/",
     "modules": [
       "data-sharing",
       "capacity-building",
@@ -42,7 +42,7 @@
     "location": "San Diego, CA",
     "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. ",
     "image": "https://ucarecdn.com/dca922ac-d2dc-4fb4-8c37-5bdc2d5aa768/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
-    "moduleImageParams": "-/crop/face/200px150p/",
+    "moduleImageParams": "-/crop/face/250px200p/",
     "modules": ["data-sharing", "data-sharing", "data-collection"],
     "education": [
       { "degree": "MD Internal Medicine", "institution": "" },
@@ -70,7 +70,7 @@
     "location": "San Bernardino, CA",
     "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. ",
     "image": "https://ucarecdn.com/a3ed77eb-24bc-4b55-b8f9-118a9d07f760/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
-    "moduleImageParams": "-/crop/face/200px200p/",
+    "moduleImageParams": "-/crop/face/250px250p/",
     "modules": ["data-sharing", "data-collection"],
     "education": [
       { "degree": "MD Internal Medicine", "institution": "" },
diff --git a/src/pages/team/index.tsx b/src/pages/team/index.tsx
index ae110bd..9cb5694 100644
--- a/src/pages/team/index.tsx
+++ b/src/pages/team/index.tsx
@@ -63,14 +63,12 @@ const MembersGrid: React.FC<{
     >
       {members.map((scholar) => (
         <motion.div
-          // variants={FadeFramerItem}
+          className='transform items-center justify-between transition-transform hover:translate-y-[0px] hover:scale-105 hover:shadow-2xl'
           key={scholar.id + Math.random()}
           id={scholar.id}
           onClick={() => openModal(scholar.id)}
-          className='parent hover:child:shadow-xl flex h-full flex-col items-center justify-between rounded-lg border-solid bg-slate-50 px-4 py-4 transition-all hover:shadow-xl'
         >
-          <div key={scholar.name} className='w-full'>
-            {/* {scholar.tag.length > 0 ? (
+          {/* {scholar.tag.length > 0 ? (
               <Wrap>
                 {scholar.tag.map((tag) => (
                   <WrapItem key={tag}>
@@ -88,42 +86,42 @@ const MembersGrid: React.FC<{
             ) : (
               <div className='mb-2 h-[18px]'></div>
             )} */}
-
-            <div className='relative mx-auto mb-2 min-h-[350px] w-full sm:min-h-[500px]'>
-              <Image
-                src={`${scholar.image}${
-                  scholar.moduleImageParams != ''
-                    ? scholar.moduleImageParams
-                    : ''
-                }`}
-                alt={scholar.name + ' image'}
-                fill
-                placeholder='blur'
-                blurDataURL={scholar.blurDataURL}
-                className='child h-full w-full rounded-lg object-cover object-center'
-                sizes='(max-width: 768px) 100vw, 50vw'
-              />
-              <div className='relative left-[-5px] top-[434px] px-4'>
-                <h3 className='relative pb-1 text-left text-2xl font-extrabold text-white'>
-                  {scholar.name}
-                </h3>
-
-                <Grid templateColumns='repeat(10, 1fr)' className='relative'>
-                  <GridItem>
-                    <IoSchoolSharp size={20} style={{ color: 'white' }} />
-                  </GridItem>
-
-                  <GridItem colSpan={9}>
-                    <p className='mb-2 ml-2 text-left font-semibold text-white'>
-                      {scholar.education[0].degree}
-                    </p>
-                  </GridItem>
-
-                  {/* <GridItem>
+          <div className='relative mx-auto min-h-[350px] w-full sm:min-h-[500px]'>
+            <Image
+              src={`${scholar.image}${
+                scholar.moduleImageParams != '' ? scholar.moduleImageParams : ''
+              }`}
+              alt={scholar.name + ' image'}
+              fill
+              placeholder='blur'
+              blurDataURL={scholar.blurDataURL}
+              className='child h-full w-full rounded-lg object-cover object-center'
+              sizes='(max-width: 768px) 100vw, 50vw'
+            />
+            <div className='relative left-[-6px] top-[431px] px-2'>
+              <h3 className='relative bg-[radial-gradient(circle_at_40%_0%,rgba(0,0,0,0.8),transparent)] pb-1 pl-4 text-left text-2xl font-extrabold text-white'>
+                {scholar.name}
+              </h3>
+
+              <Grid
+                templateColumns='repeat(10, 1fr)'
+                className='relative bg-[radial-gradient(circle_at_40%_0%,rgba(0,0,0,0.8),transparent)] pl-4'
+              >
+                <GridItem>
+                  <IoSchoolSharp size={20} style={{ color: 'white' }} />
+                </GridItem>
+
+                <GridItem colSpan={9}>
+                  <p className='mb-2 text-left font-semibold text-white'>
+                    {scholar.education[0].degree}
+                  </p>
+                </GridItem>
+
+                {/* <GridItem>
                 <RiAwardFill size={20} />
               </GridItem> */}
 
-                  {/* <GridItem colSpan={9}>
+                {/* <GridItem colSpan={9}>
                 <Wrap>
                   {scholar.expertise.map((expertise, index) => (
                     <WrapItem key={index}>
@@ -134,19 +132,8 @@ const MembersGrid: React.FC<{
                   ))}
                 </Wrap>
               </GridItem> */}
-                </Grid>
-              </div>
+              </Grid>
             </div>
-
-            {/* <Button
-              size='sm'
-              colorScheme='teal'
-              className='mt-5 place-content-end'
-              rightIcon={<BsPlusCircleDotted />}
-              onClick={() => openModal(scholar.id)}
-            >
-              Expand
-            </Button> */}
           </div>
         </motion.div>
       ))}
@@ -188,7 +175,7 @@ const ScholarsPage: React.FC<
 
           <MembersGrid members={AllMembers} openModal={openModal} />
 
-          <Modal isOpen={isOpen} onClose={onClose} isCentered size='3xl'>
+          <Modal isOpen={isOpen} onClose={onClose} isCentered size='4xl'>
             <ModalOverlay />
             <ModalContent>
               <ModalCloseButton />

From e13c441b635b13bb910d54f750ec44b21233c252 Mon Sep 17 00:00:00 2001
From: slugb0t <wheresdorian@gmail.com>
Date: Thu, 26 Dec 2024 12:01:34 -0800
Subject: [PATCH 05/10] feat: :sparkles: socials update

---
 public/data/team.json    |  92 +++++++++++++++++++
 src/pages/team/index.tsx | 194 +++++++++++++++++++++++++++++----------
 2 files changed, 239 insertions(+), 47 deletions(-)

diff --git a/public/data/team.json b/public/data/team.json
index bbc39da..46bc586 100644
--- a/public/data/team.json
+++ b/public/data/team.json
@@ -87,5 +87,97 @@
       "github": "https://github.com/slugb0t",
       "linkedin": "https://www.linkedin.com/in/dorian-portillo-4733b61b5/"
     }
+  },
+  {
+    "id": "Bhavesh-Patel1",
+    "name": "Bhavesh Patel",
+    "pronoun": "he/him",
+    "roles": ["Associate Research Professor"],
+    "department": "FAIR Data Innovations Hub",
+    "organization": "California Medical Innovations Institute",
+    "location": "San Diego, CA",
+    "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo.",
+    "image": "https://ucarecdn.com/b36da179-1c47-4fa9-9e9b-9001ffc9b869/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
+    "moduleImageParams": "-/crop/face/250px200p/",
+    "modules": [
+      "data-sharing",
+      "capacity-building",
+      "american-indian-engagement",
+      "data-collection"
+    ],
+    "education": [
+      { "degree": "MD Internal Medicine", "institution": "" },
+      { "degree": "MS Ophthalmology", "institution": "" },
+      { "degree": "MCR Translational Research", "institution": "" }
+    ],
+    "expertise": [
+      "Translational Medicine",
+      "Research Methodology Training",
+      "Grant Writing"
+    ],
+    "social": {
+      "website": ["https://fairdataihub.org"],
+      "linkedin": "https://linkedin.com/in/bvhpatel",
+      "twitter": "https://twitter.com/fairdataihub",
+      "resume": "https://fairdataihub.org/resume",
+      "instagram": "https://instagram.com/fairdataihub",
+      "github": "https://github.com/slugb0t"
+    }
+  },
+  {
+    "id": "Sanjay-Soundarajan1",
+    "name": "Sanjay Soundarajan",
+    "pronoun": "he/him",
+    "roles": ["Front End Developer"],
+    "department": "FAIR Data Innovations Hub",
+    "organization": "California Medical Innovations Institute",
+    "location": "San Diego, CA",
+    "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. ",
+    "image": "https://ucarecdn.com/dca922ac-d2dc-4fb4-8c37-5bdc2d5aa768/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
+    "moduleImageParams": "-/crop/face/250px200p/",
+    "modules": ["data-sharing", "data-sharing", "data-collection"],
+    "education": [
+      { "degree": "MD Internal Medicine", "institution": "" },
+      { "degree": "MS Ophthalmology", "institution": "" },
+      { "degree": "MCR Translational Research", "institution": "" }
+    ],
+    "expertise": [
+      "Translational Medicine",
+      "Research Methodology Training",
+      "Grant Writing"
+    ],
+    "social": {
+      "website": ["https://sanjaysoundarajan.dev"],
+      "github": "https://github.com/megasanjay",
+      "twitter": "https://twitter.com/megasanjay"
+    }
+  },
+  {
+    "id": "Dorian-Portillo1",
+    "name": "Dorian Portillo",
+    "pronoun": "they/them",
+    "roles": ["Web Developer"],
+    "department": "FAIR Data Innovations Hub",
+    "organization": "California Medical Innovations Institute",
+    "location": "San Bernardino, CA",
+    "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. ",
+    "image": "https://ucarecdn.com/a3ed77eb-24bc-4b55-b8f9-118a9d07f760/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
+    "moduleImageParams": "-/crop/face/250px250p/",
+    "modules": ["data-sharing", "data-collection"],
+    "education": [
+      { "degree": "MD Internal Medicine", "institution": "" },
+      { "degree": "MS Ophthalmology", "institution": "" },
+      { "degree": "MCR Translational Research", "institution": "" }
+    ],
+    "expertise": [
+      "Translational Medicine",
+      "Research Methodology Training",
+      "Grant Writing"
+    ],
+    "social": {
+      "website": ["https://dorianportillo.dev"],
+      "github": "https://github.com/slugb0t",
+      "linkedin": "https://www.linkedin.com/in/dorian-portillo-4733b61b5/"
+    }
   }
 ]
diff --git a/src/pages/team/index.tsx b/src/pages/team/index.tsx
index 9cb5694..46390d7 100644
--- a/src/pages/team/index.tsx
+++ b/src/pages/team/index.tsx
@@ -17,8 +17,16 @@ import { InferGetStaticPropsType } from 'next';
 import Image from 'next/image';
 import { getPlaiceholder } from 'plaiceholder';
 import { useState } from 'react';
-import { FaLinkedin } from 'react-icons/fa';
+import {
+  FaGithub,
+  FaGlobe,
+  FaInstagram,
+  FaLinkedin,
+  FaTwitter,
+} from 'react-icons/fa';
+import { FaCircleInfo } from 'react-icons/fa6';
 import { IoSchoolSharp } from 'react-icons/io5';
+import { MdOutlineBadge } from 'react-icons/md';
 import { RiAwardFill } from 'react-icons/ri';
 
 import Layout from '@/components/layout/Layout';
@@ -175,7 +183,7 @@ const ScholarsPage: React.FC<
 
           <MembersGrid members={AllMembers} openModal={openModal} />
 
-          <Modal isOpen={isOpen} onClose={onClose} isCentered size='4xl'>
+          <Modal isOpen={isOpen} onClose={onClose} isCentered size='6xl'>
             <ModalOverlay />
             <ModalContent>
               <ModalCloseButton />
@@ -183,97 +191,189 @@ const ScholarsPage: React.FC<
                 <Grid
                   templateColumns='repeat(10, 1fr)'
                   gap={6}
-                  className='px-2 py-3'
+                  className='px-4 py-6'
                 >
+                  {/* Left Section */}
                   <GridItem colSpan={4}>
                     <VStack spacing={4} align='stretch'>
                       <img
                         src={selectedScholar?.image}
                         alt={selectedScholar?.name}
-                        className='h-full w-full rounded-lg object-cover object-center'
+                        className='h-full w-full rounded-lg object-cover object-center shadow-md'
                       />
-
-                      <Grid templateColumns='repeat(10, 1fr)' rowGap={3}>
+                      <Grid templateColumns='repeat(10, 1fr)' rowGap={4}>
                         {'linkedin' in (selectedScholar?.social || {}) && (
                           <>
                             <GridItem>
-                              <div className='my-auto flex items-center'>
-                                <FaLinkedin size={20} />
+                              <div className='flex items-center'>
+                                <UnstyledLink
+                                  href={selectedScholar?.social.linkedin || ''}
+                                  target='_blank'
+                                  rel='noopener noreferrer'
+                                  className='ml-2 text-left font-semibold text-blue-600 hover:text-blue-800'
+                                >
+                                  <FaLinkedin size={22} />
+                                </UnstyledLink>
+                              </div>
+                            </GridItem>
+                          </>
+                        )}
+                        {'resume' in (selectedScholar?.social || {}) && (
+                          <>
+                            {/* <GridItem></GridItem> */}
+                            <GridItem colSpan={1}>
+                              <div className='flex items-center'>
+                                <UnstyledLink
+                                  href={selectedScholar?.social.resume || ''}
+                                  target='_blank'
+                                  rel='noopener noreferrer'
+                                  className='ml-2 text-left font-semibold text-[#F9C801] hover:text-[#d0b442]'
+                                >
+                                  <RiAwardFill size={22} />
+                                </UnstyledLink>
                               </div>
                             </GridItem>
+                          </>
+                        )}
 
-                            <GridItem colSpan={9}>
-                              <UnstyledLink
-                                href={selectedScholar?.social.linkedin || ''}
-                                className='ml-2 text-left font-semibold text-slate-600'
-                              >
-                                LinkedIn Profile
-                              </UnstyledLink>
+                        {'twitter' in (selectedScholar?.social || {}) && (
+                          <>
+                            <GridItem colSpan={1}>
+                              <div className='flex items-center'>
+                                <UnstyledLink
+                                  href={selectedScholar?.social.twitter || ''}
+                                  target='_blank'
+                                  rel='noopener noreferrer'
+                                  className='ml-2 text-left font-semibold text-[#26a7de] hover:text-[#1b95d6]'
+                                >
+                                  <FaTwitter size={22} />
+                                </UnstyledLink>
+                              </div>
                             </GridItem>
                           </>
                         )}
 
-                        {'resume' in (selectedScholar?.social || {}) && (
+                        {'instagram' in (selectedScholar?.social || {}) && (
                           <>
-                            <GridItem>
-                              <RiAwardFill size={20} />
+                            <GridItem colSpan={1}>
+                              <div className='flex items-center'>
+                                <UnstyledLink
+                                  href={selectedScholar?.social.instagram || ''}
+                                  target='_blank'
+                                  rel='noopener noreferrer'
+                                  className='ml-2 text-left font-semibold text-[#e4405f] hover:text-[#ae374d]'
+                                >
+                                  <FaInstagram size={22} />
+                                </UnstyledLink>
+                              </div>
                             </GridItem>
+                          </>
+                        )}
 
-                            <GridItem colSpan={9}>
-                              <UnstyledLink
-                                href={selectedScholar?.social.resume || ''}
-                                className='ml-2 text-left font-semibold text-slate-600'
-                              >
-                                Resume
-                              </UnstyledLink>
+                        {'github' in (selectedScholar?.social || {}) && (
+                          <>
+                            <GridItem colSpan={1}>
+                              <div className='flex items-center'>
+                                <UnstyledLink
+                                  href={selectedScholar?.social.github || ''}
+                                  target='_blank'
+                                  rel='noopener noreferrer'
+                                  className='ml-2 text-left font-semibold text-gray-700 hover:text-gray-900'
+                                >
+                                  <FaGithub size={22} />
+                                </UnstyledLink>
+                              </div>
                             </GridItem>
                           </>
                         )}
+                        {'website' in (selectedScholar?.social || {}) && (
+                          <>
+                            {selectedScholar?.social.website?.map(
+                              (site, index) => (
+                                <GridItem colSpan={1} key={index}>
+                                  <div className='flex items-center'>
+                                    <UnstyledLink
+                                      href={site}
+                                      target='_blank'
+                                      rel='noopener noreferrer'
+                                      className='ml-2 text-left font-semibold text-gray-600 hover:text-gray-900'
+                                    >
+                                      <FaGlobe size={22} />
+                                    </UnstyledLink>
+                                  </div>
+                                </GridItem>
+                              ),
+                            )}
+                          </>
+                        )}
                       </Grid>
                     </VStack>
                   </GridItem>
 
+                  {/* Right Section */}
                   <GridItem colSpan={6}>
                     <VStack align='stretch'>
-                      <h2 className='text-2xl font-bold text-slate-800'>
+                      <h2 className='text-4xl font-extrabold text-slate-900'>
                         {selectedScholar?.name}
                       </h2>
 
-                      <h3 className='text-lg font-semibold text-slate-700'>
-                        Education
-                      </h3>
-
-                      <ul>
+                      {/* Education */}
+                      <div className='mt-4 flex items-center'>
+                        <IoSchoolSharp
+                          size={22}
+                          className='mr-3 text-slate-700'
+                        />
+                        <h3 className='text-xl font-bold text-slate-800'>
+                          Education
+                        </h3>
+                      </div>
+                      <ul className='mt-2 space-y-1'>
                         {selectedScholar?.education.map((edu, index) => (
-                          <li key={index} className='text-base font-normal'>
+                          <li key={index} className='text-lg text-slate-700'>
                             {edu.degree}{' '}
-                            {edu.institution && <>({edu.institution})</>}
+                            {edu.institution && (
+                              <span className='text-slate-600'>
+                                ({edu.institution})
+                              </span>
+                            )}
                           </li>
                         ))}
                       </ul>
 
-                      <h3 className='text-lg font-semibold text-slate-700'>
-                        Expertise
-                      </h3>
-
-                      <p>
+                      {/* Expertise */}
+                      <div className='mt-6 flex items-center'>
+                        <MdOutlineBadge
+                          size={22}
+                          className='mr-3 text-slate-700'
+                        />
+                        <h3 className='text-xl font-bold text-slate-800'>
+                          Expertise
+                        </h3>
+                      </div>
+                      <div className='mt-2 flex flex-wrap gap-2'>
                         {selectedScholar?.expertise.map((expertise, index) => (
                           <Tag
                             key={index}
                             colorScheme='blue'
-                            size='sm'
-                            className='mr-2'
+                            size='lg'
+                            className='rounded-full px-3 py-1 shadow-sm'
                           >
                             {expertise}
                           </Tag>
                         ))}
-                      </p>
-
-                      <h3 className='text-lg font-semibold text-slate-700'>
-                        About Me
-                      </h3>
-
-                      <p className='text-base font-normal text-slate-600'>
+                      </div>
+
+                      {/* About Me */}
+                      <div className='mt-6 flex items-center'>
+                        <FaCircleInfo
+                          size={22}
+                          className='mr-3 text-slate-700'
+                        />
+                        <h3 className='text-xl font-bold text-slate-800'>
+                          About Me
+                        </h3>
+                      </div>
+                      <p className='mt-2 text-lg leading-relaxed text-slate-700'>
                         {selectedScholar?.about}
                       </p>
                     </VStack>

From 1c6fc7e14a5307b333444f0c0ae8123f6b783af2 Mon Sep 17 00:00:00 2001
From: slugb0t <wheresdorian@gmail.com>
Date: Thu, 26 Dec 2024 12:04:00 -0800
Subject: [PATCH 06/10] refactor: :recycle: update team.json

---
 public/data/team.json | 41 ++++++++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/public/data/team.json b/public/data/team.json
index 46bc586..7887677 100644
--- a/public/data/team.json
+++ b/public/data/team.json
@@ -29,7 +29,10 @@
     "social": {
       "website": ["https://fairdataihub.org"],
       "linkedin": "https://linkedin.com/in/bvhpatel",
-      "twitter": "https://twitter.com/fairdataihub"
+      "twitter": "https://twitter.com/fairdataihub",
+      "resume": "https://fairdataihub.org/resume",
+      "instagram": "https://instagram.com/fairdataihub",
+      "github": "https://github.com/slugb0t"
     }
   },
   {
@@ -55,9 +58,12 @@
       "Grant Writing"
     ],
     "social": {
-      "website": ["https://sanjaysoundarajan.dev"],
-      "github": "https://github.com/megasanjay",
-      "twitter": "https://twitter.com/megasanjay"
+      "website": ["https://fairdataihub.org"],
+      "linkedin": "https://linkedin.com/in/bvhpatel",
+      "twitter": "https://twitter.com/fairdataihub",
+      "resume": "https://fairdataihub.org/resume",
+      "instagram": "https://instagram.com/fairdataihub",
+      "github": "https://github.com/slugb0t"
     }
   },
   {
@@ -83,9 +89,12 @@
       "Grant Writing"
     ],
     "social": {
-      "website": ["https://dorianportillo.dev"],
-      "github": "https://github.com/slugb0t",
-      "linkedin": "https://www.linkedin.com/in/dorian-portillo-4733b61b5/"
+      "website": ["https://fairdataihub.org"],
+      "linkedin": "https://linkedin.com/in/bvhpatel",
+      "twitter": "https://twitter.com/fairdataihub",
+      "resume": "https://fairdataihub.org/resume",
+      "instagram": "https://instagram.com/fairdataihub",
+      "github": "https://github.com/slugb0t"
     }
   },
   {
@@ -147,9 +156,12 @@
       "Grant Writing"
     ],
     "social": {
-      "website": ["https://sanjaysoundarajan.dev"],
-      "github": "https://github.com/megasanjay",
-      "twitter": "https://twitter.com/megasanjay"
+      "website": ["https://fairdataihub.org"],
+      "linkedin": "https://linkedin.com/in/bvhpatel",
+      "twitter": "https://twitter.com/fairdataihub",
+      "resume": "https://fairdataihub.org/resume",
+      "instagram": "https://instagram.com/fairdataihub",
+      "github": "https://github.com/slugb0t"
     }
   },
   {
@@ -175,9 +187,12 @@
       "Grant Writing"
     ],
     "social": {
-      "website": ["https://dorianportillo.dev"],
-      "github": "https://github.com/slugb0t",
-      "linkedin": "https://www.linkedin.com/in/dorian-portillo-4733b61b5/"
+      "website": ["https://fairdataihub.org"],
+      "linkedin": "https://linkedin.com/in/bvhpatel",
+      "twitter": "https://twitter.com/fairdataihub",
+      "resume": "https://fairdataihub.org/resume",
+      "instagram": "https://instagram.com/fairdataihub",
+      "github": "https://github.com/slugb0t"
     }
   }
 ]

From 102c6370283b50acfef4fe5d946cc3f8eef274e2 Mon Sep 17 00:00:00 2001
From: slugb0t <wheresdorian@gmail.com>
Date: Thu, 26 Dec 2024 12:45:06 -0800
Subject: [PATCH 07/10] feat: :sparkles: add roles, location, and org

---
 public/data/team.json    |  2 +-
 src/pages/team/index.tsx | 61 +++++++++++++++++++++++++++++++++++-----
 2 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/public/data/team.json b/public/data/team.json
index 7887677..51056a5 100644
--- a/public/data/team.json
+++ b/public/data/team.json
@@ -3,7 +3,7 @@
     "id": "Bhavesh-Patel",
     "name": "Bhavesh Patel",
     "pronoun": "he/him",
-    "roles": ["Associate Research Professor"],
+    "roles": ["Associate Research Professor", "Director"],
     "department": "FAIR Data Innovations Hub",
     "organization": "California Medical Innovations Institute",
     "location": "San Diego, CA",
diff --git a/src/pages/team/index.tsx b/src/pages/team/index.tsx
index 46390d7..a7a8adc 100644
--- a/src/pages/team/index.tsx
+++ b/src/pages/team/index.tsx
@@ -17,6 +17,7 @@ import { InferGetStaticPropsType } from 'next';
 import Image from 'next/image';
 import { getPlaiceholder } from 'plaiceholder';
 import { useState } from 'react';
+import { FaRegBuilding } from 'react-icons/fa';
 import {
   FaGithub,
   FaGlobe,
@@ -26,7 +27,9 @@ import {
 } from 'react-icons/fa';
 import { FaCircleInfo } from 'react-icons/fa6';
 import { IoSchoolSharp } from 'react-icons/io5';
+import { IoLocationOutline } from 'react-icons/io5';
 import { MdOutlineBadge } from 'react-icons/md';
+import { PiUserListBold } from 'react-icons/pi';
 import { RiAwardFill } from 'react-icons/ri';
 
 import Layout from '@/components/layout/Layout';
@@ -41,11 +44,15 @@ interface Member {
   id: string;
   name: string;
   image: string;
+  organization: string;
   blurDataURL: string;
   moduleImageParams: string;
   education: { degree: string; institution: string }[];
-  expertise: string[];
+  expertise?: string[];
   about: string;
+  pronoun?: string;
+  roles?: string[];
+  location?: string;
   social: {
     linkedin?: string;
     resume?: string;
@@ -195,7 +202,7 @@ const ScholarsPage: React.FC<
                 >
                   {/* Left Section */}
                   <GridItem colSpan={4}>
-                    <VStack spacing={4} align='stretch'>
+                    <VStack spacing={4} align='stretch' className='h-full'>
                       <img
                         src={selectedScholar?.image}
                         alt={selectedScholar?.name}
@@ -313,9 +320,49 @@ const ScholarsPage: React.FC<
                   {/* Right Section */}
                   <GridItem colSpan={6}>
                     <VStack align='stretch'>
-                      <h2 className='text-4xl font-extrabold text-slate-900'>
-                        {selectedScholar?.name}
-                      </h2>
+                      <div className='flex flex-col items-center border-b-2 pb-2 align-middle'>
+                        <h2 className='mr-8 flex items-center text-4xl font-extrabold text-slate-900'>
+                          {selectedScholar?.name}
+                          <p className='ml-2 text-lg text-slate-700'>
+                            ({selectedScholar?.pronoun})
+                          </p>
+                        </h2>
+                        {/* Location */}
+                        <div className='flex h-full w-full items-center justify-center'>
+                          <IoLocationOutline
+                            size={22}
+                            className='text-slate-700'
+                          />
+
+                          <p className='ml-2 text-lg text-slate-700'>
+                            {selectedScholar?.location}
+                          </p>
+
+                          <FaRegBuilding
+                            size={22}
+                            className='ml-10 text-slate-700'
+                          />
+
+                          <p className='ml-2 text-lg text-slate-700'>
+                            {selectedScholar?.organization}
+                          </p>
+                        </div>
+                      </div>
+
+                      {/* Roles */}
+                      <div className='mt-2 flex flex-wrap items-center gap-2'>
+                        <PiUserListBold size={26} />
+                        {selectedScholar?.roles?.map((role, index) => (
+                          <Tag
+                            key={index}
+                            colorScheme='green'
+                            size='lg'
+                            className='rounded-full px-3 py-1 shadow-sm'
+                          >
+                            {role}
+                          </Tag>
+                        ))}
+                      </div>
 
                       {/* Education */}
                       <div className='mt-4 flex items-center'>
@@ -341,7 +388,7 @@ const ScholarsPage: React.FC<
                       </ul>
 
                       {/* Expertise */}
-                      <div className='mt-6 flex items-center'>
+                      <div className='mt-4 flex items-center'>
                         <MdOutlineBadge
                           size={22}
                           className='mr-3 text-slate-700'
@@ -351,7 +398,7 @@ const ScholarsPage: React.FC<
                         </h3>
                       </div>
                       <div className='mt-2 flex flex-wrap gap-2'>
-                        {selectedScholar?.expertise.map((expertise, index) => (
+                        {selectedScholar?.expertise?.map((expertise, index) => (
                           <Tag
                             key={index}
                             colorScheme='blue'

From 51e81158ca3553607e16b0767b4719779626bbbc Mon Sep 17 00:00:00 2001
From: slugb0t <wheresdorian@gmail.com>
Date: Thu, 26 Dec 2024 14:45:48 -0800
Subject: [PATCH 08/10] feat: :sparkles: mobile friendly team page + modal
 cleanup

---
 public/data/team.json    |   8 +-
 src/pages/team/index.tsx | 346 +++++++++++++++------------------------
 2 files changed, 134 insertions(+), 220 deletions(-)

diff --git a/public/data/team.json b/public/data/team.json
index 51056a5..749cf68 100644
--- a/public/data/team.json
+++ b/public/data/team.json
@@ -7,7 +7,7 @@
     "department": "FAIR Data Innovations Hub",
     "organization": "California Medical Innovations Institute",
     "location": "San Diego, CA",
-    "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo.",
+    "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo.",
     "image": "https://ucarecdn.com/b36da179-1c47-4fa9-9e9b-9001ffc9b869/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
     "moduleImageParams": "-/crop/face/250px200p/",
     "modules": [
@@ -91,8 +91,6 @@
     "social": {
       "website": ["https://fairdataihub.org"],
       "linkedin": "https://linkedin.com/in/bvhpatel",
-      "twitter": "https://twitter.com/fairdataihub",
-      "resume": "https://fairdataihub.org/resume",
       "instagram": "https://instagram.com/fairdataihub",
       "github": "https://github.com/slugb0t"
     }
@@ -159,9 +157,7 @@
       "website": ["https://fairdataihub.org"],
       "linkedin": "https://linkedin.com/in/bvhpatel",
       "twitter": "https://twitter.com/fairdataihub",
-      "resume": "https://fairdataihub.org/resume",
-      "instagram": "https://instagram.com/fairdataihub",
-      "github": "https://github.com/slugb0t"
+      "resume": "https://fairdataihub.org/resume"
     }
   },
   {
diff --git a/src/pages/team/index.tsx b/src/pages/team/index.tsx
index a7a8adc..f58ea39 100644
--- a/src/pages/team/index.tsx
+++ b/src/pages/team/index.tsx
@@ -78,76 +78,36 @@ const MembersGrid: React.FC<{
     >
       {members.map((scholar) => (
         <motion.div
-          className='transform items-center justify-between transition-transform hover:translate-y-[0px] hover:scale-105 hover:shadow-2xl'
+          className='transform items-center justify-between transition-transform hover:scale-105 hover:shadow-2xl'
           key={scholar.id + Math.random()}
           id={scholar.id}
           onClick={() => openModal(scholar.id)}
         >
-          {/* {scholar.tag.length > 0 ? (
-              <Wrap>
-                {scholar.tag.map((tag) => (
-                  <WrapItem key={tag}>
-                    <Badge
-                      className='mb-2'
-                      colorScheme={tag === '#OpenToWork' ? 'teal' : 'cyan'}
-                      fontSize='0.7em'
-                      variant='outline'
-                    >
-                      {tag}
-                    </Badge>
-                  </WrapItem>
-                ))}
-              </Wrap>
-            ) : (
-              <div className='mb-2 h-[18px]'></div>
-            )} */}
           <div className='relative mx-auto min-h-[350px] w-full sm:min-h-[500px]'>
             <Image
               src={`${scholar.image}${
-                scholar.moduleImageParams != '' ? scholar.moduleImageParams : ''
+                scholar.moduleImageParams !== ''
+                  ? scholar.moduleImageParams
+                  : ''
               }`}
               alt={scholar.name + ' image'}
               fill
               placeholder='blur'
               blurDataURL={scholar.blurDataURL}
-              className='child h-full w-full rounded-lg object-cover object-center'
+              className='h-full w-full rounded-lg object-cover object-center'
               sizes='(max-width: 768px) 100vw, 50vw'
             />
-            <div className='relative left-[-6px] top-[431px] px-2'>
-              <h3 className='relative bg-[radial-gradient(circle_at_40%_0%,rgba(0,0,0,0.8),transparent)] pb-1 pl-4 text-left text-2xl font-extrabold text-white'>
+            {/* Text overlay */}
+            <div className='absolute bottom-0 left-0 w-full rounded-b-lg bg-gradient-to-t from-black/80 to-transparent p-4'>
+              <h3 className='text-left text-2xl font-extrabold text-white'>
                 {scholar.name}
               </h3>
-
-              <Grid
-                templateColumns='repeat(10, 1fr)'
-                className='relative bg-[radial-gradient(circle_at_40%_0%,rgba(0,0,0,0.8),transparent)] pl-4'
-              >
-                <GridItem>
-                  <IoSchoolSharp size={20} style={{ color: 'white' }} />
-                </GridItem>
-
-                <GridItem colSpan={9}>
-                  <p className='mb-2 text-left font-semibold text-white'>
-                    {scholar.education[0].degree}
-                  </p>
-                </GridItem>
-
-                {/* <GridItem>
-                <RiAwardFill size={20} />
-              </GridItem> */}
-
-                {/* <GridItem colSpan={9}>
-                <Wrap>
-                  {scholar.expertise.map((expertise, index) => (
-                    <WrapItem key={index}>
-                      <Tag colorScheme='blue' size='sm'>
-                        {expertise}
-                      </Tag>
-                    </WrapItem>
-                  ))}
-                </Wrap>
-              </GridItem> */}
-              </Grid>
+              <div className='mt-2 flex items-center'>
+                <IoSchoolSharp size={20} style={{ color: 'white' }} />
+                <p className='ml-2 text-sm font-semibold text-white'>
+                  {scholar.education[0].degree}
+                </p>
+              </div>
             </div>
           </div>
         </motion.div>
@@ -196,161 +156,126 @@ const ScholarsPage: React.FC<
               <ModalCloseButton />
               <ModalBody>
                 <Grid
-                  templateColumns='repeat(10, 1fr)'
+                  templateColumns={{ base: '1fr', lg: 'repeat(10, 1fr)' }}
                   gap={6}
                   className='px-4 py-6'
                 >
                   {/* Left Section */}
-                  <GridItem colSpan={4}>
+                  <GridItem colSpan={{ base: 1, lg: 4 }}>
                     <VStack spacing={4} align='stretch' className='h-full'>
                       <img
                         src={selectedScholar?.image}
                         alt={selectedScholar?.name}
                         className='h-full w-full rounded-lg object-cover object-center shadow-md'
                       />
-                      <Grid templateColumns='repeat(10, 1fr)' rowGap={4}>
+                      {/* Social Icons */}
+                      <Grid templateColumns='repeat(6, 1fr)' gap={4} rowGap={2}>
                         {'linkedin' in (selectedScholar?.social || {}) && (
-                          <>
-                            <GridItem>
-                              <div className='flex items-center'>
-                                <UnstyledLink
-                                  href={selectedScholar?.social.linkedin || ''}
-                                  target='_blank'
-                                  rel='noopener noreferrer'
-                                  className='ml-2 text-left font-semibold text-blue-600 hover:text-blue-800'
-                                >
-                                  <FaLinkedin size={22} />
-                                </UnstyledLink>
-                              </div>
-                            </GridItem>
-                          </>
+                          <GridItem>
+                            <UnstyledLink
+                              href={selectedScholar?.social.linkedin || ''}
+                              target='_blank'
+                              rel='noopener noreferrer'
+                              className='text-blue-600 hover:text-blue-800'
+                            >
+                              <FaLinkedin size={22} />
+                            </UnstyledLink>
+                          </GridItem>
                         )}
                         {'resume' in (selectedScholar?.social || {}) && (
-                          <>
-                            {/* <GridItem></GridItem> */}
-                            <GridItem colSpan={1}>
-                              <div className='flex items-center'>
-                                <UnstyledLink
-                                  href={selectedScholar?.social.resume || ''}
-                                  target='_blank'
-                                  rel='noopener noreferrer'
-                                  className='ml-2 text-left font-semibold text-[#F9C801] hover:text-[#d0b442]'
-                                >
-                                  <RiAwardFill size={22} />
-                                </UnstyledLink>
-                              </div>
-                            </GridItem>
-                          </>
+                          <GridItem>
+                            <UnstyledLink
+                              href={selectedScholar?.social.resume || ''}
+                              target='_blank'
+                              rel='noopener noreferrer'
+                              className='text-[#F9C801] hover:text-[#d0b442]'
+                            >
+                              <RiAwardFill size={22} />
+                            </UnstyledLink>
+                          </GridItem>
                         )}
-
                         {'twitter' in (selectedScholar?.social || {}) && (
-                          <>
-                            <GridItem colSpan={1}>
-                              <div className='flex items-center'>
-                                <UnstyledLink
-                                  href={selectedScholar?.social.twitter || ''}
-                                  target='_blank'
-                                  rel='noopener noreferrer'
-                                  className='ml-2 text-left font-semibold text-[#26a7de] hover:text-[#1b95d6]'
-                                >
-                                  <FaTwitter size={22} />
-                                </UnstyledLink>
-                              </div>
-                            </GridItem>
-                          </>
+                          <GridItem>
+                            <UnstyledLink
+                              href={selectedScholar?.social.twitter || ''}
+                              target='_blank'
+                              rel='noopener noreferrer'
+                              className='text-[#26a7de] hover:text-[#1b95d6]'
+                            >
+                              <FaTwitter size={22} />
+                            </UnstyledLink>
+                          </GridItem>
                         )}
-
                         {'instagram' in (selectedScholar?.social || {}) && (
-                          <>
-                            <GridItem colSpan={1}>
-                              <div className='flex items-center'>
-                                <UnstyledLink
-                                  href={selectedScholar?.social.instagram || ''}
-                                  target='_blank'
-                                  rel='noopener noreferrer'
-                                  className='ml-2 text-left font-semibold text-[#e4405f] hover:text-[#ae374d]'
-                                >
-                                  <FaInstagram size={22} />
-                                </UnstyledLink>
-                              </div>
-                            </GridItem>
-                          </>
+                          <GridItem>
+                            <UnstyledLink
+                              href={selectedScholar?.social.instagram || ''}
+                              target='_blank'
+                              rel='noopener noreferrer'
+                              className='text-[#e4405f] hover:text-[#ae374d]'
+                            >
+                              <FaInstagram size={22} />
+                            </UnstyledLink>
+                          </GridItem>
                         )}
-
                         {'github' in (selectedScholar?.social || {}) && (
-                          <>
-                            <GridItem colSpan={1}>
-                              <div className='flex items-center'>
+                          <GridItem>
+                            <UnstyledLink
+                              href={selectedScholar?.social.github || ''}
+                              target='_blank'
+                              rel='noopener noreferrer'
+                              className='text-gray-700 hover:text-gray-900'
+                            >
+                              <FaGithub size={22} />
+                            </UnstyledLink>
+                          </GridItem>
+                        )}
+                        {'website' in (selectedScholar?.social || {}) &&
+                          selectedScholar?.social.website?.map(
+                            (site, index) => (
+                              <GridItem key={index}>
                                 <UnstyledLink
-                                  href={selectedScholar?.social.github || ''}
+                                  href={site}
                                   target='_blank'
                                   rel='noopener noreferrer'
-                                  className='ml-2 text-left font-semibold text-gray-700 hover:text-gray-900'
+                                  className='text-gray-600 hover:text-gray-900'
                                 >
-                                  <FaGithub size={22} />
+                                  <FaGlobe size={22} />
                                 </UnstyledLink>
-                              </div>
-                            </GridItem>
-                          </>
-                        )}
-                        {'website' in (selectedScholar?.social || {}) && (
-                          <>
-                            {selectedScholar?.social.website?.map(
-                              (site, index) => (
-                                <GridItem colSpan={1} key={index}>
-                                  <div className='flex items-center'>
-                                    <UnstyledLink
-                                      href={site}
-                                      target='_blank'
-                                      rel='noopener noreferrer'
-                                      className='ml-2 text-left font-semibold text-gray-600 hover:text-gray-900'
-                                    >
-                                      <FaGlobe size={22} />
-                                    </UnstyledLink>
-                                  </div>
-                                </GridItem>
-                              ),
-                            )}
-                          </>
-                        )}
+                              </GridItem>
+                            ),
+                          )}
                       </Grid>
                     </VStack>
                   </GridItem>
 
                   {/* Right Section */}
-                  <GridItem colSpan={6}>
+                  <GridItem colSpan={{ base: 1, lg: 6 }}>
                     <VStack align='stretch'>
                       <div className='flex flex-col items-center border-b-2 pb-2 align-middle'>
-                        <h2 className='mr-8 flex items-center text-4xl font-extrabold text-slate-900'>
+                        <h2 className='text-center text-3xl font-extrabold text-slate-900 lg:text-4xl'>
                           {selectedScholar?.name}
-                          <p className='ml-2 text-lg text-slate-700'>
+                          <p className='text-lg text-slate-700'>
                             ({selectedScholar?.pronoun})
                           </p>
                         </h2>
                         {/* Location */}
-                        <div className='flex h-full w-full items-center justify-center'>
-                          <IoLocationOutline
-                            size={22}
-                            className='text-slate-700'
-                          />
-
-                          <p className='ml-2 text-lg text-slate-700'>
-                            {selectedScholar?.location}
-                          </p>
-
-                          <FaRegBuilding
-                            size={22}
-                            className='ml-10 text-slate-700'
-                          />
-
-                          <p className='ml-2 text-lg text-slate-700'>
-                            {selectedScholar?.organization}
-                          </p>
+                        <div className='mt-2 flex flex-col items-center space-y-2 lg:flex-row lg:justify-center lg:space-x-4 lg:space-y-0'>
+                          <div className='flex items-center text-slate-700'>
+                            <IoLocationOutline size={22} />
+                            <p className='ml-2'>{selectedScholar?.location}</p>
+                          </div>
+                          <div className='flex items-center text-slate-700'>
+                            <FaRegBuilding size={22} />
+                            <p className='ml-2'>
+                              {selectedScholar?.organization}
+                            </p>
+                          </div>
                         </div>
                       </div>
 
                       {/* Roles */}
-                      <div className='mt-2 flex flex-wrap items-center gap-2'>
+                      <div className='mt-4 flex flex-wrap items-center justify-center gap-2'>
                         <PiUserListBold size={26} />
                         {selectedScholar?.roles?.map((role, index) => (
                           <Tag
@@ -365,64 +290,57 @@ const ScholarsPage: React.FC<
                       </div>
 
                       {/* Education */}
-                      <div className='mt-4 flex items-center'>
-                        <IoSchoolSharp
-                          size={22}
-                          className='mr-3 text-slate-700'
-                        />
-                        <h3 className='text-xl font-bold text-slate-800'>
+                      <div className='mt-4'>
+                        <h3 className='flex items-center text-xl font-bold text-slate-800'>
+                          <IoSchoolSharp size={22} className='mr-3' />
                           Education
                         </h3>
+                        <ul className='mt-2 space-y-1 text-center lg:text-left'>
+                          {selectedScholar?.education.map((edu, index) => (
+                            <li key={index} className='text-lg text-slate-700'>
+                              {edu.degree}{' '}
+                              {edu.institution && (
+                                <span className='text-slate-600'>
+                                  ({edu.institution})
+                                </span>
+                              )}
+                            </li>
+                          ))}
+                        </ul>
                       </div>
-                      <ul className='mt-2 space-y-1'>
-                        {selectedScholar?.education.map((edu, index) => (
-                          <li key={index} className='text-lg text-slate-700'>
-                            {edu.degree}{' '}
-                            {edu.institution && (
-                              <span className='text-slate-600'>
-                                ({edu.institution})
-                              </span>
-                            )}
-                          </li>
-                        ))}
-                      </ul>
 
                       {/* Expertise */}
-                      <div className='mt-4 flex items-center'>
-                        <MdOutlineBadge
-                          size={22}
-                          className='mr-3 text-slate-700'
-                        />
-                        <h3 className='text-xl font-bold text-slate-800'>
+                      <div className='mt-4'>
+                        <h3 className='flex items-center text-xl font-bold text-slate-800'>
+                          <MdOutlineBadge size={22} className='mr-3' />
                           Expertise
                         </h3>
-                      </div>
-                      <div className='mt-2 flex flex-wrap gap-2'>
-                        {selectedScholar?.expertise?.map((expertise, index) => (
-                          <Tag
-                            key={index}
-                            colorScheme='blue'
-                            size='lg'
-                            className='rounded-full px-3 py-1 shadow-sm'
-                          >
-                            {expertise}
-                          </Tag>
-                        ))}
+                        <div className='mt-2 flex flex-wrap justify-center gap-2 lg:justify-start'>
+                          {selectedScholar?.expertise?.map(
+                            (expertise, index) => (
+                              <Tag
+                                key={index}
+                                colorScheme='blue'
+                                size='lg'
+                                className='rounded-full px-3 py-1 shadow-sm'
+                              >
+                                {expertise}
+                              </Tag>
+                            ),
+                          )}
+                        </div>
                       </div>
 
                       {/* About Me */}
-                      <div className='mt-6 flex items-center'>
-                        <FaCircleInfo
-                          size={22}
-                          className='mr-3 text-slate-700'
-                        />
-                        <h3 className='text-xl font-bold text-slate-800'>
+                      <div className='mt-6'>
+                        <h3 className='flex items-center text-xl font-bold text-slate-800'>
+                          <FaCircleInfo size={22} className='mr-3' />
                           About Me
                         </h3>
+                        <p className='mt-2 text-center text-lg leading-relaxed text-slate-700 lg:text-left'>
+                          {selectedScholar?.about}
+                        </p>
                       </div>
-                      <p className='mt-2 text-lg leading-relaxed text-slate-700'>
-                        {selectedScholar?.about}
-                      </p>
                     </VStack>
                   </GridItem>
                 </Grid>

From 62df7418ee861593d5ad76dbb495a021019d32ff Mon Sep 17 00:00:00 2001
From: slugb0t <wheresdorian@gmail.com>
Date: Fri, 27 Dec 2024 10:48:12 -0800
Subject: [PATCH 09/10] refactor: :recycle: update sizing of team cards

---
 public/data/team.json    | 2 +-
 src/pages/team/index.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/data/team.json b/public/data/team.json
index 749cf68..b53fd26 100644
--- a/public/data/team.json
+++ b/public/data/team.json
@@ -9,7 +9,7 @@
     "location": "San Diego, CA",
     "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo.",
     "image": "https://ucarecdn.com/b36da179-1c47-4fa9-9e9b-9001ffc9b869/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
-    "moduleImageParams": "-/crop/face/250px200p/",
+    "moduleImageParams": "-/crop/face/200px200p/",
     "modules": [
       "data-sharing",
       "capacity-building",
diff --git a/src/pages/team/index.tsx b/src/pages/team/index.tsx
index f58ea39..9862d63 100644
--- a/src/pages/team/index.tsx
+++ b/src/pages/team/index.tsx
@@ -74,7 +74,7 @@ const MembersGrid: React.FC<{
       initial='hidden'
       whileInView='show'
       viewport={{ once: true }}
-      className='align-center mx-auto grid max-w-screen-xl gap-8 px-4 pb-8 pt-4 text-center sm:grid-cols-2 md:grid-cols-3 lg:gap-8 lg:px-6 lg:pb-16 lg:pt-8'
+      className='align-center mx-auto grid max-w-screen-xl gap-8 px-4 pb-8 pt-4 text-center sm:grid-cols-2 md:grid-cols-3 lg:gap-8 lg:px-8 lg:pb-16 lg:pt-8'
     >
       {members.map((scholar) => (
         <motion.div
@@ -83,7 +83,7 @@ const MembersGrid: React.FC<{
           id={scholar.id}
           onClick={() => openModal(scholar.id)}
         >
-          <div className='relative mx-auto min-h-[350px] w-full sm:min-h-[500px]'>
+          <div className='relative mx-auto min-h-[350px] w-full sm:min-h-[400px]'>
             <Image
               src={`${scholar.image}${
                 scholar.moduleImageParams !== ''

From 0ca39b5dfda11e4615a5999e19b14d2803b5968a Mon Sep 17 00:00:00 2001
From: slugb0t <wheresdorian@gmail.com>
Date: Fri, 27 Dec 2024 11:58:06 -0800
Subject: [PATCH 10/10] refactor: :recycle: update to the modal image

---
 public/data/team.json    | 6 +++---
 src/pages/team/index.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/data/team.json b/public/data/team.json
index b53fd26..d9cf6a5 100644
--- a/public/data/team.json
+++ b/public/data/team.json
@@ -7,7 +7,7 @@
     "department": "FAIR Data Innovations Hub",
     "organization": "California Medical Innovations Institute",
     "location": "San Diego, CA",
-    "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo.",
+    "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. Qui molestiae aspernatur a ducimus architecto et impedit molestias aut. Qui molestiae aspernatur a ducimus architecto et impedit molestias aut. Qui molestiae aspernatur a ducimus architecto et.",
     "image": "https://ucarecdn.com/b36da179-1c47-4fa9-9e9b-9001ffc9b869/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
     "moduleImageParams": "-/crop/face/200px200p/",
     "modules": [
@@ -43,7 +43,7 @@
     "department": "FAIR Data Innovations Hub",
     "organization": "California Medical Innovations Institute",
     "location": "San Diego, CA",
-    "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. ",
+    "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. Qui molestiae aspernatur a ducimus architecto et impedit molestias aut. Qui molestiae aspernatur a ducimus architecto et impedit molestias aut. Qui molestiae aspernatur a ducimus architecto et.",
     "image": "https://ucarecdn.com/dca922ac-d2dc-4fb4-8c37-5bdc2d5aa768/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
     "moduleImageParams": "-/crop/face/250px200p/",
     "modules": ["data-sharing", "data-sharing", "data-collection"],
@@ -74,7 +74,7 @@
     "department": "FAIR Data Innovations Hub",
     "organization": "California Medical Innovations Institute",
     "location": "San Bernardino, CA",
-    "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. ",
+    "about": "Qui molestiae aspernatur a ducimus architecto et impedit molestias aut voluptatem molestiae in omnis placeat aut veniam exercitationem. Sit autem nobis ex sequi quia ut quia provident eos quas molestiae ab eveniet eaque ut eius dignissimos? Et error sequi et voluptates iure eum nulla optio aut quia illo. Qui molestiae aspernatur a ducimus architecto et impedit molestias aut. Qui molestiae aspernatur a ducimus architecto et impedit molestias aut. Qui molestiae aspernatur a ducimus architecto et.",
     "image": "https://ucarecdn.com/a3ed77eb-24bc-4b55-b8f9-118a9d07f760/-/quality/smart_retina/-/format/auto/-/progressive/yes/",
     "moduleImageParams": "-/crop/face/250px250p/",
     "modules": ["data-sharing", "data-collection"],
diff --git a/src/pages/team/index.tsx b/src/pages/team/index.tsx
index 9862d63..c99443b 100644
--- a/src/pages/team/index.tsx
+++ b/src/pages/team/index.tsx
@@ -166,7 +166,7 @@ const ScholarsPage: React.FC<
                       <img
                         src={selectedScholar?.image}
                         alt={selectedScholar?.name}
-                        className='h-full w-full rounded-lg object-cover object-center shadow-md'
+                        className='h-full max-h-[40rem] w-full rounded-lg object-cover object-center shadow-md'
                       />
                       {/* Social Icons */}
                       <Grid templateColumns='repeat(6, 1fr)' gap={4} rowGap={2}>