Merge pull request #69 from UMLCloudComputing/feat/Add-members-list-on-landing-page

Feat: add members list on landing page

Author: Gurpranked

docs/resources/welcome.md

@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-# Tutorials
-Welcome to our various tutorials!
+# Resources
+Welcome to our various Resources!
 
 *These pages will be continually updated*

docs/schedule/2023Fall.md

@@ -5,7 +5,7 @@ slug: /schedule/fall-2023
 ---
 
 :::danger
-This schedule is outdated and refers to a past semester. Please check the [latest schedule](./current-schedule) for current information.
+This schedule is outdated and refers to a past semester. Please check the [latest schedule](../current-schedule) for current information.
 :::
 
 <center>

docs/schedule/2023Spring.md

@@ -5,7 +5,7 @@ slug: /schedule/spring-2023
 ---
 
 :::danger
-This schedule is outdated and refers to a past semester. Please check the [latest schedule](./current-schedule) for current information.
+This schedule is outdated and refers to a past semester. Please check the [latest schedule](../current-schedule) for current information.
 :::
 
 <center>

docs/schedule/2024Fall.md

@@ -1,6 +1,6 @@
 ---
 sidebar_position: 1
-slug: /schedule/current-schedule
+slug: /current-schedule
 title: Fall 2024
 description: Explore the Fall 2024 meeting schedule for the UMass Lowell Cloud Computing Club. Join us for virtual and hybrid sessions every week, featuring expert presentations, hands-on activities, and collaborative projects like UniPath.io. Stay engaged, learn from industry leaders, and contribute to exciting cloud computing initiatives.
 ogTitle: Meeting Schedule for Fall 2024

src/members_meta/members.json

@@ -0,0 +1,37 @@
+[
+    {
+        "image": "https://avatars.githubusercontent.com/u/44274319?v=4",
+        "name": "Martin Marwad",
+        "subtitle": "Founder, Alumni Advisor, UniPath.io Founder"
+    },
+    {
+        "image": "https://avatars.githubusercontent.com/u/136134023?v=4",
+        "name": "Alvin Yu",
+        "subtitle": "President, UniBot Founder, UniPath.io Dev"
+    },
+    {
+        "image": "https://avatars.githubusercontent.com/u/81245965?v=4",
+        "name": "Nick Bottari",
+        "subtitle": "Vice President, UniPath.io General Lead"
+    },
+    {
+        "image": "https://avatars.githubusercontent.com/u/60888380?v=4",
+        "name": "Christopher Coco",
+        "subtitle": "Secretary, Attendance Bot Lead, UniPath.io Dev"
+    },
+    {
+        "image": "https://media.licdn.com/dms/image/v2/D4E03AQEnHtWDIh-mBg/profile-displayphoto-shrink_200_200/profile-displayphoto-shrink_200_200/0/1700494525950?e=1729728000&v=beta&t=SsM6J2qHqALo4otJYYdKUKOAMrcliF-dMXpmEUzC2pw",
+        "name": "Gurpreet Singh",
+        "subtitle": "Treasurer, Club Website Lead, UniPath.io Dev"
+    },
+    {
+        "image": "https://avatars.githubusercontent.com/u/109564679?v=4",
+        "name": "Rahul Rajesh",
+        "subtitle": "Former VP, UniPath.io Dev, UML-Now-CLI Dev"
+    },
+    {
+        "image": "https://media.licdn.com/dms/image/v2/D4E03AQGZblBKFmKCmg/profile-displayphoto-shrink_200_200/profile-displayphoto-shrink_200_200/0/1703034903861?e=1729728000&v=beta&t=lcd6aBE3hfJ7sx4_y_sGEcAcyLTnxZ6JXsHzN8Sn9DA",
+        "name": "Noah Shayne",
+        "subtitle": "UniPath.io Dev, UniBot Dev, Hawkerscrape Dev"
+    }
+]

src/pages/index.js

@@ -6,6 +6,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Link from '@docusaurus/Link';
 import { useColorMode } from '@docusaurus/theme-common';
 import 'animate.css';
+import InfiniteScroll from 'react-infinite-scroll-component';
 
 // MUI
 import Stack from '@mui/material/Stack';
@@ -14,15 +15,15 @@ import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import Grid from '@mui/material/Unstable_Grid2';
-import Paper from '@mui/material/Paper';
 import SchoolIcon from '@mui/icons-material/School';
 import AutoStoriesIcon from '@mui/icons-material/AutoStories';
 import Groups2RoundedIcon from '@mui/icons-material/Groups2Rounded';
-import { BottomNavigation, BottomNavigationAction, createTheme, CssBaseline, responsiveFontSizes } from '@mui/material';
+import { createTheme,responsiveFontSizes } from '@mui/material';
 
 // Local
 import Layout from '@theme/Layout';
 import { ThemeProvider } from '@emotion/react';
+import members from "../members_meta/members.json";
 
 
 let theme = createTheme();
@@ -134,7 +135,7 @@ function ClubDetails() {
     };
 
     return (
-        <Container sx={{ py: 4 }}>
+        <Container sx={{ pb: 4 }}>
             <Grid container spacing={4}>
                 <Grid item xs={12} sm={4} >
                     <PaperCard Header={"About Us"} 
@@ -159,7 +160,7 @@ function ClubDetails() {
 function HomepageFeatures() {
     const Buttons = {
         'resources': <Link class="button button--secondary button--block" to="/docs/resources/welcome">Resources</Link>,
-        'meetings': <Link class="button button--secondary button--block" to="/docs/schedule/current-schedule" >Meetings</Link>,
+        'meetings': <Link class="button button--secondary button--block" to="/docs/current-schedule" >Meetings</Link>,
         'collaborative projects': <Link class="button button--secondary button--block" to="https://github.com/UMLCloudComputing">Github</Link>,
     };
 
@@ -186,8 +187,36 @@ function HomepageFeatures() {
     );
 }
 
+const AvatarLarge = ({ Image, Name, Subtitle}) =>(
+    <div class="avatar">
+        <img 
+            class="avatar__photo avatar__photo--lg"
+            src={Image} />
+        <div class="avatar_intro">
+            <div class="avatar__name"> {Name} </div>
+            <small class="avatar__subtitle"> {Subtitle} </small>
+        </div>
+    </div>
+);
+
 function Members() {
-    
+    return (
+        <Box wrap="nowrap" sx={{ display: 'block', overflowX: 'auto', py:4, pl: 4, 
+            '&::-webkit-scrollbar': {
+                display: 'none',
+            },
+            '-ms-overflow-style': 'none',  // IE and Edge
+            'scrollbar-width': 'none',  // Firefox
+        }}>
+            <Grid container wrap="nowrap">
+                {members.map(member => {
+                    return (
+                        <Grid item sx={{ minWidth: '430px' }}><AvatarLarge Image={member.image} Name={member.name} Subtitle={member.subtitle} /></Grid>
+                    );
+                })}
+            </Grid>
+        </Box>
+    );
 }
 
 export default function Home() {
@@ -198,6 +227,7 @@ export default function Home() {
         >
             <HomepageHeader />
             <main>
+                <Members />
                 <ClubDetails />
                 <HomepageFeatures />
             </main>

src/theme/Navbar/MobileSidebar/index.js

@@ -42,7 +42,7 @@ function MobileBottomNav() {
                   value={value}
                   onChange={handleChange}
                   sx = {{
-                      bgcolor: isDarkMode ? 'grey.800' : 'white',
+                      bgcolor: isDarkMode ? 'black' : 'white',
                       '& .MuiSvgIcon-root, & .MuiBottomNavigationAction-label': {
                           color: isDarkMode ? 'grey.300' : 'grey.700'
                       },
@@ -52,7 +52,7 @@ function MobileBottomNav() {
                   }}
               >
                   <Redirect to={value} />
-                  <BottomNavigationAction value={"/docs/Meeting Schedule"} label="Schedule" icon={<CalendarMonthOutlinedIcon/>} />
+                  <BottomNavigationAction value={"/docs/current-schedule"} label="Schedule" icon={<CalendarMonthOutlinedIcon/>} />
                   <BottomNavigationAction value={""} label="Home" icon={<HomeOutlinedIcon/>}/>
                   <BottomNavigationAction value={location} onClick={() => {mobileSidebar.toggle();}} label="More" icon={<MoreHorizOutlinedIcon/>}/>
               </BottomNavigation>