elysium/nile
elysium/nile
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Co-authored-by: dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.net/elysium/nile/pulls/8
This commit is contained in:
dunemask 2023-09-23 15:41:02 +00:00
parent 565c8f225c
commit cc360597f8
15 changed files with 439 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -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>

BIN
public/images/logo-micro.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

2
src/Navbar.jsx
View file

@ -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">

2
src/components/LogoBackground.jsx
View file

@ -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>

17
src/css/contact.css Normal file
View file

@ -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;
}

1
src/css/footer.css
View file

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

60
src/pages/delta/Contact.jsx Normal file
View file

@ -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>
);
}

40
src/pages/delta/ContactStrip.jsx Normal file
View file

@ -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>
);
}

2
src/pages/delta/Delta.jsx
View file

@ -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>
);

6
src/pages/delta/Projects.jsx
View file

@ -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"

2
src/pages/delta/SkillPaper.jsx
View file

@ -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={{

209
src/pages/delta/Social.jsx
View file

@ -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>

76
src/pages/references/ContactCard.jsx Normal file
View file

@ -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>
);
}

61
src/pages/references/References.jsx
View file

@ -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>
);

3
vite.config.js
View file

@ -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")
},
},
});