Compare commits

..

1 commit

Author SHA1 Message Date
01cd3fe5db [FEATURE] Add Resume Download Button 2024-01-11 09:44:20 -07:00
29 changed files with 1021 additions and 1072 deletions

View file

@ -14,7 +14,7 @@ jobs:
deploy-edge:
steps:
- name: Oasis Setup
uses: https://forgejo.dunemask.dev/elysium/oasis-action@master
uses: https://gitea.dunemask.dev/elysium/oasis-action@master
with:
gitea-token: ${{ env.GITEA_TOKEN }}
kubeconfig: ${{ env.KUBECONFIG_BASE64 }}

View file

@ -22,7 +22,7 @@ jobs:
ACCESS_KEY_ID: ${{ env.S3_BACKUP_KEY_ID }}
SECRET_ACCESS_KEY: ${{ env.S3_BACKUP_KEY }}
MIRROR_SOURCE: ${{ env.REPO_DIR }}
MIRROR_TARGET: backups/gitea-repositories/${{ gitea.repository }}
MIRROR_TARGET: repository-backups/${{ gitea.repository }}
STORAGE_SERVICE_URL: ${{env.S3_BACKUP_ENDPOINT}}
with:
args: --overwrite --remove

View file

@ -1,8 +0,0 @@
printWidth: 120
semi: true
singleQuote: false
trailingComma: all
bracketSpacing: true
arrowParens: always
requirePragma: false
insertPragma: false

View file

@ -13,7 +13,7 @@ COPY src src
COPY index.html .
COPY vite.config.js .
# Build static web files
RUN npm run build
RUN npm run build:react
# Set working directory to nginx asset directory
# Remove default nginx static assets
WORKDIR /usr/share/nginx/html

View file

@ -23,14 +23,35 @@
name="keywords"
content="Web Developer React, Fullstack Development, Web Developer Portfolio, Elijah Parker, Dunemask, React Developer, QA Software Developer"
/>
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png?v=jan27deltaburn" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png?v=jan27deltaburn" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png?v=jan27deltaburn" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicons/apple-touch-icon.png?v=jan27deltaburn"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicons/favicon-32x32.png?v=jan27deltaburn"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicons/favicon-16x16.png?v=jan27deltaburn"
/>
<link rel="manifest" href="/favicons/site.webmanifest?v=jan27deltaburn" />
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg?v=jan27deltaburn" color="#ffc40d" />
<link
rel="mask-icon"
href="/favicons/safari-pinned-tab.svg?v=jan27deltaburn"
color="#ffc40d"
/>
<link rel="shortcut icon" href="/favicons/favicon.ico?v=jan27deltaburn" />
<meta name="msapplication-TileColor" content="#ffc40d" />
<meta name="msapplication-config" content="/favicons/browserconfig.xml?v=jan27deltaburn" />
<meta
name="msapplication-config"
content="/favicons/browserconfig.xml?v=jan27deltaburn"
/>
<meta name="theme-color" content="#5d5d5d" />
</head>
<body>
@ -125,13 +146,16 @@
<script>
function loaderInitScript() {
function showLoader() {
const mediaCover = document.getElementById("loading-content-media-cover");
const mediaCover = document.getElementById(
"loading-content-media-cover",
);
if (mediaCover === null || mediaCover.style === null) return;
mediaCover.style.display = "block";
}
function onDocumentStateChange(e) {
if (document.readyState === "interactive") setTimeout(showLoader, 2000);
if (document.readyState === "interactive")
setTimeout(showLoader, 2000);
}
document.addEventListener("readystatechange", onDocumentStateChange);
}

