[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
This commit is contained in:
dunemask
parent
565c8f225c
commit
cc360597f8
15 changed files with 439 additions and 44 deletions
|
|
@ -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={{ boxShadow: "none", display: "flex", padding: 16 }}>
|
||||
<h3 style={{ paddingRight: 20 }}>Social</h3>
|
||||
<Box style={{ display: "flex", marginLeft: "auto", flexWrap: "wrap" }}>
|
||||
{socialLinks.map((v, i) => (
|
||||
<a
|
||||
key={i}
|
||||
href={v.url}
|
||||
style={{ margin: "auto 0", color: "black", padding: "0px 5px" }}
|
||||
<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",
|
||||
}}
|
||||
>
|
||||
{v.icon}
|
||||
</a>
|
||||
))}
|
||||
<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://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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue