Mobile Optimized Project Cards

appdevumd · May 19, 2024 · c24523c · c24523c
1 parent 6b77760
commit c24523c
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 68 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "framer-motion": "^11.1.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-fast-marquee": "^1.6.4",
     "react-icons": "^5.1.0",
     "react-router-dom": "^6.22.3",
     "react-scroll-motion": "^0.3.3",

diff --git a/src/api/axios.config.ts b/src/api/axios.config.ts
@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 const api = axios.create({
-  baseURL: 'http://localhost:3001',
+  baseURL: 'https://webv2-backend.appdevclub.com',
 });
 
 export default api;
diff --git a/src/components/LandingProjectCard/LandingProjectCard.css b/src/components/LandingProjectCard/LandingProjectCard.css
diff --git a/src/components/LandingProjectCard/LandingProjectCard.tsx b/src/components/LandingProjectCard/LandingProjectCard.tsx
@@ -1,11 +1,12 @@
-import { Avatar, Box, Chip, Paper, Typography } from "@mui/material";
+import { Avatar, Box, Chip, Paper, SxProps, Typography } from "@mui/material";
 import Atropos from "atropos/react";
 import { useNavigate } from "react-router-dom";
 import { LandingProject, Member } from "./interfaces";
 import stringAvatar from "./utils";
-import "./LandingProjectCard.css";
+import Marquee from "react-fast-marquee";
+import { ReactElement } from "react";
 
-function LandingProjectCard(props: { mobileView: boolean, project: LandingProject }) {
+function LandingProjectCard(props: { sx?: SxProps, mobileView: boolean, project: LandingProject }) {
   const navigate = useNavigate();
   const handleCardClick = (project: LandingProject) =>
     navigate(`/project/${project._id}`);
@@ -21,6 +22,7 @@ function LandingProjectCard(props: { mobileView: boolean, project: LandingProjec
       >
         <Paper
           sx={{
+            ...props?.sx,
             borderRadius: "35px",
             padding: "30px",
             display: "flex",
@@ -45,22 +47,12 @@ function LandingProjectCard(props: { mobileView: boolean, project: LandingProjec
               members={props.project.members}
             />
           </Box>
-
-          {/* Image Goes Here
-        <Box
-          data-atropos-offset="5"
-          sx={{
-            borderRadius: "35px",
-            background: "pink",
-            minWidth: "40%",
-            height: "100%",
-          }}
-        ></Box>
-        */}
         </Paper>
       </Atropos> :
       <Paper
+        elevation={5}
         sx={{
+          ...props?.sx,
           borderRadius: "35px",
           padding: "30px",
           display: "flex",
@@ -93,35 +85,45 @@ function LandingProjectCard(props: { mobileView: boolean, project: LandingProjec
 }
 
 function AvatarChips(props: { autoScroll?: boolean, members: Member[] }) {
+  function AvatarChipsChildren(): ReactElement {
+    return (
+      <>
+        {props.members.map((member: Member, index: number) => (
+          <Chip
+            key={index}
+            label={`${member.memberInfo.firstName} ${member.memberInfo.lastName}`}
+            variant="outlined"
+            sx={{
+              color: "black",
+              margin: '5px'
+            }}
+            avatar={
+              member.memberInfo.profileUrl ? (
+                <Avatar src={member.memberInfo.profileUrl} />
+              ) : (
+                <Avatar {...stringAvatar(`${member.memberInfo.firstName} ${member.memberInfo.lastName}`)} />
+              )
+            }
+          />
+        ))}
+      </>
+    );
+  }
+
   return (
-    <Box
-      className={(props.autoScroll) ? "avatar-chips-autoscroll" : ""}
-      sx={{
-        marginTop: "10px",
-        display: "flex",
-        flexWrap: (props.autoScroll) ? "nowrap" : "wrap",
-        gap: "10px", //need fixes
-        animation: (props.autoScroll) ? `achips-autoscroll ${props.members.length}s linear infinite` : "",
-      }}
-    >
-      {props.members.map((member: Member, index: number) => (
-        <Chip
-          sx={{
-            color: "black",
-          }}
-          key={index}
-          avatar={
-            member.memberInfo.profileUrl ? (
-              <Avatar src={member.memberInfo.profileUrl} />
-            ) : (
-              <Avatar {...stringAvatar(`${member.memberInfo.firstName} ${member.memberInfo.lastName}`)} />
-            )
-          }
-          label={`${member.memberInfo.firstName} ${member.memberInfo.lastName}`}
-          variant="outlined"
-        />
-      ))}
-    </Box>
+    (props.autoScroll) ?
+      <Marquee>
+        <AvatarChipsChildren />
+      </Marquee> :
+      <Box
+        sx={{
+          marginTop: "10px",
+          display: "flex",
+          flexWrap: "wrap",
+        }}
+      >
+        <AvatarChipsChildren />
+      </Box>
   )
 }
 

diff --git a/src/components/VerticalCardStack/VerticalCardStack.tsx b/src/components/VerticalCardStack/VerticalCardStack.tsx
@@ -0,0 +1,59 @@
+import { ReactElement } from "react";
+import { Box, SxProps, Typography } from "@mui/material"
+import { useScroll } from "framer-motion";
+import React from "react";
+
+
+export default function VerticalCardStack(props: { sx?: SxProps, children: ReactElement[], title?: String }): ReactElement {
+    const cardContainer = React.useRef(null);
+    const [cardContainerScale, setCardContainerScale] = React.useState(1);
+    const [topBuffer, setTopBuffer] = React.useState(0);
+    const { scrollYProgress } = useScroll({
+        target: cardContainer,
+        offset: ['start start', 'end end']
+    });
+
+    React.useEffect(() => {
+        scrollYProgress.on('change', (e) => {
+            if (e < 0.9) {
+                setCardContainerScale(Math.abs(1 - ((e * 0.08))));
+                setTopBuffer(Math.abs(200 * e));
+            }
+        });
+    }, []);
+
+    return (
+        <Box
+            ref={cardContainer}
+            sx={{
+                ...props?.sx,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: '50px',
+                minHeight: `calc(${(400 * (props.children.length + 1))}px)`,
+                transform: `scale(${cardContainerScale})`
+            }}
+        >
+            <Typography 
+                sx={{ 
+                    position: 'sticky',
+                    top: `calc(130px - ${topBuffer}px)`,
+                    fontSize: '2.3rem', 
+                    fontWeight: 'bold', 
+                }}
+            >
+                {props.title}
+            </Typography>
+            {
+                props.children.map((ChildElement: JSX.Element, index) => (
+                    React.cloneElement(ChildElement, { sx: {
+                        position: 'sticky',
+                        top: `calc(25vh + ${index * 40}px - ${topBuffer}px)`,
+                        transform: `scale(${1 + (index * 0.03)})` 
+                    } })
+                ))
+            }
+        </Box>
+    );
+}
diff --git a/src/components/VerticalCardStack/index.tsx b/src/components/VerticalCardStack/index.tsx
@@ -0,0 +1 @@
+export { default } from './VerticalCardStack.tsx';
diff --git a/src/integrals/WebLandingPage.tsx b/src/integrals/WebLandingPage.tsx
@@ -23,6 +23,7 @@ import { useOnScreen } from "../utils/useOnScreen";
 import Sparkles from "../components/Sparkles";
 import AppThemeController from "../middleware/AppThemeController";
 import SponsorCardsStack from "../components/SponsorCardsStack";
+import VerticalCardStack from "../components/VerticalCardStack";
 
 const LandingProjectCards = React.forwardRef(
   (
@@ -62,22 +63,13 @@ const LandingProjectCards = React.forwardRef(
             <LandingProjectCard mobileView={false} key={project._id} project={project} />
           ))}
         </Box> :
-        <Box
-          ref={ref}
-          sx={{
-            display: "flex",
-            flexDirection: 'column',
-            gap: "30px",
-            padding: "30px",
-            width: '100%'
-          }}
-        >
+        <VerticalCardStack title="Projects" sx={{ padding: '20px' }}>
           {
             props.data.map((project: LandingProject) => (
               <LandingProjectCard mobileView key={project._id} project={project} />
             ))
           }
-        </Box>
+        </VerticalCardStack>
     );
   }
 );
@@ -108,7 +100,7 @@ export default function WebLandingPage() {
     React.useState(0);
 
   const membersRef = useRef<HTMLDivElement>(null);
-  ///const membersOnScreen = useOnScreen(membersRef);
+  const membersOnScreen = useOnScreen(membersRef);
 
   const [statsContainerPosition] = React.useState<"fixed" | "unset">("fixed");
 
@@ -171,7 +163,7 @@ export default function WebLandingPage() {
           height: "100%",
           background:
             "radial-gradient(55% 55% at -3% 104%, #0F114AFF 13%, #07074178 41%, #00000014 76%, #073AFF00 99%),radial-gradient(25% 25% at 62% 54%, #2324A9C4 0%, #073AFF00 100%),radial-gradient(25% 44% at 83% 33%, #434EA3FF 0%, #44579D29 65%, #073AFF00 93%),radial-gradient(49% 81% at 45% 47%, #0891A245 0%, #073AFF00 100%),radial-gradient(113% 91% at 17% -2%, #6122A6FF 1%, #FF000000 99%),radial-gradient(142% 91% at 83% 7%, #0522A9FF 1%, #FF000000 99%),radial-gradient(142% 91% at -6% 74%, #1C2581FF 1%, #FF000000 99%),radial-gradient(142% 91% at 109% 60%, #131B36FF 0%, #205353FF 99%)",
-          opacity: scrollY > window.innerHeight - 700 ? 0 : 1,
+          opacity: (scrollY > window.innerHeight - 700) ? 0 : 1,
           transition: "opacity 0.5s ease",
           backgroundAttachment: "fixed",
         }}
@@ -305,14 +297,16 @@ export default function WebLandingPage() {
         }
 
         {
-          (!mobileView) ? <></> :
+
+            /* FUTURE: Add Appropriate Case */
+            (mobileView && !mobileView) ? <></> :
             <Box
               sx={{
                 paddingTop: "100px",
                 background:
                   "linear-gradient(0deg, #00FFFF00 0%, #000000FF 44%, #000000FF 50%, #000000FF 56%, #073AFF00 100%)",
                 transition: "opacity 0.5s ease",
-                //opacity: membersOnScreen ? 1 : 0,
+                opacity: membersOnScreen ? 1 : 0,
               }}
             >
               <Sparkles
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default } from './VerticalCardStack.tsx';