[FEATURE] Add Resume, Contact, Routing Fix, and About sections (#9)

Co-authored-by: dunemask <dunemask@gmail.com>
Co-authored-by: Dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.net/elysium/nile/pulls/9

src/pages/resume/ContactCard.jsx

@@ -0,0 +1,76 @@
+import Card from "@mui/material/Card";
+import { Link } from "react-router-dom";
+import CardContent from "@mui/material/CardContent";
+import CardActions from "@mui/material/CardActions";
+import Button from "@mui/material/Button";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import Avatar from "@mui/material/Avatar";
+import Chip from "@mui/material/Chip";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+
+import LinkedInIcon from "@mui/icons-material/LinkedIn";
+import MailIcon from "@mui/icons-material/Mail";
+
+export default function ContactCard(props) {
+  const { name, title, phone, email, linkedin, description, avatar } = props;
+
+  return (
+    <Card
+      sx={{
+        padding: "24px 0px 0px 0px",
+        width: 320,
+        maxWidth: "100%",
+        margin: 2,
+        boxShadow:
+          "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
+      }}
+    >
+      <CardContent sx={{ alignItems: "center", textAlign: "center", pb: 0 }}>
+        <Avatar
+          src={avatar}
+          sx={{ width: "4.5rem", height: "4.5rem", margin: "0 auto" }}
+          component={Link}
+          to={linkedin}
+        />
+        <Chip
+          size="sm"
+          label={title}
+          sx={{
+            mt: -1,
+            mb: 1,
+            zIndex: 5,
+            backgroundColor: "rgba(0, 115, 177,.1)",
+            borderColor: "white",
+            color: "#0073b1",
+          }}
+        />
+        <Typography level="title-lg">{name}</Typography>
+        <Typography level="body-sm" sx={{ maxWidth: "24ch", margin: "0 auto" }}>
+          {description}
+        </Typography>
+      </CardContent>
+      <CardActions style={{ display: "flex", justifyContent: "center" }}>
+        <IconButton
+          size="sm"
+          variant="plain"
+          component={Link}
+          to={linkedin}
+          sx={{ color: "#0073b1" }}
+        >
+          <LinkedInIcon />
+        </IconButton>
+        <IconButton
+          size="sm"
+          variant="plain"
+          color="neutral"
+          component={Link}
+          to={email}
+        >
+          <MailIcon />
+        </IconButton>
+      </CardActions>
+    </Card>
+  );
+}

src/pages/resume/References.jsx

@@ -0,0 +1,66 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import ContactCard from "./ContactCard.jsx";
+
+const people = [
+  {
+    name: "Ethan  Maughan",
+    title: "Manager, Podium",
+    email: "mailto:notready@dunemask.net",
+    linkedin: "https://www.linkedin.com/in/ethan-maughan-87469214a",
+    description: "Manager at Podium",
+    avatar:
+      "https://media.licdn.com/dms/image/C5603AQGfl31FXYzSrA/profile-displayphoto-shrink_400_400/0/1638318798590?e=1700697600&v=beta&t=ReByv6irpv3DUQKMbP6INBSipueU_QZAwlNviIYnxzI",
+  },
+  {
+    name: "Josh Butler",
+    title: "Coworker, Podium",
+    email: "mailto:notready@dunemask.net",
+    linkedin: "https://www.linkedin.com/in/josh-butler-7372a97",
+    description: "Coworker at Podium",
+    avatar:
+      "https://media.licdn.com/dms/image/D5635AQHg-Vy1WMNYhA/profile-framedphoto-shrink_400_400/0/1691598798461?e=1695823200&v=beta&t=jDuGypWxBoRFJTZvFxPxdk7y8U24tdtS8Wio0Fsofx4",
+  },
+  {
+    name: "Trevor Ah Sue",
+    title: "Coworker, Podium",
+    email: "mailto:notready@dunemask.net",
+    linkedin: "https://www.linkedin.com/in/trevor-ah-sue/",
+    description: "Coworker at Podium",
+    avatar:
+      "https://media.licdn.com/dms/image/C5603AQFfjR3jtnYw6Q/profile-displayphoto-shrink_400_400/0/1653795453273?e=1700697600&v=beta&t=5jO7XQGuH-KK4FwgiyeLfHZSyUaRfnr2-C3DK0pK1jk",
+  },
+];
+
+export default function References() {
+  return (
+    <Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="references">
+      <div style={{ display: "flex" }}>
+        <Typography variant="h2" sx={{ margin: "2rem auto", fontSize: 30 }}>
+          References
+        </Typography>
+      </div>
+
+      <Box
+        sx={{
+          display: "flex",
+          flexWrap: "wrap",
+          justifyContent: "center",
+        }}
+      >
+        {people.map((p, i) => (
+          <ContactCard
+            key={i}
+            name={p.name}
+            title={p.title}
+            email={p.email}
+            linkedin={p.linkedin}
+            description={p.description}
+            avatar={p.avatar}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+}

src/pages/resume/Resume.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import ContentWrapper from "../../components/ContentWrapper";
+import References from "./References.jsx";
+
+export default function Resume() {
+  return (
+    <Box id="resume">
+      <ContentWrapper>
+        <References />
+      </ContentWrapper>
+    </Box>
+  );
+}