nile/src/pages/delta/Social.jsx

import { Link } from "react-router-dom";
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 GitHubIcon from "@mui/icons-material/GitHub";
import LinkedInIcon from "@mui/icons-material/LinkedIn";

export default function Social() {
  return (
    <Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="social">
      <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 }}>
              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",
              }}
            >
              <CardContent>
                <Typography variant="h5" component="div" style={{ color: "#0073b1", display: "flex" }}>
                  Linkedin
                  <LinkedInIcon
                    style={{
                      width: "24px",
                      height: "24px",
                      color: "inherit",
                      marginTop: "auto",
                      marginBottom: "auto",
                      marginLeft: "auto",
                      marginRight: ".25rem",
                    }}
                  />
                </Typography>
                <Typography variant="body2" component="div" mt=".25rem">
                  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://forgejo.dunemask.dev/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",
              }}
            >
              <CardContent>
                <Typography
                  variant="h5"
                  component="div"
                  sx={{
                    backgroundImage: "linear-gradient(to right, var(--tw-gradient-stops))",
                    "--tw-gradient-from": "#f59e0b var(--tw-gradient-from-position)",
                    "--tw-gradient-stops": "var(--tw-gradient-from), var(--tw-gradient-to)",
                    "--tw-gradient-to": "#dc2626 var(--tw-gradient-to-position)",
                    backgroundClip: "text",
                    color: "transparent",
                    "--tw-gradient-from-position": "0%",
                    "--tw-gradient-via-position": "50%",
                    "--tw-gradient-to-position": "100%",
                    display: "flex",
                  }}
                >
                  Forgejo
                  <img
                    src="/images/forgejo.svg"
                    width="24px"
                    height="24px"
                    style={{
                      marginLeft: "auto",
                      marginRight: ".25rem",
                      marginTop: "auto",
                      marginBottom: "auto",
                    }}
                  />
                </Typography>
                <Typography variant="body2" component="div" mt=".25rem">
                  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",
              }}
            >
              <CardContent>
                <Typography variant="h5" component="div" style={{ color: "#24292f", display: "flex" }}>
                  Github
                  <GitHubIcon
                    style={{
                      color: "inherit",
                      marginLeft: "auto",
                      marginTop: "auto",
                      marginRight: ".25rem",
                    }}
                  />
                </Typography>
                <Typography variant="body2" component="div" mt=".25rem">
                  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>
  );
}