[FEATURE] Adjusted Social Styling and Prepared References (#8)

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

index.html

@@ -62,7 +62,7 @@
       </header>
       <div class="loading-content">
         <div class="loading-content-wrapper">
-          <img src="/images/phx-nano.png" class="loading-content-media" />
+          <img src="/images/logo-micro.png" class="loading-content-media" />
           <div id="loading-content-media-cover"></div>
         </div>
       </div>

src/Navbar.jsx

@@ -73,7 +73,7 @@ export default function Navbar() {
               aria-label="menu"
               sx={{ mr: -0.5 }}
             >
-              <img src="/images/logo.png" width="40" height="40" />
+              <img src="/images/logo-micro.png" width="40" height="40" />
             </IconButton>
           </a>
           <Typography variant="h6" noWrap component="div">

src/components/LogoBackground.jsx

@@ -16,7 +16,7 @@ export default function LogoBackground() {
         }}
       >
         <img
-          src="/images/phx-mini.png"
+          src="/images/logo-micro.png"
           style={{ minWidth: "260px", width: "50%", maxWidth: 512 }}
         />
       </div>

src/css/contact.css

@@ -0,0 +1,17 @@
+.contact-icon {
+  margin: auto 1rem;
+  margin-top: -0.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 1rem;
+  border-radius: 50%;
+  border: 1px solid #f3ac20;
+  color: #f3ac20;
+  transition: 0.7s;
+}
+
+.contact-icon:hover {
+  background-color: #f3ac20;
+  color: white;
+  border-color: white;
+}

src/css/footer.css

@@ -35,4 +35,5 @@ footer {
   padding-left: 10px;
   font-size: 10px;
   line-height: inherit;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
 }

src/pages/delta/Contact.jsx

@@ -0,0 +1,60 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import TextField from "@mui/material/TextField";
+import MailIcon from "@mui/icons-material/Mail";
+import LocationOnIcon from "@mui/icons-material/LocationOn";
+import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
+import ContactStrip from "./ContactStrip.jsx";
+import "@css/contact.css";
+export default function Contact() {
+  return (
+    <Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="contact">
+      <Box
+        style={{
+          display: "flex",
+          flex: 1,
+          margin: "auto",
+          flexWrap: "wrap",
+        }}
+      >
+        <Box style={{ flex: 1 }}>
+          <div style={{ display: "flex" }}>
+            <Typography variant="h2" sx={{ margin: "2rem auto", fontSize: 30 }}>
+              Contact
+            </Typography>
+          </div>
+          <Box
+            className="static-contacts"
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              flexWrap: "wrap",
+            }}
+          >
+            <ContactStrip
+              icon={LocationOnIcon}
+              title="Location"
+              info="Springville, Utah"
+            />
+            <ContactStrip
+              icon={MailIcon}
+              title="Email"
+              info="elijahglennparker@outlook.com"
+            />
+            {/*<ContactStrip
+              icon={PhoneIphoneIcon}
+              title="Text/Call"
+              info="+1 (234) 456 7890"
+            />*/}
+          </Box>
+          {/*<Box className="messaging">
+	<TextField label="Name" size="small" />
+	<TextField label="Subject" size="small"/>
+	<TextField label="Email" size="small"/>
+	<TextField label="Message" size="small" multiline/>
+	</Box>*/}
+        </Box>
+      </Box>
+    </Box>
+  );
+}

src/pages/delta/ContactStrip.jsx

@@ -0,0 +1,40 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+export default function ContactStrip(props) {
+  const { title, info, icon: Icon } = props;
+  return (
+    <Box
+      className="static-contact"
+      sx={{ display: "flex", mb: "2rem", width: "100%" }}
+    >
+      <Box
+        className="contact-strip"
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          margin: "0 auto",
+          width: "100%",
+          maxWidth: "380px",
+        }}
+      >
+        <Box sx={{ textAlign: "left", display: "flex" }}>
+          <Icon className="contact-icon" />
+          <Typography variant="h4">{title}</Typography>
+        </Box>
+        <Box sx={{ width: "100%", mt: ".25rem", display: "inline-flex" }}>
+          <Box sx={{ maxWidth: "5.5rem", width: "100%" }} />
+          <Typography
+            className="contact-info"
+            variant="body2"
+            sx={{
+              textAlign: "left",
+              opacity: ".87",
+            }}
+          >
+            {info}
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

src/pages/delta/Delta.jsx

@@ -6,6 +6,7 @@ import ContentWrapper from "@components/ContentWrapper.jsx";
 
 const Skills = React.lazy(() => import("./Skills.jsx"));
 const Social = React.lazy(() => import("./Social.jsx"));
+const Contact = React.lazy(() => import("./Contact.jsx"));
 
 export default function Delta() {
   return (
@@ -15,6 +16,7 @@ export default function Delta() {
       <Suspense>
         <Skills />
         <Social />
+        <Contact />
       </Suspense>
     </ContentWrapper>
   );

src/pages/delta/Projects.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import Box from "@mui/material/Box";
-
+import Typography from "@mui/material/Typography";
 import ProjectTile from "./ProjectTile.jsx";
 import PhotoHover from "./PhotoHover.jsx";
 
@@ -22,7 +22,9 @@ export default function Projects() {
         alt={"Missing Project Photo"}
       />
       <div style={{ display: "flex" }}>
-        <h3 style={{ fontSize: "1.75rem", margin: "2rem auto" }}>Portfolio</h3>
+        <Typography variant="h2" sx={{ margin: "2rem auto", fontSize: 30 }}>
+          Projects
+        </Typography>
       </div>
       <ProjectTile
         image="/portfolio/projects/minecluster.png"

src/pages/delta/SkillPaper.jsx

@@ -29,7 +29,7 @@ export default function SkillPaper({
         <CardContent sx={{ color: fgColor, backgroundColor: bgColor }}>
           <Typography variant="h5" component="div">
             <div style={{ display: "inline-flex" }}>
-              <h3>{heading}</h3>
+              <Typography variant="h5">{heading}</Typography>
               {
                 <Icon
                   style={{

src/pages/delta/Social.jsx

@@ -1,48 +1,187 @@
+import { Link } from "react-router-dom";
+import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Typography from "@mui/material/Typography";
 import MailIcon from "@mui/icons-material/Mail";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import LinkedInIcon from "@mui/icons-material/LinkedIn";
 import { FaGitlab } from "react-icons/fa";
 import { SiGitea } from "react-icons/si";
 
-const socialLinks = [
-  {
-    url: "https://www.linkedin.com/in/elijah-parker-dunemask/",
-    icon: <LinkedInIcon />,
-  },
-  {
-    url: "mailto: elijahglennparker@outlook.com",
-    icon: <MailIcon />,
-  },
-  {
-    url: "https://gitea.dunemask.net/dunemask",
-    icon: <SiGitea size="1.5rem" />,
-  },
-  {
-    url: "https://gitlab.com/dunemask",
-    icon: <FaGitlab size="1.5rem" />,
-  },
-  {
-    url: "https://github.com/dunemask",
-    icon: <GitHubIcon />,
-  },
-];
-
 export default function Social() {
   return (
-    <Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="contact">
+    <Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="social">
-      <Box style={{ boxShadow: "none", display: "flex", padding: 16 }}>
+      <Box
-        <h3 style={{ paddingRight: 20 }}>Social</h3>
+        style={{
-        <Box style={{ display: "flex", marginLeft: "auto", flexWrap: "wrap" }}>
+          display: "flex",
-          {socialLinks.map((v, i) => (
+          flex: 1,
-            <a
+          margin: "auto",
-              key={i}
+          flexWrap: "wrap",
-              href={v.url}
+        }}
-              style={{ margin: "auto 0", color: "black", padding: "0px 5px" }}
+      >
+        <Box style={{ flex: 1 }}>
+          <div style={{ display: "flex" }}>
+            <Typography variant="h2" sx={{ margin: "2rem auto", fontSize: 30 }}>
+              Social
+            </Typography>
+          </div>
+          <Box
+            style={{
+              flex: 1,
+              textAlign: "left",
+              display: "flex",
+              flexGrow: 1,
+              flexWrap: "wrap",
+              justifyContent: "center",
+            }}
+          >
+            <Card
+              style={{ margin: "2rem" }}
+              component={Link}
+              to={"https://www.linkedin.com/in/elijah-parker-dunemask"}
+              sx={{
+                maxWidth: 256,
+                margin: "3rem auto",
+                boxShadow:
+                  "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
+                overflow: "visible",
+                textDecoration: "none",
+              }}
             >
-              {v.icon}
+              <div style={{ position: "relative", overflow: "visible" }}>
-            </a>
+                <Avatar
-          ))}
+                  style={{
+                    width: "4rem",
+                    height: "4rem",
+                    position: "absolute",
+                    top: "-2rem",
+                    left: "-2rem",
+                    backgroundColor: "#0073b1",
+                  }}
+                >
+                  <LinkedInIcon
+                    style={{
+                      width: "2.125rem",
+                      height: "2.125rem",
+                      color: "white",
+                    }}
+                  />
+                </Avatar>
+              </div>
+              <CardContent sx={{ backgroundColor: "white", marginTop: "1rem" }}>
+                <Typography
+                  variant="h5"
+                  component="div"
+                  style={{ color: "#0073b1" }}
+                >
+                  Linkedin
+                </Typography>
+                <Typography variant="body2" component="div">
+                  Hard working fullstack developer Seeking entry-level part time
+                  position or internship with flexible hours to accommodate
+                  pursuit of a B.S. degree.
+                </Typography>
+              </CardContent>
+            </Card>
+            <Card
+              style={{ margin: "2rem" }}
+              component={Link}
+              to={"https://gitea.dunemask.net/elysium"}
+              sx={{
+                maxWidth: 256,
+                margin: "3rem auto",
+                boxShadow:
+                  "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
+                overflow: "visible",
+                textDecoration: "none",
+              }}
+            >
+              <div style={{ position: "relative", overflow: "visible" }}>
+                <Avatar
+                  style={{
+                    width: "4rem",
+                    height: "4rem",
+                    position: "absolute",
+                    top: "-2rem",
+                    left: "-2rem",
+                    backgroundColor: "rgb(96, 153, 38)",
+                  }}
+                >
+                  <SiGitea
+                    style={{
+                      width: "2.25rem",
+                      height: "2.25rem",
+                      color: "white",
+                    }}
+                  />
+                </Avatar>
+              </div>
+              <CardContent sx={{ backgroundColor: "white", marginTop: "1rem" }}>
+                <Typography
+                  variant="h5"
+                  component="div"
+                  style={{ color: "rgb(96, 153, 38)" }}
+                >
+                  Gitea
+                </Typography>
+                <Typography variant="body2" component="div">
+                  Portfolio showcasing integration with CI/CD and Kubernetes.
+                  Technologies include React, Express, Python, Helm, and Docker
+                </Typography>
+              </CardContent>
+            </Card>
+
+            <Card
+              style={{ margin: "2rem" }}
+              component={Link}
+              to={"https://github.com/dunemask"}
+              sx={{
+                maxWidth: 256,
+                margin: "3rem auto",
+                boxShadow:
+                  "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
+                overflow: "visible",
+                textDecoration: "none",
+              }}
+            >
+              <div style={{ position: "relative", overflow: "visible" }}>
+                <Avatar
+                  style={{
+                    width: "4rem",
+                    height: "4rem",
+                    position: "absolute",
+                    top: "-2rem",
+                    left: "-2rem",
+                    backgroundColor: "#24292f",
+                  }}
+                >
+                  <GitHubIcon
+                    style={{
+                      width: "2.5rem",
+                      height: "2.5rem",
+                      color: "white",
+                    }}
+                  />
+                </Avatar>
+              </div>
+              <CardContent sx={{ backgroundColor: "white", marginTop: "1rem" }}>
+                <Typography
+                  variant="h5"
+                  component="div"
+                  style={{ color: "#24292f" }}
+                >
+                  Github
+                </Typography>
+                <Typography variant="body2" component="div">
+                  Archived projects specializing in Java, Python, Javascript,
+                  HTML, and CSS. Built projects solo and in teams as project
+                  lead, and principal contributor.
+                </Typography>
+              </CardContent>
+            </Card>
+          </Box>
         </Box>
       </Box>
     </Box>

src/pages/references/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/references/References.jsx

@@ -1,12 +1,69 @@
 import React from "react";
 import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
 import ContentWrapper from "../../components/ContentWrapper";
+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 id="delta">
+    <Box id="references">
       <ContentWrapper>
-        <h1>References</h1>
+        <Box className="references-list">
+          <Box sx={{ maxWidth: 570, margin: "4rem auto", padding: "2rem" }}>
+            <Typography variant="h4" sx={{ fontWeight: 600 }}>
+              References{" "}
+            </Typography>{" "}
+          </Box>
+          <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>
       </ContentWrapper>
     </Box>
   );

vite.config.js

@@ -18,7 +18,8 @@ export default () => {
       alias: {
         "@": path.resolve("./src"),
         "@components": path.resolve("./src/components"),
-        "@images": path.resolve("./src/images")
+        "@images": path.resolve("./src/images"),
+	"@css": path.resolve("./src/css")
       },
     },
   });