[FEATURE] New References (#13)

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

src/Navbar.jsx

@@ -22,7 +22,7 @@ const links = [
   { url: "/#portfolio", title: "Portfolio" },
   // { url: "/#achievements", title: "Achievements" },
   { url: "/#contact", title: "Contact" },
-  // { url: "/resume", title: "Resume" },
+  { url: "/resume", title: "Resume" },
 ];
 
 export default function Navbar() {

src/Routing.jsx

@@ -16,7 +16,7 @@ export default function Routing() {
       <Toolbar disableGutters />
       <Routes>
         <Route path="/" element={<Delta />} />
-        {/* <Route path="/resume" element={<Resume />} /> */}
+        <Route path="/resume" element={<Resume />} />
         {redirects.map((r, i) => (
           <Route key={i} path={r.path} element={<Navigate to={r.rewrite} />} />
         ))}

src/hooks.jsx

@@ -5,8 +5,9 @@ export function useScrollToLocation() {
   const navigate = useNavigate();
   const { hash } = useLocation();
   const hashRef = React.useRef(hash);
+  const hashRetry = 100;
 
-  React.useEffect(() => {
+  function scrollToHash() {
     if (!hash) {
       window.scrollTo(0, 0);
       return;
@@ -18,12 +19,17 @@ export function useScrollToLocation() {
     if (scrolledRef.current) return;
     const id = hash.replace("#", "");
     const element = document.getElementById(id);
-    if (!element) return;
+    if (!element) {
+      setTimeout(scrollToHash, hashRetry);
+      return;
+    }
+
     element.scrollIntoView({
       behavior: "smooth",
       block: "start",
       inline: "nearest",
     });
     scrolledRef.current = true;
-  });
+  }
+  React.useEffect(scrollToHash);
 }

src/pages/delta/About.jsx

@@ -106,7 +106,7 @@ export default function About() {
                       href="mailto:elijahglennparker@outlook.com"
                       style={{ textDecoration: "none", fontSize: "14px" }}
                     >
-                      elijah@dunemask.net
+                      elijahglennparker@outlook.com
                     </a>
                   }
                 />

src/pages/delta/Delta.jsx

@@ -15,7 +15,6 @@ export default function Delta() {
   return (
     <ContentWrapper id="delta">
       <Header />
-
       <About />
       <Box style={{ display: "flex", flexWrap: "wrap" }}>
         <Education />
@@ -26,8 +25,8 @@ export default function Delta() {
         <Projects />
         <Skills />
         <Social />
+        <Contact />
       </Suspense>
-      <Contact />
     </ContentWrapper>
   );
 }

src/pages/resume/ReferenceCard.jsx

@@ -0,0 +1,89 @@
+import { Link } from "react-router-dom";
+import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTheme } from "@mui/material/styles";
+/*import ContactCard from "./ContactCard.jsx";
+<ContactCard name={name} title={title} linkedin={linkedin}/>*/
+import Typography from "@mui/material/Typography";
+export default function ReferenceCard(props) {
+  const { name, title, linkedin, reference } = props;
+  const theme = useTheme();
+  const smallMode = true; //useMediaQuery(theme.breakpoints.down("md"));
+
+  return (
+    <Box
+      style={{
+        display: "flex",
+        width: "100%",
+        alignItems: "center!important",
+        flexWrap: smallMode ? "wrap" : "nowrap",
+        marginBottom: "4rem",
+      }}
+    >
+      <div style={{ width: "100%" }}>
+        <div
+          style={{
+            maxWidth: 512,
+            marginLeft: "auto",
+            marginRight: smallMode ? "auto" : "",
+            textAlign: smallMode ? "center" : "left",
+            display: "flex",
+          }}
+        >
+          <div
+            style={{
+              margin: "0 auto",
+              marginBottom: ".5rem",
+              textAlign: "center",
+            }}
+          >
+            <Typography
+              variant="h5"
+              component={Link}
+              to={linkedin}
+              sx={{ textDecoration: "none", color: "inherit" }}
+            >
+              {name}
+            </Typography>
+            <Typography variant="h6">{title}</Typography>
+          </div>
+        </div>
+      </div>
+
+      <Box
+        style={{
+          width: "100%",
+          alignItems: "flex-start",
+          display: "flex",
+          flexWrap: "wrap",
+          flexDirection: "column",
+          margin: "auto",
+          maxWidth: 1024,
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: smallMode ? "center" : "",
+            width: "100%",
+          }}
+        >
+          <Typography
+            gutterBottom
+            variant="subtitle1"
+            component="div"
+            style={{
+              textAlign: smallMode ? "" : "left",
+              width: smallMode ? "80%" : "100%",
+              fontStyle: "italic",
+            }}
+          >
+            {reference}
+          </Typography>
+        </div>
+      </Box>
+    </Box>
+  );
+  i;
+}

src/pages/resume/References.jsx

@@ -2,34 +2,30 @@ import React from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import ContactCard from "./ContactCard.jsx";
-
+import ReferenceCard from "./ReferenceCard.jsx";
 const people = [
   {
     name: "Ethan  Maughan",
-    title: "Manager, Podium",
+    title: "Team Manager, Podium",
-    email: "mailto:notready@dunemask.net",
     linkedin: "https://www.linkedin.com/in/ethan-maughan-87469214a",
-    description: "Manager at Podium",
+    reference: `When I worked with Elijah he proved that he not only was incredibly driven and dedicated to the team, but also someone who can learn and adapt very quickly. He goes about each task with a "can do" mentality, and he helped us achieve team goals faster than expected more than once.`,
-    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",
+    reference: `I had the privilege of working closely with Elijah Parker on the QA team over the course of his tenure at Podium. He is a very diligent and dedicated individual and he is more than qualified for any software engineering role. Elijah started at Podium as an intern but was quickly able to start contributing as a valued team member. In just weeks, he became very comfortable working in our codebase and learned the ins and outs of our team. 
-    avatar:
+
-      "https://media.licdn.com/dms/image/C5603AQFfjR3jtnYw6Q/profile-displayphoto-shrink_400_400/0/1653795453273?e=1700697600&v=beta&t=5jO7XQGuH-KK4FwgiyeLfHZSyUaRfnr2-C3DK0pK1jk",
+One of Elijah’s greatest strengths is his ability to manage large-scale projects. I worked with Elijah closely on our team's API testing project. We had started this project a few months before he joined the team. He was able to quickly learn the project and start making some major contributions to it. He mainly worked on refactoring the code base to make it more structured as we added more API tests to the project. His changes were essential and helped our team by consolidating redundant code. He made some major changes to our original code that helped with readability and efficiency.
+
+I was also impressed by Elijah’s dedication to writing clean code and his focus on documentation. Before leaving Podium, he wrote clear documents for each project he worked on. He provided documents, training videos, and flowcharts to easily communicate his work to the team after he was gone.
+
+In summary, Elijah is an exceptional engineer who embodies qualities of diligence, knowledge, quick learning, and versatility. I have no doubt that he will be a tremendous asset to any organization or project. If you have any further questions or need additional information, please feel free to contact me.`,
   },
 ];
 
@@ -38,10 +34,9 @@ export default function References() {
     <Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="references">
       <div style={{ display: "flex" }}>
         <Typography variant="h2" sx={{ margin: "2rem auto", fontSize: 30 }}>
-          References
+          Primary References
         </Typography>
       </div>
-
       <Box
         sx={{
           display: "flex",
@@ -50,14 +45,12 @@ export default function References() {
         }}
       >
         {people.map((p, i) => (
-          <ContactCard
+          <ReferenceCard
             key={i}
-            name={p.name}
+            name={people[i].name}
-            title={p.title}
+            title={people[i].title}
-            email={p.email}
+            linkedin={people[i].linkedin}
-            linkedin={p.linkedin}
+            reference={people[i].reference}
-            description={p.description}
-            avatar={p.avatar}
           />
         ))}
       </Box>