[FEATURE] Updated Stylings
This commit is contained in:
parent
5ab6e81d29
commit
d24f39bff4
26 changed files with 251 additions and 436 deletions
8
.prettierrc
Normal file
8
.prettierrc
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
printWidth: 120
|
||||
semi: true
|
||||
singleQuote: false
|
||||
trailingComma: all
|
||||
bracketSpacing: true
|
||||
arrowParens: always
|
||||
requirePragma: false
|
||||
insertPragma: false
|
||||
38
index.html
38
index.html
|
|
@ -23,35 +23,14 @@
|
|||
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>
|
||||
|
|
@ -146,16 +125,13 @@
|
|||
<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);
|
||||
}
|
||||
|
|
|
|||
53
package-lock.json
generated
53
package-lock.json
generated
|
|
@ -14,8 +14,8 @@
|
|||
"devDependencies": {
|
||||
"@emotion/react": "^11.13.0",
|
||||
"@emotion/styled": "^11.13.0",
|
||||
"@mui/icons-material": "^5.16.6",
|
||||
"@mui/material": "^5.16.6",
|
||||
"@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",
|
||||
|
|
@ -23,7 +23,8 @@
|
|||
"react-icons": "^5.2.1",
|
||||
"react-material-ui-carousel": "^3.4.2",
|
||||
"react-router-dom": "^6.26.0",
|
||||
"vite": "5.3.5"
|
||||
"vite": "5.4.0",
|
||||
"vite-bundle-analyzer": "^0.10.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
|
|
@ -902,9 +903,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mui/core-downloads-tracker": {
|
||||
"version": "5.16.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.6.tgz",
|
||||
"integrity": "sha512-kytg6LheUG42V8H/o/Ptz3olSO5kUXW9zF0ox18VnblX6bO2yif1FPItgc3ey1t5ansb1+gbe7SatntqusQupg==",
|
||||
"version": "5.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz",
|
||||
"integrity": "sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==",
|
||||
"dev": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
|
|
@ -912,9 +913,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mui/icons-material": {
|
||||
"version": "5.16.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.6.tgz",
|
||||
"integrity": "sha512-ceNGjoXheH9wbIFa1JHmSc9QVjJUvh18KvHrR4/FkJCSi9HXJ+9ee1kUhCOEFfuxNF8UB6WWVrIUOUgRd70t0A==",
|
||||
"version": "5.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.7.tgz",
|
||||
"integrity": "sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.23.9"
|
||||
|
|
@ -938,14 +939,14 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mui/material": {
|
||||
"version": "5.16.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.6.tgz",
|
||||
"integrity": "sha512-0LUIKBOIjiFfzzFNxXZBRAyr9UQfmTAFzbt6ziOU2FDXhorNN2o3N9/32mNJbCA8zJo2FqFU6d3dtoqUDyIEfA==",
|
||||
"version": "5.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.7.tgz",
|
||||
"integrity": "sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.23.9",
|
||||
"@mui/core-downloads-tracker": "^5.16.6",
|
||||
"@mui/system": "^5.16.6",
|
||||
"@mui/core-downloads-tracker": "^5.16.7",
|
||||
"@mui/system": "^5.16.7",
|
||||
"@mui/types": "^7.2.15",
|
||||
"@mui/utils": "^5.16.6",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
|
|
@ -1042,9 +1043,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mui/system": {
|
||||
"version": "5.16.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.6.tgz",
|
||||
"integrity": "sha512-5xgyJjBIMPw8HIaZpfbGAaFYPwImQn7Nyh+wwKWhvkoIeDosQ1ZMVrbTclefi7G8hNmqhip04duYwYpbBFnBgw==",
|
||||
"version": "5.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.7.tgz",
|
||||
"integrity": "sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.23.9",
|
||||
|
|
@ -2447,13 +2448,13 @@
|
|||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "5.3.5",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz",
|
||||
"integrity": "sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==",
|
||||
"version": "5.4.0",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.0.tgz",
|
||||
"integrity": "sha512-5xokfMX0PIiwCMCMb9ZJcMyh5wbBun0zUzKib+L65vAZ8GY9ePZMXxFrHbr/Kyll2+LSCY7xtERPpxkBDKngwg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.21.3",
|
||||
"postcss": "^8.4.39",
|
||||
"postcss": "^8.4.40",
|
||||
"rollup": "^4.13.0"
|
||||
},
|
||||
"bin": {
|
||||
|
|
@ -2473,6 +2474,7 @@
|
|||
"less": "*",
|
||||
"lightningcss": "^1.21.0",
|
||||
"sass": "*",
|
||||
"sass-embedded": "*",
|
||||
"stylus": "*",
|
||||
"sugarss": "*",
|
||||
"terser": "^5.4.0"
|
||||
|
|
@ -2490,6 +2492,9 @@
|
|||
"sass": {
|
||||
"optional": true
|
||||
},
|
||||
"sass-embedded": {
|
||||
"optional": true
|
||||
},
|
||||
"stylus": {
|
||||
"optional": true
|
||||
},
|
||||
|
|
@ -2501,6 +2506,12 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vite-bundle-analyzer": {
|
||||
"version": "0.10.5",
|
||||
"resolved": "https://registry.npmjs.org/vite-bundle-analyzer/-/vite-bundle-analyzer-0.10.5.tgz",
|
||||
"integrity": "sha512-gxIFQ6ifoQjDXaVWJmXHwI2VEVqyz6FXHKicNpTe4Pr2MAka6NQVRcmgznziRzbl9rhMP0qIc5Be8PxfGXUhgQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/yallist": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
||||
|
|
|
|||
15
package.json
15
package.json
|
|
@ -6,9 +6,11 @@
|
|||
"author": "Dunemask",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "vite --host",
|
||||
"build:react": "vite build",
|
||||
"lint": "npx prettier -w src/ index.html vite.config.js"
|
||||
"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"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
|
|
@ -25,8 +27,8 @@
|
|||
"devDependencies": {
|
||||
"@emotion/react": "^11.13.0",
|
||||
"@emotion/styled": "^11.13.0",
|
||||
"@mui/icons-material": "^5.16.6",
|
||||
"@mui/material": "^5.16.6",
|
||||
"@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",
|
||||
|
|
@ -34,7 +36,8 @@
|
|||
"react-icons": "^5.2.1",
|
||||
"react-material-ui-carousel": "^3.4.2",
|
||||
"react-router-dom": "^6.26.0",
|
||||
"vite": "5.3.5"
|
||||
"vite": "5.4.0",
|
||||
"vite-bundle-analyzer": "^0.10.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-responsive-carousel": "^3.2.23"
|
||||
|
|
|
|||
40
public/images/forgejo.svg
Normal file
40
public/images/forgejo.svg
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
BIN
public/portfolio/projects/laptop-frame.png
Normal file
BIN
public/portfolio/projects/laptop-frame.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -42,12 +42,7 @@ 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)}
|
||||
|
|
@ -68,13 +63,7 @@ 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>
|
||||
|
|
@ -83,13 +72,7 @@ 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>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,7 @@ 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}
|
||||
|
|
|
|||
|
|
@ -15,10 +15,7 @@ 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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
padding: 6px;
|
||||
border: 2px solid #f3ac20;
|
||||
border-radius: 50%;
|
||||
margin-left: -28px;
|
||||
margin-left: -28.8px;
|
||||
margin-top: -16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,7 @@ 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;
|
||||
|
|
@ -80,13 +78,10 @@ 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"
|
||||
|
|
@ -102,10 +97,7 @@ 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>
|
||||
}
|
||||
|
|
@ -114,14 +106,12 @@ export default function About() {
|
|||
</Box>
|
||||
<Box className="about-contacts-right" sx={{ minWidth: "50%" }}>
|
||||
<AboutContact title="Age" info={age} />
|
||||
<AboutContact title="Freelance" info="Available" />
|
||||
<AboutContact title="Freelance" info="Contact me" />
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -58,23 +58,9 @@ 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"
|
||||
|
|
@ -142,9 +128,7 @@ 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>
|
||||
|
|
|
|||
|
|
@ -3,10 +3,7 @@ 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={{
|
||||
|
|
@ -18,10 +15,7 @@ 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" }}>
|
||||
|
|
|
|||
|
|
@ -15,50 +15,32 @@ 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 11 credits. Anticipated graduation December 2027
|
||||
Pursuing B.S. in Computer Science: Software Engineering program, completed 27 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 | AFA’s CyberPatriot"
|
||||
>
|
||||
<ExperienceDisplay title="Cyber Security and Networking" subtitle="Jan 2019 - May 2019 | AFA’s 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>
|
||||
|
|
|
|||
|
|
@ -9,17 +9,8 @@ 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>
|
||||
|
|
@ -43,10 +34,7 @@ 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
|
||||
|
|
@ -70,10 +58,7 @@ 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>
|
||||
|
|
|
|||
|
|
@ -15,17 +15,36 @@ 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="Software Engineer Intern"
|
||||
subtitle="Jun - Nov 2021 | Podium, Lehi UT"
|
||||
title="Fullstack Software Engineer"
|
||||
subtitle="Jan 2024 - Present | AppRabbit, Springville 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
|
||||
|
|
@ -40,30 +59,18 @@ export default function Experience() {
|
|||
<ul style={{ paddingLeft: "25px" }}>
|
||||
<li>
|
||||
<Typography>
|
||||
Developed automated end to end UI & API tests and automated
|
||||
collection of test coverage
|
||||
Created fullstack application using React and Express to manage QA data as solo developer
|
||||
</Typography>
|
||||
</li>
|
||||
<li>
|
||||
<Typography>
|
||||
Modularized API testing resources as project lead
|
||||
</Typography>
|
||||
<Typography>Modularized API testing resources as project lead</Typography>
|
||||
</li>
|
||||
<li>
|
||||
<Typography>Improved performance of core QA services by 20%</Typography>
|
||||
</li>
|
||||
<li>
|
||||
<Typography>
|
||||
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
|
||||
Developed automated end to end UI & API tests and automated collection of test coverage
|
||||
</Typography>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -9,9 +9,8 @@ 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={{
|
||||
|
|
|
|||
|
|
@ -23,11 +23,7 @@ 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>
|
||||
);
|
||||
|
|
@ -61,11 +57,7 @@ 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
|
||||
|
|
|
|||
|
|
@ -9,17 +9,8 @@ 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>
|
||||
|
|
|
|||
|
|
@ -15,12 +15,7 @@ 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
|
||||
|
|
@ -34,9 +29,8 @@ export default function Projects() {
|
|||
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"
|
||||
|
|
@ -46,9 +40,8 @@ export default function Projects() {
|
|||
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"
|
||||
|
|
@ -58,8 +51,8 @@ export default function Projects() {
|
|||
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"
|
||||
|
|
@ -70,10 +63,7 @@ export default function Projects() {
|
|||
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
|
||||
|
|
@ -86,8 +76,7 @@ export default function Projects() {
|
|||
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"
|
||||
|
|
@ -97,9 +86,8 @@ export default function Projects() {
|
|||
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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,14 +4,7 @@ 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>
|
||||
|
|
@ -21,11 +14,7 @@ export default function SkillPaper({
|
|||
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" }}>
|
||||
|
|
|
|||
|
|
@ -26,27 +26,9 @@ 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"
|
||||
|
|
@ -54,25 +36,14 @@ 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",
|
||||
|
|
@ -101,8 +72,7 @@ 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
|
||||
|
|
@ -116,8 +86,7 @@ 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>
|
||||
|
|
@ -125,8 +94,7 @@ 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",
|
||||
}}
|
||||
>
|
||||
|
|
@ -144,9 +112,7 @@ 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>
|
||||
|
|
@ -167,15 +133,10 @@ 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}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
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 (
|
||||
|
|
@ -42,44 +40,29 @@ 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",
|
||||
}}
|
||||
>
|
||||
<div style={{ position: "relative", overflow: "visible" }}>
|
||||
<Avatar
|
||||
style={{
|
||||
width: "4rem",
|
||||
height: "4rem",
|
||||
position: "absolute",
|
||||
top: "-2rem",
|
||||
left: "-2rem",
|
||||
backgroundColor: "#0073b1",
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography variant="h5" component="div" style={{ color: "#0073b1", display: "flex" }}>
|
||||
Linkedin
|
||||
<LinkedInIcon
|
||||
style={{
|
||||
width: "2.125rem",
|
||||
height: "2.125rem",
|
||||
color: "white",
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
color: "inherit",
|
||||
marginTop: "auto",
|
||||
marginBottom: "auto",
|
||||
marginLeft: "auto",
|
||||
marginRight: ".25rem",
|
||||
}}
|
||||
/>
|
||||
</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 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>
|
||||
|
|
@ -90,57 +73,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",
|
||||
}}
|
||||
>
|
||||
<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" }}>
|
||||
<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)",
|
||||
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">
|
||||
Portfolio showcasing integration with CI/CD and Kubernetes.
|
||||
Technologies include React, Express, Python, Helm, and Docker
|
||||
<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>
|
||||
|
|
@ -152,44 +122,26 @@ 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",
|
||||
}}
|
||||
>
|
||||
<div style={{ position: "relative", overflow: "visible" }}>
|
||||
<Avatar
|
||||
style={{
|
||||
width: "4rem",
|
||||
height: "4rem",
|
||||
position: "absolute",
|
||||
top: "-2rem",
|
||||
left: "-2rem",
|
||||
backgroundColor: "#24292f",
|
||||
}}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography variant="h5" component="div" style={{ color: "#24292f", display: "flex" }}>
|
||||
Github
|
||||
<GitHubIcon
|
||||
style={{
|
||||
width: "2.5rem",
|
||||
height: "2.5rem",
|
||||
color: "white",
|
||||
color: "inherit",
|
||||
marginLeft: "auto",
|
||||
marginTop: "auto",
|
||||
marginRight: ".25rem",
|
||||
}}
|
||||
/>
|
||||
</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 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>
|
||||
|
|
|
|||
|
|
@ -23,8 +23,7 @@ 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 }}>
|
||||
|
|
@ -42,7 +41,6 @@ export default function ContactCard(props) {
|
|||
mb: 1,
|
||||
zIndex: 5,
|
||||
backgroundColor: "rgba(0, 115, 177,.1)",
|
||||
borderColor: "white",
|
||||
color: "#0073b1",
|
||||
}}
|
||||
/>
|
||||
|
|
@ -52,22 +50,10 @@ 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>
|
||||
|
|
|
|||
|
|
@ -38,12 +38,7 @@ 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>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,14 @@
|
|||
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: [react()],
|
||||
plugins,
|
||||
server: {
|
||||
port: process.env.VITE_DEV_PORT ?? 5173,
|
||||
host: "0.0.0.0",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue