nile/src/pages/delta/Social.jsx

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

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",
              }}
            >
              <div style={{ position: "relative", overflow: "visible" }}>
                <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://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",
              }}
            >
              <div style={{ position: "relative", overflow: "visible" }}>
                <Avatar
                  style={{
                    width: "4rem",
                    height: "4rem",
                    position: "absolute",
                    top: "-2rem",
                    left: "-2rem",
                    backgroundColor: "rgb(246, 152, 32)",
                  }}
                >
                  <SiForgejo
                    style={{
                      width: "2.25rem",
                      height: "2.25rem",
                      color: "white",
                    }}
                  />
                </Avatar>
              </div>
              <CardContent sx={{ backgroundColor: "white", marginTop: "1rem" }}>
                <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%",
                  }}
                >
                  Forgejo
                </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>
  );
}