1413
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -6,11 +6,9 @@
"author": "Dunemask",
"type": "module",
"scripts": {
"start": "vite preview --host",
"start:dev": "vite --host",
"start:analyzer": "USE_ANALYZER=true vite build",
"build": "vite build",
"format": "prettier -w src/ index.html vite.config.js"
"start": "vite --host",
"build:react": "vite build",
"lint": "npx prettier -w src/ index.html vite.config.js"
},
"browserslist": {
"production": [
@ -25,19 +23,18 @@
]
},
"devDependencies": {
"@emotion/react": "^11.13.0",
"@emotion/styled": "^11.13.0",
"@mui/icons-material": "^5.16.7",
"@mui/material": "^5.16.7",
"@vitejs/plugin-react": "4.3.1",
"prettier": "^3.3.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.3",
"@mui/material": "^5.14.5",
"@vitejs/plugin-react": "4.0.4",
"prettier": "^3.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.10.1",
"react-material-ui-carousel": "^3.4.2",
"react-router-dom": "^6.26.0",
"vite": "5.4.0",
"vite-bundle-analyzer": "^0.10.5"
"react-router-dom": "^6.15.0",
"vite": "4.4.9"
},
"dependencies": {
"react-responsive-carousel": "^3.2.23"

View file

@ -1,40 +0,0 @@
<svg viewBox="0 0 212 212" xmlns="http://www.w3.org/2000/svg">
<metadata
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
>
<rdf:RDF>
<cc:Work rdf:about="https://codeberg.org/forgejo/meta/src/branch/readme/branding#logo">
<dc:title>Forgejo logo</dc:title>
<cc:creator rdf:resource="https://caesarschinas.com/"><cc:attributionName>Caesar Schinas</cc:attributionName></cc:creator>
<cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/" />
</cc:Work>
</rdf:RDF>
</metadata>
<style type="text/css">
circle {
fill: none;
stroke: #000;
stroke-width: 15;
}
path {
fill: none;
stroke: #000;
stroke-width: 25;
}
.orange {
stroke:#ff6600;
}
.red {
stroke:#d40000;
}
</style>
<g transform="translate(6,6)">
<path d="M58 168 v-98 a50 50 0 0 1 50-50 h20" class="orange" />
<path d="M58 168 v-30 a50 50 0 0 1 50-50 h20" class="red" />
<circle cx="142" cy="20" r="18" class="orange" />
<circle cx="142" cy="88" r="18" class="red" />
<circle cx="58" cy="180" r="18" class="red" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

View file

@ -42,7 +42,12 @@ export default function Navbar() {
<ListItemText sx={{ textAlign: "center" }}>Back</ListItemText>
</ListItemButton>
{links.map((l, i) => (
<ListItemButton key={i} component={Link} to={l.url} onClick={toggleMiniNavOpen}>
<ListItemButton
key={i}
component={Link}
to={l.url}
onClick={toggleMiniNavOpen}
>
<ListItemText
sx={{ textAlign: "center" }}
primary={l.title.charAt(0).toUpperCase() + l.title.slice(1)}
@ -63,7 +68,13 @@ export default function Navbar() {
>
<Toolbar disableGutters sx={{ display: "flex", padding: "0 10px" }}>
<a href="/">
<IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: -0.5 }}>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: -0.5 }}
>
<img src="/images/logo-micro.png" width="40" height="40" />
</IconButton>
</a>
@ -72,7 +83,13 @@ export default function Navbar() {
</Typography>
{miniNav && (
<Box sx={{ marginLeft: "auto" }}>
<IconButton size="large" edge="start" color="inherit" aria-label="menu" onClick={toggleMiniNavOpen}>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
onClick={toggleMiniNavOpen}
>
<MenuIcon />
</IconButton>
</Box>

View file

@ -4,7 +4,10 @@ import "@css/experience-display.css";
export default function ExperienceDisplay(props) {
const { title, subtitle, children } = props;
return (
<Box className="experience-display" sx={{ borderLeft: "2px solid #F3AC20", paddingLeft: "20px", mt: "1rem" }}>
<Box
className="experience-display"
sx={{ borderLeft: "2px solid #F3AC20", paddingLeft: "20px", mt: "1rem" }}
>
<Typography variant="h6">{title}</Typography>
<Typography variant="body2" sx={{ opacity: 0.7 }}>
{subtitle}

View file

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

View file

@ -4,6 +4,6 @@
padding: 6px;
border: 2px solid #f3ac20;
border-radius: 50%;
margin-left: -28.8px;
margin-left: -28px;
margin-top: -16px;
}

View file

@ -4,7 +4,9 @@ import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";
const dob = new Date(2002, 4, 3);
const age = Math.abs(new Date(Date.now() - dob.getTime()).getUTCFullYear() - 1970);
const age = Math.abs(
new Date(Date.now() - dob.getTime()).getUTCFullYear() - 1970,
);
function AboutContact(props) {
const { title, info } = props;
@ -78,10 +80,13 @@ export default function About() {
About
</Typography>
<Typography variant="body1">
Hello! I'm Elijah Parker, a fullstack software engineer from Utah. I have a passion for developing
software that achieves "the impossible". I have experience using a wide variety of technologies including
React, Python, Java, and Kubernetes. I'm currently seeking an entry-level part time position or internship
with flexible hours to accommodate pursuit of a bachelorette degree.
Hello! I'm Elijah Parker, a fullstack software engineer from Utah.
I have a passion for developing software that achieves "the
impossible". I have experience using a wide variety of
technologies including React, Python, Java, and Kubernetes. I'm
currently seeking an entry-level part time position or internship
with flexible hours to accommodate pursuit of a bachelorette
degree.
</Typography>
<Box
className="about-contacts"
@ -97,7 +102,10 @@ export default function About() {
<AboutContact
title="Email"
info={
<a href="mailto:elijahglennparker@outlook.com" style={{ textDecoration: "none", fontSize: "14px" }}>
<a
href="mailto:elijahglennparker@outlook.com"
style={{ textDecoration: "none", fontSize: "14px" }}
>
elijahglennparker@outlook.com
</a>
}
@ -106,12 +114,14 @@ export default function About() {
</Box>
<Box className="about-contacts-right" sx={{ minWidth: "50%" }}>
<AboutContact title="Age" info={age} />
<AboutContact title="Freelance" info="Contact me" />
<AboutContact title="Freelance" info="Available" />
</Box>
</Box>
<Typography variant="body1" sx={{ mt: "2rem" }}>
Additionally, I have worked with a wide range of tools and frameworks including Git, PostgreSQL, MongoDB,
Docker, Kubernetes, Garden, JavaFX, MaterialUI, Spring Boot, Express, Gitlab, Gitea CI/CD.
Additionally, I have worked with a wide range of tools and
frameworks including Git, PostgreSQL, MongoDB, Docker, Kubernetes,
Garden, JavaFX, MaterialUI, Spring Boot, Express, Gitlab, Gitea
CI/CD.
</Typography>
</Box>
</Box>

View file

@ -58,9 +58,23 @@ export default function Contact() {
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 (385) 595 8161" />}
<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 (385) 595 8161"
/>
}
</Box>
<Box
className="messaging"
@ -128,7 +142,9 @@ export default function Contact() {
sx={{ m: "0 auto", width: "100%", maxWidth: "16em" }}
component={Link}
to={`mailto:elijahglennparker@outlook.com?subject=${contactSubject} | ${contactName} | ${contactEmail}&body=${contactBody}`}
disabled={!(contactSubject && contactBody && contactName && contactEmail)}
disabled={
!(contactSubject && contactBody && contactName && contactEmail)
}
>
Send Message
</ContactMessageButton>

View file

@ -3,7 +3,10 @@ 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="static-contact"
sx={{ display: "flex", mb: "2rem", width: "100%" }}
>
<Box
className="contact-strip"
style={{
@ -15,7 +18,10 @@ export default function ContactStrip(props) {
}}
>
<Box sx={{ textAlign: "left", display: "flex" }}>
<Icon className="contact-icon" style={{ transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms" }} />
<Icon
className="contact-icon"
style={{ transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms" }}
/>
<Typography variant="h4">{title}</Typography>
</Box>
<Box sx={{ width: "100%", mt: ".25rem", display: "inline-flex" }}>

View file

@ -15,32 +15,50 @@ export default function Education() {
}}
id="education"
>
<Typography variant="h2" sx={{ margin: "1rem auto", fontSize: 30, pb: ".5rem" }}>
<Typography
variant="h2"
sx={{ margin: "1rem auto", fontSize: 30, pb: ".5rem" }}
>
Education
</Typography>
<Box className="education-list">
<ExperienceDisplay title="Computer Science Student" subtitle="Jan 2024 - Present">
<ExperienceDisplay
title="Computer Science Student"
subtitle="Jan 2024 - Present"
>
<Typography sx={{ pt: "1rem" }}>
Pursuing B.S. in Computer Science: Software Engineering program, completed 27 credits. Anticipated
graduation December 2027
Pursuing B.S. in Computer Science: Software Engineering program,
completed 11 credits. Anticipated graduation December 2027
</Typography>
</ExperienceDisplay>
<ExperienceDisplay title="Full Stack Web Development" subtitle="Dec 2018 - May 2020 | Bottega devCamp">
<ExperienceDisplay
title="Full Stack Web Development"
subtitle="Dec 2018 - May 2020 | Bottega devCamp"
>
<Typography sx={{ pt: "1rem" }}>
Certificate of Competency in advanced Python, database foundations, system analysis, UML, and advanced web
development using HTML, JavaScript, React, XML, and JSON
Certificate of Competency in advanced Python, database foundations,
system analysis, UML, and advanced web development using HTML,
JavaScript, React, XML, and JSON
</Typography>
</ExperienceDisplay>
<ExperienceDisplay title="High School Diploma" subtitle="Aug 2017 - May 2020 | American Fork Highschool">
<ExperienceDisplay
title="High School Diploma"
subtitle="Aug 2017 - May 2020 | American Fork Highschool"
>
<Typography sx={{ pt: "1rem" }}>
GPA 3.9, CS Department Choice Award, Co-founder and President Computer Science Club, 4 years programming,
student tutor, AP courses in Computer Science, Calculus, Mechanics, and Government
GPA 3.9, CS Department Choice Award, Co-founder and President
Computer Science Club, 4 years programming, student tutor, AP
courses in Computer Science, Calculus, Mechanics, and Government
</Typography>
</ExperienceDisplay>
<ExperienceDisplay title="Cyber Security and Networking" subtitle="Jan 2019 - May 2019 | AFAs CyberPatriot">
<ExperienceDisplay
title="Cyber Security and Networking"
subtitle="Jan 2019 - May 2019 | AFAs CyberPatriot"
>
<Typography sx={{ pt: "1rem" }}>
2nd Place state networking security challenge, curriculum included Ubuntu security policies and PAM,
networking, init systems, advanced command line, processes, and scheduled tasks
2nd Place state networking security challenge, curriculum included
Ubuntu security policies and PAM, networking, init systems, advanced
command line, processes, and scheduled tasks
</Typography>
</ExperienceDisplay>
</Box>

View file

@ -9,8 +9,17 @@ import Typography from "@mui/material/Typography";
export default function Environments() {
return (
<Box style={{ padding: 10 }}>
<Accordion style={{ boxShadow: "none" }} defaultExpanded disableGutters square>
<AccordionSummary content={{ margin: 0 }} expandIcon={<ExpandMoreIcon />} style={{ margin: 0 }}>
<Accordion
style={{ boxShadow: "none" }}
defaultExpanded
disableGutters
square
>
<AccordionSummary
content={{ margin: 0 }}
expandIcon={<ExpandMoreIcon />}
style={{ margin: 0 }}
>
<Typography variant="h3">Environment</Typography>
</AccordionSummary>
<AccordionDetails>
@ -34,7 +43,10 @@ export default function Environments() {
}}
/>
</div>
<p>Section about deployment of applications to a Kubernetes cluster.</p>
<p>
Section about deployment of applications to a Kubernetes
cluster.
</p>
</Box>
</Box>
<Box
@ -58,7 +70,10 @@ export default function Environments() {
}}
/>
</div>
<p>Section about deployment using Garden for development and production</p>
<p>
Section about deployment using Garden for development and
production
</p>
</Box>
</Box>
</AccordionDetails>

View file

@ -15,36 +15,17 @@ export default function Experience() {
}}
id="experience"
>
<Typography variant="h2" sx={{ margin: "1rem auto", fontSize: 30, pb: ".5rem" }}>
<Typography
variant="h2"
sx={{ margin: "1rem auto", fontSize: 30, pb: ".5rem" }}
>
Experience
</Typography>
<Box className="experience-list">
<ExperienceDisplay
title="Fullstack Software Engineer"
subtitle="Jan 2024 - Present | AppRabbit, Springville UT"
title="Software Engineer Intern"
subtitle="Jun - Nov 2021 | Podium, Lehi UT"
>
<Typography variant="body1" sx={{ fontWeight: 600, pt: "1rem" }}>
Technologies used: <span style={{ fontFamily: "inherit", fontSize: "14px" }}>React, NestJS, Flutter</span>
</Typography>
<ul style={{ paddingLeft: "25px" }}>
<li>
<Typography>
Developed a highly scalable multi-platform mobile app build system and monitoring solution as project
lead
</Typography>
</li>
<li>
<Typography>Automated creation of Owncast livestreaming servers on Digital Ocean</Typography>
</li>
<li>
<Typography>Implemented strict API policies and authorization systems</Typography>
</li>
<li>
<Typography>Used Stripe to manage user subscriptions and client data</Typography>
</li>
</ul>
</ExperienceDisplay>
<ExperienceDisplay title="Software Engineer Intern" subtitle="Jun - Nov 2021 | Podium, Lehi UT">
<Typography variant="body1" sx={{ fontWeight: 600, pt: "1rem" }}>
Technologies used:{" "}
<span
@ -59,18 +40,30 @@ export default function Experience() {
<ul style={{ paddingLeft: "25px" }}>
<li>
<Typography>
Created fullstack application using React and Express to manage QA data as solo developer
Developed automated end to end UI & API tests and automated
collection of test coverage
</Typography>
</li>
<li>
<Typography>Modularized API testing resources as project lead</Typography>
</li>
<li>
<Typography>Improved performance of core QA services by 20%</Typography>
<Typography>
Modularized API testing resources as project lead
</Typography>
</li>
<li>
<Typography>
Developed automated end to end UI & API tests and automated collection of test coverage
Automated scripting framework to gauge product reliability as
project lead
</Typography>
</li>
<li>
<Typography>
Improved performance of core QA services by 20%
</Typography>
</li>
<li>
<Typography>
Created fullstack application using React and Express to manage
QA data as solo developer
</Typography>
</li>
</ul>

View file

@ -9,8 +9,9 @@ export default function Header() {
React Fullstack Software Engineer
</Typography>
<Typography variant="body1">
Specializing in DevOps tools and code reliability. If you're a business seeking to improve developer velocity
or are looking to hire, contact me{" "}
Specializing in DevOps tools and code reliability. If you're a
business seeking to improve developer velocity or are looking to hire,
contact me{" "}
<a
href="/#contact"
style={{

View file

@ -4,7 +4,7 @@ import Chip from "@mui/material/Chip";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import { SiForgejo } from "react-icons/si";
import { SiGitea } from "react-icons/si";
function ProjectLanguages(props) {
const { languages, smallMode } = props;
@ -23,7 +23,11 @@ function ProjectLanguages(props) {
}}
>
{languages.map((l, i) => (
<Chip key={i} label={l} sx={{ borderRadius: "5px", margin: smallMode ? ".25rem" : "" }} />
<Chip
key={i}
label={l}
sx={{ borderRadius: "5px", margin: smallMode ? ".25rem" : "" }}
/>
))}
</Box>
);
@ -57,7 +61,11 @@ export default function ProjectTile({
}}
>
<div style={{ width: "100%" }}>
<img src={image} style={{ width: "90%", maxWidth: 512, marginLeft: "auto" }} onClick={imageClick} />
<img
src={image}
style={{ width: "90%", maxWidth: 512, marginLeft: "auto" }}
onClick={imageClick}
/>
</div>
<Box
@ -96,12 +104,12 @@ export default function ProjectTile({
<a
href={link ?? "/"}
style={{
color: "#ef6723",
color: "#609926",
opacity: gitHov ? ".8" : "1",
display: "flex",
}}
>
<SiForgejo
<SiGitea
size="1.5em"
style={{
padding: 5,

View file

@ -9,8 +9,17 @@ import Box from "@mui/material/Box";
export default function Projects() {
return (
<Box style={{ padding: 10 }}>
<Accordion style={{ boxShadow: "none", margin: 0 }} defaultExpanded disableGutters square>
<AccordionSummary content={{ margin: 0 }} expandIcon={<ExpandMoreIcon />} style={{ margin: 0 }}>
<Accordion
style={{ boxShadow: "none", margin: 0 }}
defaultExpanded
disableGutters
square
>
<AccordionSummary
content={{ margin: 0 }}
expandIcon={<ExpandMoreIcon />}
style={{ margin: 0 }}
>
<h3>Projects</h3>
</AccordionSummary>
<AccordionDetails>

View file

@ -15,7 +15,12 @@ export default function Projects() {
return (
<Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="portfolio">
<PhotoHover image={image} open={open} setOpen={setOpen} alt={"Missing Project Photo"} />
<PhotoHover
image={image}
open={open}
setOpen={setOpen}
alt={"Missing Project Photo"}
/>
<div style={{ display: "flex" }}>
<Typography variant="h2" sx={{ margin: "2rem auto", fontSize: 30 }}>
Projects
@ -25,45 +30,50 @@ export default function Projects() {
image="/portfolio/projects/minecluster.png"
title="Minecluster"
year="2023"
link="https://forgejo.dunemask.dev/elysium/minecluster"
link="https://gitea.dunemask.dev/elysium/minecluster"
openPhoto={openPhoto}
languages={["React", "Express", "Kubernetes"]}
>
Deploy and monitor MInecraft servers in your kubernetes cluster. Easily scales and provides a stateful
experience to make managing multiple servers simple.
Deploy and monitor MInecraft servers in your kubernetes cluster. Easily
scales and provides a stateful experience to make managing multiple
servers simple.
</ProjectTile>
<ProjectTile
image="/portfolio/projects/qualiteer.png"
title="Qualiteer"
year="2022"
link="https://forgejo.dunemask.dev/elysium/qualiteer"
link="https://gitea.dunemask.dev/elysium/qualiteer"
openPhoto={openPhoto}
languages={["React", "Express", "Kubernetes", "PostgreSQL", "RabbitMQ"]}
>
Manage failing tests and silence unecessary alerts. Check the state of your services worldwide and improve
developer confidence with a simple interface.
Manage failing tests and silence unecessary alerts. Check the state of
your services worldwide and improve developer confidence with a simple
interface.
</ProjectTile>
<ProjectTile
image="/portfolio/projects/khufu.png"
title="Khufu"
year="2021"
link="https://forgejo.dunemask.dev/elysium/khufu"
link="https://gitea.dunemask.dev/elysium/khufu"
openPhoto={openPhoto}
languages={["React", "Express"]}
>
Basic cloud file management built on React class components. Simple interface allows users to upload, delete,
and multiple files.
Basic cloud file management built on React class components. Simple
interface allows users to upload, delete, and multiple files.
</ProjectTile>
<ProjectTile
image="/portfolio/projects/codepen.png"
title="Codepen"
year="2020"
link="https://github.com/Dunemask/Codepen-Website-Replication"
link="https://gitea.dunemask.dev/dunemask/codepen"
openPhoto={openPhoto}
languages={["HTML5", "CSS"]}
>
Visual replication of the website{" "}
<a href="https://codepen.io" style={{ color: "black", fontFamily: "inherit", fontSize: "inherit" }}>
<a
href="https://codepen.io"
style={{ color: "black", fontFamily: "inherit", fontSize: "inherit" }}
>
codepen.io
</a>{" "}
webpage in 2020. Simple demonstration of css and html
@ -72,22 +82,24 @@ export default function Projects() {
image="/portfolio/projects/movieplayer.png"
title="Media Player"
year="2018"
link="https://github.com/Dunemask/dunemask.github.io/blob/a1315519ac111fb2c7568362586bcebc4d94d019/files/java/MoviePlayer.jar"
link="https://legacy-21.dunemask.net/files/java/MoviePlayer.jar"
openPhoto={openPhoto}
languages={["Java", "JavaFX"]}
>
Simple media player built on javafx. Player supports media seeking, playback controls, and speed distortion.
Simple media player built on javafx. Player supports media seeking,
playback controls, and speed distortion.
</ProjectTile>
<ProjectTile
image="/portfolio/projects/voxelcraft.png"
title="Voxelcraft"
year="2018"
link="https://forgejo.dunemask.dev/dunemask/voxelcraft"
link="https://gitea.dunemask.dev/dunemask/voxelcraft"
openPhoto={openPhoto}
languages={["JavaFX"]}
>
Voxel game built on a simple rendering engine written with JavaFX. Generate your terrain and form your ideal
world by exploring and harvesting resources.
Voxel game built on a simple rendering engine written with JavaFX.
Generate your terrain and form your ideal world by exploring and
harvesting resources.
</ProjectTile>
</Box>
);

View file

@ -4,7 +4,14 @@ import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import Typography from "@mui/material/Typography";
export default function SkillPaper({ src, bgColor, fgColor, heading, Icon, openPhoto }) {
export default function SkillPaper({
src,
bgColor,
fgColor,
heading,
Icon,
openPhoto,
}) {
const mediaClick = () => openPhoto(src);
return (
<Box>
@ -14,7 +21,11 @@ export default function SkillPaper({ src, bgColor, fgColor, heading, Icon, openP
backgroundColor: bgColor,
}}
>
<img src={src} title={`${heading} Pluralsight Score`} onClick={mediaClick} />
<img
src={src}
title={`${heading} Pluralsight Score`}
onClick={mediaClick}
/>
<CardContent sx={{ color: fgColor, backgroundColor: bgColor }}>
<Typography variant="h5" component="div">
<div style={{ display: "inline-flex" }}>

View file

@ -26,9 +26,27 @@ export default function Skills() {
const testoutCertClick = () => openPhoto("/portfolio/linux-cert.png");
const skills = [
<SkillPaper src="/portfolio/iq/python.png" fgColor="white" bgColor="#3f7ed4" heading="Python" Icon={FaPython} />,
<SkillPaper src="/portfolio/iq/react.png" fgColor="black" bgColor="#61dafb" heading="React" Icon={FaReact} />,
<SkillPaper src="/portfolio/iq/java.png" fgColor="white" bgColor="#ea8c10 " heading="Java" Icon={FaJava} />,
<SkillPaper
src="/portfolio/iq/python.png"
fgColor="white"
bgColor="#3f7ed4"
heading="Python"
Icon={FaPython}
/>,
<SkillPaper
src="/portfolio/iq/react.png"
fgColor="black"
bgColor="#61dafb"
heading="React"
Icon={FaReact}
/>,
<SkillPaper
src="/portfolio/iq/java.png"
fgColor="white"
bgColor="#ea8c10 "
heading="Java"
Icon={FaJava}
/>,
<SkillPaper
src="/portfolio/iq/javascript.png"
fgColor="black"
@ -36,14 +54,25 @@ export default function Skills() {
heading="Javascript"
Icon={SiJavascript}
/>,
<SkillPaper src="/portfolio/iq/html.png" fgColor="white" bgColor="#e9562f" heading="HTML 5" Icon={FaHtml5} />,
<SkillPaper
src="/portfolio/iq/html.png"
fgColor="white"
bgColor="#e9562f"
heading="HTML 5"
Icon={FaHtml5}
/>,
];
const openSkill = (skillIndex) => openPhoto(skills[skillIndex].props.src);
return (
<Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="achievements">
<PhotoHover image={image} open={open} setOpen={setOpen} alt={"Certificate"} />
<PhotoHover
image={image}
open={open}
setOpen={setOpen}
alt={"Certificate"}
/>
<Box
style={{
display: "flex",
@ -72,7 +101,8 @@ export default function Skills() {
sx={{
maxWidth: 374,
margin: "10px auto",
boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
boxShadow:
"0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
}}
>
<img
@ -86,7 +116,8 @@ export default function Skills() {
Fullstack Certification
</Typography>
<Typography variant="body2">
Certificate of profeciency in Python3, React, CSS, and Javascript
Certificate of profeciency in Python3, React, CSS, and
Javascript
</Typography>
</CardContent>
</Card>
@ -94,7 +125,8 @@ export default function Skills() {
sx={{
maxWidth: 374,
margin: "10px auto",
boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
boxShadow:
"0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
backgroundColor: "#c3802b",
}}
>
@ -112,7 +144,9 @@ export default function Skills() {
<Typography gutterBottom variant="h5" component="div">
Linux Administration Certificate
</Typography>
<Typography variant="body2">Certificate of profeciency in Linux client administration</Typography>
<Typography variant="body2">
Certificate of profeciency in Linux client administration
</Typography>
</CardContent>
</Card>
</Box>
@ -133,10 +167,15 @@ export default function Skills() {
maxWidth: 374,
display: "block",
margin: "auto",
boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
boxShadow:
"0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
}}
>
<Suspense fallback={<Skeleton variant="rectangular" width="374px" height="100%" />}>
<Suspense
fallback={
<Skeleton variant="rectangular" width="374px" height="100%" />
}
>
<Carousel
showArrows={true}
showStatus={false}

View file

@ -1,10 +1,14 @@
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";
export default function Social() {
return (
@ -40,77 +44,91 @@ export default function Social() {
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)",
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
<div style={{ position: "relative", overflow: "visible" }}>
<Avatar
style={{
width: "4rem",
height: "4rem",
position: "absolute",
top: "-2rem",
left: "-2rem",
backgroundColor: "#0073b1",
}}
>
<LinkedInIcon
style={{
width: "24px",
height: "24px",
color: "inherit",
marginTop: "auto",
marginBottom: "auto",
marginLeft: "auto",
marginRight: ".25rem",
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" 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 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"}
to={"https://gitea.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)",
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>
<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"
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",
}}
style={{ color: "rgb(96, 153, 38)" }}
>
Forgejo
<img
src="/images/forgejo.svg"
width="24px"
height="24px"
style={{
marginLeft: "auto",
marginRight: ".25rem",
marginTop: "auto",
marginBottom: "auto",
}}
/>
Gitea
</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 variant="body2" component="div">
Portfolio showcasing integration with CI/CD and Kubernetes.
Technologies include React, Express, Python, Helm, and Docker
</Typography>
</CardContent>
</Card>
@ -122,26 +140,44 @@ export default function Social() {
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)",
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
<div style={{ position: "relative", overflow: "visible" }}>
<Avatar
style={{
width: "4rem",
height: "4rem",
position: "absolute",
top: "-2rem",
left: "-2rem",
backgroundColor: "#24292f",
}}
>
<GitHubIcon
style={{
color: "inherit",
marginLeft: "auto",
marginTop: "auto",
marginRight: ".25rem",
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" 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 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>

View file

@ -23,7 +23,8 @@ export default function ContactCard(props) {
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)",
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 }}>
@ -41,6 +42,7 @@ export default function ContactCard(props) {
mb: 1,
zIndex: 5,
backgroundColor: "rgba(0, 115, 177,.1)",
borderColor: "white",
color: "#0073b1",
}}
/>
@ -50,10 +52,22 @@ export default function ContactCard(props) {
</Typography>
</CardContent>
<CardActions style={{ display: "flex", justifyContent: "center" }}>
<IconButton size="sm" variant="plain" component={Link} to={linkedin} sx={{ color: "#0073b1" }}>
<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}>
<IconButton
size="sm"
variant="plain"
color="neutral"
component={Link}
to={email}
>
<MailIcon />
</IconButton>
</CardActions>

View file

@ -38,7 +38,12 @@ export default function ReferenceCard(props) {
textAlign: "center",
}}
>
<Typography variant="h5" component={Link} to={linkedin} sx={{ textDecoration: "none", color: "inherit" }}>
<Typography
variant="h5"
component={Link}
to={linkedin}
sx={{ textDecoration: "none", color: "inherit" }}
>
{name}
</Typography>
<Typography variant="h6">{title}</Typography>

View file

@ -1,14 +1,9 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { analyzer } from "vite-bundle-analyzer";
import path from "node:path";
const plugins = [react()];
if (process.env.USE_ANALYZER === "true") plugins.push(analyzer());
export default () => {
return defineConfig({
plugins,
plugins: [react()],
server: {
port: process.env.VITE_DEV_PORT ?? 5173,
host: "0.0.0.0",