Add team section

ShortestPathLab · May 9, 2024 · cb0fae0 · cb0fae0
1 parent 9c29286
commit cb0fae0
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 10 deletions.
diff --git a/src/components/theme.ts b/src/components/theme.ts
@@ -63,7 +63,7 @@ export const makeTheme = (mode: "light" | "dark", theme?: AccentColor) =>
         fontWeight: 500,
       },
       h3: {
-        fontSize: "max(18px, min(22px, 2vw))",
+        fontSize: "max(16px, min(20px, 2vw))",
         fontWeight: 500,
       },
       button: {

diff --git a/src/pages/en-au.json b/src/pages/en-au.json
@@ -1,5 +1,6 @@
 {
   "org": "ShortestPathLab",
+  "orgUrl": "https://pathfinding.ai",
   "name": "Posthoc",
   "openAppLabel": "Open Posthoc Web",
   "logoUrl": "img/logo192.png",
@@ -49,7 +50,7 @@
   "featuresSectionTitle": "Features",
   "featuresSectionSubtitle": "featuresSectionSubtitle",
   "teamSectionTitle": "Team",
-  "teamSectionSubtitle": "teamSectionSubtitle",
+  "teamSectionSubtitle": "Built with passion by ShortestPathLab @ Monash University",
   "features": [
     {
       "image": null,
@@ -123,5 +124,25 @@
       "links": [{ "label": "Home", "url": "https://www.monash.edu" }]
     }
   ],
+  "team": [
+    {
+      "name": "Kevin Zheng",
+      "title": "Posthoc lead developer",
+      "avatar": null,
+      "github": "https://github.com/Spaaaacccee"
+    },
+    {
+      "name": "Dr Daniel Harabor",
+      "title": "Associate Professor",
+      "avatar": null,
+      "github": "https://harabor.net/daniel"
+    },
+    {
+      "name": "Dr Michael Wybrow",
+      "title": "Associate Professor",
+      "avatar": null,
+      "github": "https://harabor.net/daniel"
+    }
+  ],
   "footerCopyright": "Copyright © 2024 Monash University"
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -2,18 +2,21 @@ import {
   ArrowBack,
   ArrowForward,
   CloseOutlined as CloseIcon,
+  GitHub,
   DragHandleOutlined as MenuIcon,
   LaunchOutlined as OpenIcon,
   FilterTiltShiftOutlined as ShowVideoIcon,
 } from "@mui/icons-material";
 import {
+  Avatar,
   Box,
   Button,
   ButtonBase,
   CssBaseline,
   Divider,
   Fade,
   IconButton,
+  Link,
   Stack,
   StackProps,
   SxProps,
@@ -257,7 +260,7 @@ function Hero({ showVideo, onShowVideo }: SV) {
         }}
         variant="overline"
       >
-        {l10n.org} / {l10n.name}
+        <Link href={l10n.orgUrl}>{l10n.org}</Link> / {l10n.name}
       </Typography>
       <Typography sx={{ zIndex: 1, pr: "8vw" }} variant="h1">
         {l10n.heroTitle}
@@ -334,15 +337,15 @@ function Card({
   image?: RN;
   title?: RN;
   subtitle?: RN;
-} & StackProps) {
+} & Omit<StackProps, "title">) {
   const paper = usePaper();
   return (
     <Stack
+      justifyContent="center"
       alignItems="center"
       gap={1}
       {...props}
-      ///@ts-ignore
-      sx={{ ...paper(1), p: 8, ...props.sx }}
+      sx={{ ...paper(1), p: 8, textAlign: "center", ...props.sx } as any}
     >
       {image ?? <Box height={64}></Box>}
       <Typography variant="h3">{title ?? "Title"}</Typography>
@@ -629,16 +632,26 @@ export default function Home() {
               subtitle={l10n.docsSectionSubtitle}
             />
             <DocSelector /> */}
-            {/* <SectionTitle
+            <SectionTitle
               anchor="team"
               title={l10n.teamSectionTitle}
               subtitle={l10n.teamSectionSubtitle}
             />
             <Stack gap={4} sx={grid(260)}>
-              {times(3, () => (
-                <Card p={2} />
+              {map(l10n.team, ({ avatar, name, title, github }) => (
+                <ButtonBase
+                  sx={paper(0)}
+                  onClick={() => !!github && window.open(github)}
+                >
+                  <Card
+                    sx={{ py: 6 }}
+                    image={<Avatar sx={{ mb: 4, width: 64, height: 64 }} />}
+                    title={name}
+                    subtitle={title}
+                  />
+                </ButtonBase>
               ))}
-            </Stack> */}
+            </Stack>
           </Box>
         </Box>
         <Footer />