[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"
|
name="keywords"
|
||||||
content="Web Developer React, Fullstack Development, Web Developer Portfolio, Elijah Parker, Dunemask, React Developer, QA Software Developer"
|
content="Web Developer React, Fullstack Development, Web Developer Portfolio, Elijah Parker, Dunemask, React Developer, QA Software Developer"
|
||||||
/>
|
/>
|
||||||
<link
|
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png?v=jan27deltaburn" />
|
||||||
rel="apple-touch-icon"
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png?v=jan27deltaburn" />
|
||||||
sizes="180x180"
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png?v=jan27deltaburn" />
|
||||||
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="manifest" href="/favicons/site.webmanifest?v=jan27deltaburn" />
|
||||||
<link
|
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg?v=jan27deltaburn" color="#ffc40d" />
|
||||||
rel="mask-icon"
|
|
||||||
href="/favicons/safari-pinned-tab.svg?v=jan27deltaburn"
|
|
||||||
color="#ffc40d"
|
|
||||||
/>
|
|
||||||
<link rel="shortcut icon" href="/favicons/favicon.ico?v=jan27deltaburn" />
|
<link rel="shortcut icon" href="/favicons/favicon.ico?v=jan27deltaburn" />
|
||||||
<meta name="msapplication-TileColor" content="#ffc40d" />
|
<meta name="msapplication-TileColor" content="#ffc40d" />
|
||||||
<meta
|
<meta name="msapplication-config" content="/favicons/browserconfig.xml?v=jan27deltaburn" />
|
||||||
name="msapplication-config"
|
|
||||||
content="/favicons/browserconfig.xml?v=jan27deltaburn"
|
|
||||||
/>
|
|
||||||
<meta name="theme-color" content="#5d5d5d" />
|
<meta name="theme-color" content="#5d5d5d" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -146,16 +125,13 @@
|
||||||
<script>
|
<script>
|
||||||
function loaderInitScript() {
|
function loaderInitScript() {
|
||||||
function showLoader() {
|
function showLoader() {
|
||||||
const mediaCover = document.getElementById(
|
const mediaCover = document.getElementById("loading-content-media-cover");
|
||||||
"loading-content-media-cover",
|
|
||||||
);
|
|
||||||
if (mediaCover === null || mediaCover.style === null) return;
|
if (mediaCover === null || mediaCover.style === null) return;
|
||||||
mediaCover.style.display = "block";
|
mediaCover.style.display = "block";
|
||||||
}
|
}
|
||||||
|
|
||||||
function onDocumentStateChange(e) {
|
function onDocumentStateChange(e) {
|
||||||
if (document.readyState === "interactive")
|
if (document.readyState === "interactive") setTimeout(showLoader, 2000);
|
||||||
setTimeout(showLoader, 2000);
|
|
||||||
}
|
}
|
||||||
document.addEventListener("readystatechange", onDocumentStateChange);
|
document.addEventListener("readystatechange", onDocumentStateChange);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
53
package-lock.json
generated
53
package-lock.json
generated
|
|
@ -14,8 +14,8 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@emotion/react": "^11.13.0",
|
"@emotion/react": "^11.13.0",
|
||||||
"@emotion/styled": "^11.13.0",
|
"@emotion/styled": "^11.13.0",
|
||||||
"@mui/icons-material": "^5.16.6",
|
"@mui/icons-material": "^5.16.7",
|
||||||
"@mui/material": "^5.16.6",
|
"@mui/material": "^5.16.7",
|
||||||
"@vitejs/plugin-react": "4.3.1",
|
"@vitejs/plugin-react": "4.3.1",
|
||||||
"prettier": "^3.3.3",
|
"prettier": "^3.3.3",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
|
|
@ -23,7 +23,8 @@
|
||||||
"react-icons": "^5.2.1",
|
"react-icons": "^5.2.1",
|
||||||
"react-material-ui-carousel": "^3.4.2",
|
"react-material-ui-carousel": "^3.4.2",
|
||||||
"react-router-dom": "^6.26.0",
|
"react-router-dom": "^6.26.0",
|
||||||
"vite": "5.3.5"
|
"vite": "5.4.0",
|
||||||
|
"vite-bundle-analyzer": "^0.10.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@ampproject/remapping": {
|
"node_modules/@ampproject/remapping": {
|
||||||
|
|
@ -902,9 +903,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/core-downloads-tracker": {
|
"node_modules/@mui/core-downloads-tracker": {
|
||||||
"version": "5.16.6",
|
"version": "5.16.7",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.6.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz",
|
||||||
"integrity": "sha512-kytg6LheUG42V8H/o/Ptz3olSO5kUXW9zF0ox18VnblX6bO2yif1FPItgc3ey1t5ansb1+gbe7SatntqusQupg==",
|
"integrity": "sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"funding": {
|
"funding": {
|
||||||
"type": "opencollective",
|
"type": "opencollective",
|
||||||
|
|
@ -912,9 +913,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/icons-material": {
|
"node_modules/@mui/icons-material": {
|
||||||
"version": "5.16.6",
|
"version": "5.16.7",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.6.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.7.tgz",
|
||||||
"integrity": "sha512-ceNGjoXheH9wbIFa1JHmSc9QVjJUvh18KvHrR4/FkJCSi9HXJ+9ee1kUhCOEFfuxNF8UB6WWVrIUOUgRd70t0A==",
|
"integrity": "sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.23.9"
|
"@babel/runtime": "^7.23.9"
|
||||||
|
|
@ -938,14 +939,14 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/material": {
|
"node_modules/@mui/material": {
|
||||||
"version": "5.16.6",
|
"version": "5.16.7",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.6.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.7.tgz",
|
||||||
"integrity": "sha512-0LUIKBOIjiFfzzFNxXZBRAyr9UQfmTAFzbt6ziOU2FDXhorNN2o3N9/32mNJbCA8zJo2FqFU6d3dtoqUDyIEfA==",
|
"integrity": "sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.23.9",
|
"@babel/runtime": "^7.23.9",
|
||||||
"@mui/core-downloads-tracker": "^5.16.6",
|
"@mui/core-downloads-tracker": "^5.16.7",
|
||||||
"@mui/system": "^5.16.6",
|
"@mui/system": "^5.16.7",
|
||||||
"@mui/types": "^7.2.15",
|
"@mui/types": "^7.2.15",
|
||||||
"@mui/utils": "^5.16.6",
|
"@mui/utils": "^5.16.6",
|
||||||
"@popperjs/core": "^2.11.8",
|
"@popperjs/core": "^2.11.8",
|
||||||
|
|
@ -1042,9 +1043,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/system": {
|
"node_modules/@mui/system": {
|
||||||
"version": "5.16.6",
|
"version": "5.16.7",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.6.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.7.tgz",
|
||||||
"integrity": "sha512-5xgyJjBIMPw8HIaZpfbGAaFYPwImQn7Nyh+wwKWhvkoIeDosQ1ZMVrbTclefi7G8hNmqhip04duYwYpbBFnBgw==",
|
"integrity": "sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.23.9",
|
"@babel/runtime": "^7.23.9",
|
||||||
|
|
@ -2447,13 +2448,13 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/vite": {
|
"node_modules/vite": {
|
||||||
"version": "5.3.5",
|
"version": "5.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.0.tgz",
|
||||||
"integrity": "sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==",
|
"integrity": "sha512-5xokfMX0PIiwCMCMb9ZJcMyh5wbBun0zUzKib+L65vAZ8GY9ePZMXxFrHbr/Kyll2+LSCY7xtERPpxkBDKngwg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"esbuild": "^0.21.3",
|
"esbuild": "^0.21.3",
|
||||||
"postcss": "^8.4.39",
|
"postcss": "^8.4.40",
|
||||||
"rollup": "^4.13.0"
|
"rollup": "^4.13.0"
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
|
|
@ -2473,6 +2474,7 @@
|
||||||
"less": "*",
|
"less": "*",
|
||||||
"lightningcss": "^1.21.0",
|
"lightningcss": "^1.21.0",
|
||||||
"sass": "*",
|
"sass": "*",
|
||||||
|
"sass-embedded": "*",
|
||||||
"stylus": "*",
|
"stylus": "*",
|
||||||
"sugarss": "*",
|
"sugarss": "*",
|
||||||
"terser": "^5.4.0"
|
"terser": "^5.4.0"
|
||||||
|
|
@ -2490,6 +2492,9 @@
|
||||||
"sass": {
|
"sass": {
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
|
"sass-embedded": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
"stylus": {
|
"stylus": {
|
||||||
"optional": true
|
"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": {
|
"node_modules/yallist": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
||||||
|
|
|
||||||
15
package.json
15
package.json
|
|
@ -6,9 +6,11 @@
|
||||||
"author": "Dunemask",
|
"author": "Dunemask",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "vite --host",
|
"start": "vite preview --host",
|
||||||
"build:react": "vite build",
|
"start:dev": "vite --host",
|
||||||
"lint": "npx prettier -w src/ index.html vite.config.js"
|
"start:analyzer": "USE_ANALYZER=true vite build",
|
||||||
|
"build": "vite build",
|
||||||
|
"format": "prettier -w src/ index.html vite.config.js"
|
||||||
},
|
},
|
||||||
"browserslist": {
|
"browserslist": {
|
||||||
"production": [
|
"production": [
|
||||||
|
|
@ -25,8 +27,8 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@emotion/react": "^11.13.0",
|
"@emotion/react": "^11.13.0",
|
||||||
"@emotion/styled": "^11.13.0",
|
"@emotion/styled": "^11.13.0",
|
||||||
"@mui/icons-material": "^5.16.6",
|
"@mui/icons-material": "^5.16.7",
|
||||||
"@mui/material": "^5.16.6",
|
"@mui/material": "^5.16.7",
|
||||||
"@vitejs/plugin-react": "4.3.1",
|
"@vitejs/plugin-react": "4.3.1",
|
||||||
"prettier": "^3.3.3",
|
"prettier": "^3.3.3",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
|
|
@ -34,7 +36,8 @@
|
||||||
"react-icons": "^5.2.1",
|
"react-icons": "^5.2.1",
|
||||||
"react-material-ui-carousel": "^3.4.2",
|
"react-material-ui-carousel": "^3.4.2",
|
||||||
"react-router-dom": "^6.26.0",
|
"react-router-dom": "^6.26.0",
|
||||||
"vite": "5.3.5"
|
"vite": "5.4.0",
|
||||||
|
"vite-bundle-analyzer": "^0.10.5"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react-responsive-carousel": "^3.2.23"
|
"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>
|
<ListItemText sx={{ textAlign: "center" }}>Back</ListItemText>
|
||||||
</ListItemButton>
|
</ListItemButton>
|
||||||
{links.map((l, i) => (
|
{links.map((l, i) => (
|
||||||
<ListItemButton
|
<ListItemButton key={i} component={Link} to={l.url} onClick={toggleMiniNavOpen}>
|
||||||
key={i}
|
|
||||||
component={Link}
|
|
||||||
to={l.url}
|
|
||||||
onClick={toggleMiniNavOpen}
|
|
||||||
>
|
|
||||||
<ListItemText
|
<ListItemText
|
||||||
sx={{ textAlign: "center" }}
|
sx={{ textAlign: "center" }}
|
||||||
primary={l.title.charAt(0).toUpperCase() + l.title.slice(1)}
|
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" }}>
|
<Toolbar disableGutters sx={{ display: "flex", padding: "0 10px" }}>
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<IconButton
|
<IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: -0.5 }}>
|
||||||
size="large"
|
|
||||||
edge="start"
|
|
||||||
color="inherit"
|
|
||||||
aria-label="menu"
|
|
||||||
sx={{ mr: -0.5 }}
|
|
||||||
>
|
|
||||||
<img src="/images/logo-micro.png" width="40" height="40" />
|
<img src="/images/logo-micro.png" width="40" height="40" />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -83,13 +72,7 @@ export default function Navbar() {
|
||||||
</Typography>
|
</Typography>
|
||||||
{miniNav && (
|
{miniNav && (
|
||||||
<Box sx={{ marginLeft: "auto" }}>
|
<Box sx={{ marginLeft: "auto" }}>
|
||||||
<IconButton
|
<IconButton size="large" edge="start" color="inherit" aria-label="menu" onClick={toggleMiniNavOpen}>
|
||||||
size="large"
|
|
||||||
edge="start"
|
|
||||||
color="inherit"
|
|
||||||
aria-label="menu"
|
|
||||||
onClick={toggleMiniNavOpen}
|
|
||||||
>
|
|
||||||
<MenuIcon />
|
<MenuIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,7 @@ import "@css/experience-display.css";
|
||||||
export default function ExperienceDisplay(props) {
|
export default function ExperienceDisplay(props) {
|
||||||
const { title, subtitle, children } = props;
|
const { title, subtitle, children } = props;
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box className="experience-display" sx={{ borderLeft: "2px solid #F3AC20", paddingLeft: "20px", mt: "1rem" }}>
|
||||||
className="experience-display"
|
|
||||||
sx={{ borderLeft: "2px solid #F3AC20", paddingLeft: "20px", mt: "1rem" }}
|
|
||||||
>
|
|
||||||
<Typography variant="h6">{title}</Typography>
|
<Typography variant="h6">{title}</Typography>
|
||||||
<Typography variant="body2" sx={{ opacity: 0.7 }}>
|
<Typography variant="body2" sx={{ opacity: 0.7 }}>
|
||||||
{subtitle}
|
{subtitle}
|
||||||
|
|
|
||||||
|
|
@ -15,10 +15,7 @@ export default function LogoBackground() {
|
||||||
width: "100%",
|
width: "100%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img
|
<img src="/images/logo-micro.png" style={{ minWidth: "260px", width: "50%", maxWidth: 512 }} />
|
||||||
src="/images/logo-micro.png"
|
|
||||||
style={{ minWidth: "260px", width: "50%", maxWidth: 512 }}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,6 @@
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
border: 2px solid #f3ac20;
|
border: 2px solid #f3ac20;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-left: -28px;
|
margin-left: -28.8px;
|
||||||
margin-top: -16px;
|
margin-top: -16px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,7 @@ import useMediaQuery from "@mui/material/useMediaQuery";
|
||||||
import { useTheme } from "@mui/material/styles";
|
import { useTheme } from "@mui/material/styles";
|
||||||
|
|
||||||
const dob = new Date(2002, 4, 3);
|
const dob = new Date(2002, 4, 3);
|
||||||
const age = Math.abs(
|
const age = Math.abs(new Date(Date.now() - dob.getTime()).getUTCFullYear() - 1970);
|
||||||
new Date(Date.now() - dob.getTime()).getUTCFullYear() - 1970,
|
|
||||||
);
|
|
||||||
|
|
||||||
function AboutContact(props) {
|
function AboutContact(props) {
|
||||||
const { title, info } = props;
|
const { title, info } = props;
|
||||||
|
|
@ -80,13 +78,10 @@ export default function About() {
|
||||||
About
|
About
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="body1">
|
<Typography variant="body1">
|
||||||
Hello! I'm Elijah Parker, a fullstack software engineer from Utah.
|
Hello! I'm Elijah Parker, a fullstack software engineer from Utah. I have a passion for developing
|
||||||
I have a passion for developing software that achieves "the
|
software that achieves "the impossible". I have experience using a wide variety of technologies including
|
||||||
impossible". I have experience using a wide variety of
|
React, Python, Java, and Kubernetes. I'm currently seeking an entry-level part time position or internship
|
||||||
technologies including React, Python, Java, and Kubernetes. I'm
|
with flexible hours to accommodate pursuit of a bachelorette degree.
|
||||||
currently seeking an entry-level part time position or internship
|
|
||||||
with flexible hours to accommodate pursuit of a bachelorette
|
|
||||||
degree.
|
|
||||||
</Typography>
|
</Typography>
|
||||||
<Box
|
<Box
|
||||||
className="about-contacts"
|
className="about-contacts"
|
||||||
|
|
@ -102,10 +97,7 @@ export default function About() {
|
||||||
<AboutContact
|
<AboutContact
|
||||||
title="Email"
|
title="Email"
|
||||||
info={
|
info={
|
||||||
<a
|
<a href="mailto:elijahglennparker@outlook.com" style={{ textDecoration: "none", fontSize: "14px" }}>
|
||||||
href="mailto:elijahglennparker@outlook.com"
|
|
||||||
style={{ textDecoration: "none", fontSize: "14px" }}
|
|
||||||
>
|
|
||||||
elijahglennparker@outlook.com
|
elijahglennparker@outlook.com
|
||||||
</a>
|
</a>
|
||||||
}
|
}
|
||||||
|
|
@ -114,14 +106,12 @@ export default function About() {
|
||||||
</Box>
|
</Box>
|
||||||
<Box className="about-contacts-right" sx={{ minWidth: "50%" }}>
|
<Box className="about-contacts-right" sx={{ minWidth: "50%" }}>
|
||||||
<AboutContact title="Age" info={age} />
|
<AboutContact title="Age" info={age} />
|
||||||
<AboutContact title="Freelance" info="Available" />
|
<AboutContact title="Freelance" info="Contact me" />
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
<Typography variant="body1" sx={{ mt: "2rem" }}>
|
<Typography variant="body1" sx={{ mt: "2rem" }}>
|
||||||
Additionally, I have worked with a wide range of tools and
|
Additionally, I have worked with a wide range of tools and frameworks including Git, PostgreSQL, MongoDB,
|
||||||
frameworks including Git, PostgreSQL, MongoDB, Docker, Kubernetes,
|
Docker, Kubernetes, Garden, JavaFX, MaterialUI, Spring Boot, Express, Gitlab, Gitea CI/CD.
|
||||||
Garden, JavaFX, MaterialUI, Spring Boot, Express, Gitlab, Gitea
|
|
||||||
CI/CD.
|
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
|
||||||
|
|
@ -58,23 +58,9 @@ export default function Contact() {
|
||||||
flexWrap: "wrap",
|
flexWrap: "wrap",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ContactStrip
|
<ContactStrip icon={LocationOnIcon} title="Location" info="Springville, Utah" />
|
||||||
icon={LocationOnIcon}
|
<ContactStrip icon={MailIcon} title="Email" info="elijahglennparker@outlook.com" />
|
||||||
title="Location"
|
{<ContactStrip icon={PhoneIphoneIcon} title="Text/Call" info="+1 (385) 595 8161" />}
|
||||||
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>
|
||||||
<Box
|
<Box
|
||||||
className="messaging"
|
className="messaging"
|
||||||
|
|
@ -142,9 +128,7 @@ export default function Contact() {
|
||||||
sx={{ m: "0 auto", width: "100%", maxWidth: "16em" }}
|
sx={{ m: "0 auto", width: "100%", maxWidth: "16em" }}
|
||||||
component={Link}
|
component={Link}
|
||||||
to={`mailto:elijahglennparker@outlook.com?subject=${contactSubject} | ${contactName} | ${contactEmail}&body=${contactBody}`}
|
to={`mailto:elijahglennparker@outlook.com?subject=${contactSubject} | ${contactName} | ${contactEmail}&body=${contactBody}`}
|
||||||
disabled={
|
disabled={!(contactSubject && contactBody && contactName && contactEmail)}
|
||||||
!(contactSubject && contactBody && contactName && contactEmail)
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
Send Message
|
Send Message
|
||||||
</ContactMessageButton>
|
</ContactMessageButton>
|
||||||
|
|
|
||||||
|
|
@ -3,10 +3,7 @@ import Typography from "@mui/material/Typography";
|
||||||
export default function ContactStrip(props) {
|
export default function ContactStrip(props) {
|
||||||
const { title, info, icon: Icon } = props;
|
const { title, info, icon: Icon } = props;
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box className="static-contact" sx={{ display: "flex", mb: "2rem", width: "100%" }}>
|
||||||
className="static-contact"
|
|
||||||
sx={{ display: "flex", mb: "2rem", width: "100%" }}
|
|
||||||
>
|
|
||||||
<Box
|
<Box
|
||||||
className="contact-strip"
|
className="contact-strip"
|
||||||
style={{
|
style={{
|
||||||
|
|
@ -18,10 +15,7 @@ export default function ContactStrip(props) {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box sx={{ textAlign: "left", display: "flex" }}>
|
<Box sx={{ textAlign: "left", display: "flex" }}>
|
||||||
<Icon
|
<Icon className="contact-icon" style={{ transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms" }} />
|
||||||
className="contact-icon"
|
|
||||||
style={{ transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms" }}
|
|
||||||
/>
|
|
||||||
<Typography variant="h4">{title}</Typography>
|
<Typography variant="h4">{title}</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
<Box sx={{ width: "100%", mt: ".25rem", display: "inline-flex" }}>
|
<Box sx={{ width: "100%", mt: ".25rem", display: "inline-flex" }}>
|
||||||
|
|
|
||||||
|
|
@ -15,50 +15,32 @@ export default function Education() {
|
||||||
}}
|
}}
|
||||||
id="education"
|
id="education"
|
||||||
>
|
>
|
||||||
<Typography
|
<Typography variant="h2" sx={{ margin: "1rem auto", fontSize: 30, pb: ".5rem" }}>
|
||||||
variant="h2"
|
|
||||||
sx={{ margin: "1rem auto", fontSize: 30, pb: ".5rem" }}
|
|
||||||
>
|
|
||||||
Education
|
Education
|
||||||
</Typography>
|
</Typography>
|
||||||
<Box className="education-list">
|
<Box className="education-list">
|
||||||
<ExperienceDisplay
|
<ExperienceDisplay title="Computer Science Student" subtitle="Jan 2024 - Present">
|
||||||
title="Computer Science Student"
|
|
||||||
subtitle="Jan 2024 - Present"
|
|
||||||
>
|
|
||||||
<Typography sx={{ pt: "1rem" }}>
|
<Typography sx={{ pt: "1rem" }}>
|
||||||
Pursuing B.S. in Computer Science: Software Engineering program,
|
Pursuing B.S. in Computer Science: Software Engineering program, completed 27 credits. Anticipated
|
||||||
completed 11 credits. Anticipated graduation December 2027
|
graduation December 2027
|
||||||
</Typography>
|
</Typography>
|
||||||
</ExperienceDisplay>
|
</ExperienceDisplay>
|
||||||
<ExperienceDisplay
|
<ExperienceDisplay title="Full Stack Web Development" subtitle="Dec 2018 - May 2020 | Bottega devCamp">
|
||||||
title="Full Stack Web Development"
|
|
||||||
subtitle="Dec 2018 - May 2020 | Bottega devCamp"
|
|
||||||
>
|
|
||||||
<Typography sx={{ pt: "1rem" }}>
|
<Typography sx={{ pt: "1rem" }}>
|
||||||
Certificate of Competency in advanced Python, database foundations,
|
Certificate of Competency in advanced Python, database foundations, system analysis, UML, and advanced web
|
||||||
system analysis, UML, and advanced web development using HTML,
|
development using HTML, JavaScript, React, XML, and JSON
|
||||||
JavaScript, React, XML, and JSON
|
|
||||||
</Typography>
|
</Typography>
|
||||||
</ExperienceDisplay>
|
</ExperienceDisplay>
|
||||||
<ExperienceDisplay
|
<ExperienceDisplay title="High School Diploma" subtitle="Aug 2017 - May 2020 | American Fork Highschool">
|
||||||
title="High School Diploma"
|
|
||||||
subtitle="Aug 2017 - May 2020 | American Fork Highschool"
|
|
||||||
>
|
|
||||||
<Typography sx={{ pt: "1rem" }}>
|
<Typography sx={{ pt: "1rem" }}>
|
||||||
GPA 3.9, CS Department Choice Award, Co-founder and President
|
GPA 3.9, CS Department Choice Award, Co-founder and President Computer Science Club, 4 years programming,
|
||||||
Computer Science Club, 4 years programming, student tutor, AP
|
student tutor, AP courses in Computer Science, Calculus, Mechanics, and Government
|
||||||
courses in Computer Science, Calculus, Mechanics, and Government
|
|
||||||
</Typography>
|
</Typography>
|
||||||
</ExperienceDisplay>
|
</ExperienceDisplay>
|
||||||
<ExperienceDisplay
|
<ExperienceDisplay title="Cyber Security and Networking" subtitle="Jan 2019 - May 2019 | AFA’s CyberPatriot">
|
||||||
title="Cyber Security and Networking"
|
|
||||||
subtitle="Jan 2019 - May 2019 | AFA’s CyberPatriot"
|
|
||||||
>
|
|
||||||
<Typography sx={{ pt: "1rem" }}>
|
<Typography sx={{ pt: "1rem" }}>
|
||||||
2nd Place state networking security challenge, curriculum included
|
2nd Place state networking security challenge, curriculum included Ubuntu security policies and PAM,
|
||||||
Ubuntu security policies and PAM, networking, init systems, advanced
|
networking, init systems, advanced command line, processes, and scheduled tasks
|
||||||
command line, processes, and scheduled tasks
|
|
||||||
</Typography>
|
</Typography>
|
||||||
</ExperienceDisplay>
|
</ExperienceDisplay>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
|
||||||
|
|
@ -9,17 +9,8 @@ import Typography from "@mui/material/Typography";
|
||||||
export default function Environments() {
|
export default function Environments() {
|
||||||
return (
|
return (
|
||||||
<Box style={{ padding: 10 }}>
|
<Box style={{ padding: 10 }}>
|
||||||
<Accordion
|
<Accordion style={{ boxShadow: "none" }} defaultExpanded disableGutters square>
|
||||||
style={{ boxShadow: "none" }}
|
<AccordionSummary content={{ margin: 0 }} expandIcon={<ExpandMoreIcon />} style={{ margin: 0 }}>
|
||||||
defaultExpanded
|
|
||||||
disableGutters
|
|
||||||
square
|
|
||||||
>
|
|
||||||
<AccordionSummary
|
|
||||||
content={{ margin: 0 }}
|
|
||||||
expandIcon={<ExpandMoreIcon />}
|
|
||||||
style={{ margin: 0 }}
|
|
||||||
>
|
|
||||||
<Typography variant="h3">Environment</Typography>
|
<Typography variant="h3">Environment</Typography>
|
||||||
</AccordionSummary>
|
</AccordionSummary>
|
||||||
<AccordionDetails>
|
<AccordionDetails>
|
||||||
|
|
@ -43,10 +34,7 @@ export default function Environments() {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<p>Section about deployment of applications to a Kubernetes cluster.</p>
|
||||||
Section about deployment of applications to a Kubernetes
|
|
||||||
cluster.
|
|
||||||
</p>
|
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
<Box
|
<Box
|
||||||
|
|
@ -70,10 +58,7 @@ export default function Environments() {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<p>Section about deployment using Garden for development and production</p>
|
||||||
Section about deployment using Garden for development and
|
|
||||||
production
|
|
||||||
</p>
|
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</AccordionDetails>
|
</AccordionDetails>
|
||||||
|
|
|
||||||
|
|
@ -15,17 +15,36 @@ export default function Experience() {
|
||||||
}}
|
}}
|
||||||
id="experience"
|
id="experience"
|
||||||
>
|
>
|
||||||
<Typography
|
<Typography variant="h2" sx={{ margin: "1rem auto", fontSize: 30, pb: ".5rem" }}>
|
||||||
variant="h2"
|
|
||||||
sx={{ margin: "1rem auto", fontSize: 30, pb: ".5rem" }}
|
|
||||||
>
|
|
||||||
Experience
|
Experience
|
||||||
</Typography>
|
</Typography>
|
||||||
<Box className="experience-list">
|
<Box className="experience-list">
|
||||||
<ExperienceDisplay
|
<ExperienceDisplay
|
||||||
title="Software Engineer Intern"
|
title="Fullstack Software Engineer"
|
||||||
subtitle="Jun - Nov 2021 | Podium, Lehi UT"
|
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" }}>
|
<Typography variant="body1" sx={{ fontWeight: 600, pt: "1rem" }}>
|
||||||
Technologies used:{" "}
|
Technologies used:{" "}
|
||||||
<span
|
<span
|
||||||
|
|
@ -40,30 +59,18 @@ export default function Experience() {
|
||||||
<ul style={{ paddingLeft: "25px" }}>
|
<ul style={{ paddingLeft: "25px" }}>
|
||||||
<li>
|
<li>
|
||||||
<Typography>
|
<Typography>
|
||||||
Developed automated end to end UI & API tests and automated
|
Created fullstack application using React and Express to manage QA data as solo developer
|
||||||
collection of test coverage
|
|
||||||
</Typography>
|
</Typography>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Typography>
|
<Typography>Modularized API testing resources as project lead</Typography>
|
||||||
Modularized API testing resources as project lead
|
</li>
|
||||||
</Typography>
|
<li>
|
||||||
|
<Typography>Improved performance of core QA services by 20%</Typography>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Typography>
|
<Typography>
|
||||||
Automated scripting framework to gauge product reliability as
|
Developed automated end to end UI & API tests and automated collection of test coverage
|
||||||
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>
|
</Typography>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,8 @@ export default function Header() {
|
||||||
React Fullstack Software Engineer
|
React Fullstack Software Engineer
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="body1">
|
<Typography variant="body1">
|
||||||
Specializing in DevOps tools and code reliability. If you're a
|
Specializing in DevOps tools and code reliability. If you're a business seeking to improve developer velocity
|
||||||
business seeking to improve developer velocity or are looking to hire,
|
or are looking to hire, contact me{" "}
|
||||||
contact me{" "}
|
|
||||||
<a
|
<a
|
||||||
href="/#contact"
|
href="/#contact"
|
||||||
style={{
|
style={{
|
||||||
|
|
|
||||||
|
|
@ -23,11 +23,7 @@ function ProjectLanguages(props) {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{languages.map((l, i) => (
|
{languages.map((l, i) => (
|
||||||
<Chip
|
<Chip key={i} label={l} sx={{ borderRadius: "5px", margin: smallMode ? ".25rem" : "" }} />
|
||||||
key={i}
|
|
||||||
label={l}
|
|
||||||
sx={{ borderRadius: "5px", margin: smallMode ? ".25rem" : "" }}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
@ -61,11 +57,7 @@ export default function ProjectTile({
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ width: "100%" }}>
|
<div style={{ width: "100%" }}>
|
||||||
<img
|
<img src={image} style={{ width: "90%", maxWidth: 512, marginLeft: "auto" }} onClick={imageClick} />
|
||||||
src={image}
|
|
||||||
style={{ width: "90%", maxWidth: 512, marginLeft: "auto" }}
|
|
||||||
onClick={imageClick}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
|
|
|
||||||
|
|
@ -9,17 +9,8 @@ import Box from "@mui/material/Box";
|
||||||
export default function Projects() {
|
export default function Projects() {
|
||||||
return (
|
return (
|
||||||
<Box style={{ padding: 10 }}>
|
<Box style={{ padding: 10 }}>
|
||||||
<Accordion
|
<Accordion style={{ boxShadow: "none", margin: 0 }} defaultExpanded disableGutters square>
|
||||||
style={{ boxShadow: "none", margin: 0 }}
|
<AccordionSummary content={{ margin: 0 }} expandIcon={<ExpandMoreIcon />} style={{ margin: 0 }}>
|
||||||
defaultExpanded
|
|
||||||
disableGutters
|
|
||||||
square
|
|
||||||
>
|
|
||||||
<AccordionSummary
|
|
||||||
content={{ margin: 0 }}
|
|
||||||
expandIcon={<ExpandMoreIcon />}
|
|
||||||
style={{ margin: 0 }}
|
|
||||||
>
|
|
||||||
<h3>Projects</h3>
|
<h3>Projects</h3>
|
||||||
</AccordionSummary>
|
</AccordionSummary>
|
||||||
<AccordionDetails>
|
<AccordionDetails>
|
||||||
|
|
|
||||||
|
|
@ -15,12 +15,7 @@ export default function Projects() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="portfolio">
|
<Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="portfolio">
|
||||||
<PhotoHover
|
<PhotoHover image={image} open={open} setOpen={setOpen} alt={"Missing Project Photo"} />
|
||||||
image={image}
|
|
||||||
open={open}
|
|
||||||
setOpen={setOpen}
|
|
||||||
alt={"Missing Project Photo"}
|
|
||||||
/>
|
|
||||||
<div style={{ display: "flex" }}>
|
<div style={{ display: "flex" }}>
|
||||||
<Typography variant="h2" sx={{ margin: "2rem auto", fontSize: 30 }}>
|
<Typography variant="h2" sx={{ margin: "2rem auto", fontSize: 30 }}>
|
||||||
Projects
|
Projects
|
||||||
|
|
@ -34,9 +29,8 @@ export default function Projects() {
|
||||||
openPhoto={openPhoto}
|
openPhoto={openPhoto}
|
||||||
languages={["React", "Express", "Kubernetes"]}
|
languages={["React", "Express", "Kubernetes"]}
|
||||||
>
|
>
|
||||||
Deploy and monitor MInecraft servers in your kubernetes cluster. Easily
|
Deploy and monitor MInecraft servers in your kubernetes cluster. Easily scales and provides a stateful
|
||||||
scales and provides a stateful experience to make managing multiple
|
experience to make managing multiple servers simple.
|
||||||
servers simple.
|
|
||||||
</ProjectTile>
|
</ProjectTile>
|
||||||
<ProjectTile
|
<ProjectTile
|
||||||
image="/portfolio/projects/qualiteer.png"
|
image="/portfolio/projects/qualiteer.png"
|
||||||
|
|
@ -46,9 +40,8 @@ export default function Projects() {
|
||||||
openPhoto={openPhoto}
|
openPhoto={openPhoto}
|
||||||
languages={["React", "Express", "Kubernetes", "PostgreSQL", "RabbitMQ"]}
|
languages={["React", "Express", "Kubernetes", "PostgreSQL", "RabbitMQ"]}
|
||||||
>
|
>
|
||||||
Manage failing tests and silence unecessary alerts. Check the state of
|
Manage failing tests and silence unecessary alerts. Check the state of your services worldwide and improve
|
||||||
your services worldwide and improve developer confidence with a simple
|
developer confidence with a simple interface.
|
||||||
interface.
|
|
||||||
</ProjectTile>
|
</ProjectTile>
|
||||||
<ProjectTile
|
<ProjectTile
|
||||||
image="/portfolio/projects/khufu.png"
|
image="/portfolio/projects/khufu.png"
|
||||||
|
|
@ -58,8 +51,8 @@ export default function Projects() {
|
||||||
openPhoto={openPhoto}
|
openPhoto={openPhoto}
|
||||||
languages={["React", "Express"]}
|
languages={["React", "Express"]}
|
||||||
>
|
>
|
||||||
Basic cloud file management built on React class components. Simple
|
Basic cloud file management built on React class components. Simple interface allows users to upload, delete,
|
||||||
interface allows users to upload, delete, and multiple files.
|
and multiple files.
|
||||||
</ProjectTile>
|
</ProjectTile>
|
||||||
<ProjectTile
|
<ProjectTile
|
||||||
image="/portfolio/projects/codepen.png"
|
image="/portfolio/projects/codepen.png"
|
||||||
|
|
@ -70,10 +63,7 @@ export default function Projects() {
|
||||||
languages={["HTML5", "CSS"]}
|
languages={["HTML5", "CSS"]}
|
||||||
>
|
>
|
||||||
Visual replication of the website{" "}
|
Visual replication of the website{" "}
|
||||||
<a
|
<a href="https://codepen.io" style={{ color: "black", fontFamily: "inherit", fontSize: "inherit" }}>
|
||||||
href="https://codepen.io"
|
|
||||||
style={{ color: "black", fontFamily: "inherit", fontSize: "inherit" }}
|
|
||||||
>
|
|
||||||
codepen.io
|
codepen.io
|
||||||
</a>{" "}
|
</a>{" "}
|
||||||
webpage in 2020. Simple demonstration of css and html
|
webpage in 2020. Simple demonstration of css and html
|
||||||
|
|
@ -86,8 +76,7 @@ export default function Projects() {
|
||||||
openPhoto={openPhoto}
|
openPhoto={openPhoto}
|
||||||
languages={["Java", "JavaFX"]}
|
languages={["Java", "JavaFX"]}
|
||||||
>
|
>
|
||||||
Simple media player built on javafx. Player supports media seeking,
|
Simple media player built on javafx. Player supports media seeking, playback controls, and speed distortion.
|
||||||
playback controls, and speed distortion.
|
|
||||||
</ProjectTile>
|
</ProjectTile>
|
||||||
<ProjectTile
|
<ProjectTile
|
||||||
image="/portfolio/projects/voxelcraft.png"
|
image="/portfolio/projects/voxelcraft.png"
|
||||||
|
|
@ -97,9 +86,8 @@ export default function Projects() {
|
||||||
openPhoto={openPhoto}
|
openPhoto={openPhoto}
|
||||||
languages={["JavaFX"]}
|
languages={["JavaFX"]}
|
||||||
>
|
>
|
||||||
Voxel game built on a simple rendering engine written with JavaFX.
|
Voxel game built on a simple rendering engine written with JavaFX. Generate your terrain and form your ideal
|
||||||
Generate your terrain and form your ideal world by exploring and
|
world by exploring and harvesting resources.
|
||||||
harvesting resources.
|
|
||||||
</ProjectTile>
|
</ProjectTile>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -4,14 +4,7 @@ import CardContent from "@mui/material/CardContent";
|
||||||
import CardMedia from "@mui/material/CardMedia";
|
import CardMedia from "@mui/material/CardMedia";
|
||||||
import Typography from "@mui/material/Typography";
|
import Typography from "@mui/material/Typography";
|
||||||
|
|
||||||
export default function SkillPaper({
|
export default function SkillPaper({ src, bgColor, fgColor, heading, Icon, openPhoto }) {
|
||||||
src,
|
|
||||||
bgColor,
|
|
||||||
fgColor,
|
|
||||||
heading,
|
|
||||||
Icon,
|
|
||||||
openPhoto,
|
|
||||||
}) {
|
|
||||||
const mediaClick = () => openPhoto(src);
|
const mediaClick = () => openPhoto(src);
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box>
|
||||||
|
|
@ -21,11 +14,7 @@ export default function SkillPaper({
|
||||||
backgroundColor: bgColor,
|
backgroundColor: bgColor,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img
|
<img src={src} title={`${heading} Pluralsight Score`} onClick={mediaClick} />
|
||||||
src={src}
|
|
||||||
title={`${heading} Pluralsight Score`}
|
|
||||||
onClick={mediaClick}
|
|
||||||
/>
|
|
||||||
<CardContent sx={{ color: fgColor, backgroundColor: bgColor }}>
|
<CardContent sx={{ color: fgColor, backgroundColor: bgColor }}>
|
||||||
<Typography variant="h5" component="div">
|
<Typography variant="h5" component="div">
|
||||||
<div style={{ display: "inline-flex" }}>
|
<div style={{ display: "inline-flex" }}>
|
||||||
|
|
|
||||||
|
|
@ -26,27 +26,9 @@ export default function Skills() {
|
||||||
const testoutCertClick = () => openPhoto("/portfolio/linux-cert.png");
|
const testoutCertClick = () => openPhoto("/portfolio/linux-cert.png");
|
||||||
|
|
||||||
const skills = [
|
const skills = [
|
||||||
<SkillPaper
|
<SkillPaper src="/portfolio/iq/python.png" fgColor="white" bgColor="#3f7ed4" heading="Python" Icon={FaPython} />,
|
||||||
src="/portfolio/iq/python.png"
|
<SkillPaper src="/portfolio/iq/react.png" fgColor="black" bgColor="#61dafb" heading="React" Icon={FaReact} />,
|
||||||
fgColor="white"
|
<SkillPaper src="/portfolio/iq/java.png" fgColor="white" bgColor="#ea8c10 " heading="Java" Icon={FaJava} />,
|
||||||
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
|
<SkillPaper
|
||||||
src="/portfolio/iq/javascript.png"
|
src="/portfolio/iq/javascript.png"
|
||||||
fgColor="black"
|
fgColor="black"
|
||||||
|
|
@ -54,25 +36,14 @@ export default function Skills() {
|
||||||
heading="Javascript"
|
heading="Javascript"
|
||||||
Icon={SiJavascript}
|
Icon={SiJavascript}
|
||||||
/>,
|
/>,
|
||||||
<SkillPaper
|
<SkillPaper src="/portfolio/iq/html.png" fgColor="white" bgColor="#e9562f" heading="HTML 5" Icon={FaHtml5} />,
|
||||||
src="/portfolio/iq/html.png"
|
|
||||||
fgColor="white"
|
|
||||||
bgColor="#e9562f"
|
|
||||||
heading="HTML 5"
|
|
||||||
Icon={FaHtml5}
|
|
||||||
/>,
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const openSkill = (skillIndex) => openPhoto(skills[skillIndex].props.src);
|
const openSkill = (skillIndex) => openPhoto(skills[skillIndex].props.src);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="achievements">
|
<Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="achievements">
|
||||||
<PhotoHover
|
<PhotoHover image={image} open={open} setOpen={setOpen} alt={"Certificate"} />
|
||||||
image={image}
|
|
||||||
open={open}
|
|
||||||
setOpen={setOpen}
|
|
||||||
alt={"Certificate"}
|
|
||||||
/>
|
|
||||||
<Box
|
<Box
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|
@ -101,8 +72,7 @@ export default function Skills() {
|
||||||
sx={{
|
sx={{
|
||||||
maxWidth: 374,
|
maxWidth: 374,
|
||||||
margin: "10px auto",
|
margin: "10px auto",
|
||||||
boxShadow:
|
boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
|
||||||
"0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
|
|
@ -116,8 +86,7 @@ export default function Skills() {
|
||||||
Fullstack Certification
|
Fullstack Certification
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="body2">
|
<Typography variant="body2">
|
||||||
Certificate of profeciency in Python3, React, CSS, and
|
Certificate of profeciency in Python3, React, CSS, and Javascript
|
||||||
Javascript
|
|
||||||
</Typography>
|
</Typography>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
@ -125,8 +94,7 @@ export default function Skills() {
|
||||||
sx={{
|
sx={{
|
||||||
maxWidth: 374,
|
maxWidth: 374,
|
||||||
margin: "10px auto",
|
margin: "10px auto",
|
||||||
boxShadow:
|
boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
|
||||||
"0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
|
|
||||||
backgroundColor: "#c3802b",
|
backgroundColor: "#c3802b",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
@ -144,9 +112,7 @@ export default function Skills() {
|
||||||
<Typography gutterBottom variant="h5" component="div">
|
<Typography gutterBottom variant="h5" component="div">
|
||||||
Linux Administration Certificate
|
Linux Administration Certificate
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="body2">
|
<Typography variant="body2">Certificate of profeciency in Linux client administration</Typography>
|
||||||
Certificate of profeciency in Linux client administration
|
|
||||||
</Typography>
|
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
@ -167,15 +133,10 @@ export default function Skills() {
|
||||||
maxWidth: 374,
|
maxWidth: 374,
|
||||||
display: "block",
|
display: "block",
|
||||||
margin: "auto",
|
margin: "auto",
|
||||||
boxShadow:
|
boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
|
||||||
"0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Suspense
|
<Suspense fallback={<Skeleton variant="rectangular" width="374px" height="100%" />}>
|
||||||
fallback={
|
|
||||||
<Skeleton variant="rectangular" width="374px" height="100%" />
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Carousel
|
<Carousel
|
||||||
showArrows={true}
|
showArrows={true}
|
||||||
showStatus={false}
|
showStatus={false}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,10 @@
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import Avatar from "@mui/material/Avatar";
|
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
import Card from "@mui/material/Card";
|
import Card from "@mui/material/Card";
|
||||||
import CardContent from "@mui/material/CardContent";
|
import CardContent from "@mui/material/CardContent";
|
||||||
import Typography from "@mui/material/Typography";
|
import Typography from "@mui/material/Typography";
|
||||||
import GitHubIcon from "@mui/icons-material/GitHub";
|
import GitHubIcon from "@mui/icons-material/GitHub";
|
||||||
import LinkedInIcon from "@mui/icons-material/LinkedIn";
|
import LinkedInIcon from "@mui/icons-material/LinkedIn";
|
||||||
import { SiForgejo } from "react-icons/si";
|
|
||||||
|
|
||||||
export default function Social() {
|
export default function Social() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -42,44 +40,29 @@ export default function Social() {
|
||||||
sx={{
|
sx={{
|
||||||
maxWidth: 256,
|
maxWidth: 256,
|
||||||
margin: "3rem auto",
|
margin: "3rem auto",
|
||||||
boxShadow:
|
boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
|
||||||
"0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
|
|
||||||
overflow: "visible",
|
overflow: "visible",
|
||||||
textDecoration: "none",
|
textDecoration: "none",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ position: "relative", overflow: "visible" }}>
|
<CardContent>
|
||||||
<Avatar
|
<Typography variant="h5" component="div" style={{ color: "#0073b1", display: "flex" }}>
|
||||||
style={{
|
Linkedin
|
||||||
width: "4rem",
|
|
||||||
height: "4rem",
|
|
||||||
position: "absolute",
|
|
||||||
top: "-2rem",
|
|
||||||
left: "-2rem",
|
|
||||||
backgroundColor: "#0073b1",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<LinkedInIcon
|
<LinkedInIcon
|
||||||
style={{
|
style={{
|
||||||
width: "2.125rem",
|
width: "24px",
|
||||||
height: "2.125rem",
|
height: "24px",
|
||||||
color: "white",
|
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>
|
||||||
<Typography variant="body2" component="div">
|
<Typography variant="body2" component="div" mt=".25rem">
|
||||||
Hard working fullstack developer Seeking entry-level part time
|
Hard working fullstack developer Seeking entry-level part time position or internship with flexible
|
||||||
position or internship with flexible hours to accommodate
|
hours to accommodate pursuit of a B.S. degree.
|
||||||
pursuit of a B.S. degree.
|
|
||||||
</Typography>
|
</Typography>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
@ -90,57 +73,44 @@ export default function Social() {
|
||||||
sx={{
|
sx={{
|
||||||
maxWidth: 256,
|
maxWidth: 256,
|
||||||
margin: "3rem auto",
|
margin: "3rem auto",
|
||||||
boxShadow:
|
boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
|
||||||
"0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
|
|
||||||
overflow: "visible",
|
overflow: "visible",
|
||||||
textDecoration: "none",
|
textDecoration: "none",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ position: "relative", overflow: "visible" }}>
|
<CardContent>
|
||||||
<Avatar
|
|
||||||
style={{
|
|
||||||
width: "4rem",
|
|
||||||
height: "4rem",
|
|
||||||
position: "absolute",
|
|
||||||
top: "-2rem",
|
|
||||||
left: "-2rem",
|
|
||||||
backgroundColor: "rgb(246, 152, 32)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SiForgejo
|
|
||||||
style={{
|
|
||||||
width: "2.25rem",
|
|
||||||
height: "2.25rem",
|
|
||||||
color: "white",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Avatar>
|
|
||||||
</div>
|
|
||||||
<CardContent sx={{ backgroundColor: "white", marginTop: "1rem" }}>
|
|
||||||
<Typography
|
<Typography
|
||||||
variant="h5"
|
variant="h5"
|
||||||
component="div"
|
component="div"
|
||||||
sx={{
|
sx={{
|
||||||
backgroundImage:
|
backgroundImage: "linear-gradient(to right, var(--tw-gradient-stops))",
|
||||||
"linear-gradient(to right, var(--tw-gradient-stops))",
|
"--tw-gradient-from": "#f59e0b var(--tw-gradient-from-position)",
|
||||||
"--tw-gradient-from":
|
"--tw-gradient-stops": "var(--tw-gradient-from), var(--tw-gradient-to)",
|
||||||
"#f59e0b var(--tw-gradient-from-position)",
|
"--tw-gradient-to": "#dc2626 var(--tw-gradient-to-position)",
|
||||||
"--tw-gradient-stops":
|
|
||||||
"var(--tw-gradient-from), var(--tw-gradient-to)",
|
|
||||||
"--tw-gradient-to":
|
|
||||||
"#dc2626 var(--tw-gradient-to-position)",
|
|
||||||
backgroundClip: "text",
|
backgroundClip: "text",
|
||||||
color: "transparent",
|
color: "transparent",
|
||||||
"--tw-gradient-from-position": "0%",
|
"--tw-gradient-from-position": "0%",
|
||||||
"--tw-gradient-via-position": "50%",
|
"--tw-gradient-via-position": "50%",
|
||||||
"--tw-gradient-to-position": "100%",
|
"--tw-gradient-to-position": "100%",
|
||||||
|
display: "flex",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Forgejo
|
Forgejo
|
||||||
|
<img
|
||||||
|
src="/images/forgejo.svg"
|
||||||
|
width="24px"
|
||||||
|
height="24px"
|
||||||
|
style={{
|
||||||
|
marginLeft: "auto",
|
||||||
|
marginRight: ".25rem",
|
||||||
|
marginTop: "auto",
|
||||||
|
marginBottom: "auto",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="body2" component="div">
|
<Typography variant="body2" component="div" mt=".25rem">
|
||||||
Portfolio showcasing integration with CI/CD and Kubernetes.
|
Portfolio showcasing integration with CI/CD and Kubernetes. Technologies include React, Express,
|
||||||
Technologies include React, Express, Python, Helm, and Docker
|
Python, Helm, and Docker
|
||||||
</Typography>
|
</Typography>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
@ -152,44 +122,26 @@ export default function Social() {
|
||||||
sx={{
|
sx={{
|
||||||
maxWidth: 256,
|
maxWidth: 256,
|
||||||
margin: "3rem auto",
|
margin: "3rem auto",
|
||||||
boxShadow:
|
boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
|
||||||
"0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
|
|
||||||
overflow: "visible",
|
overflow: "visible",
|
||||||
textDecoration: "none",
|
textDecoration: "none",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ position: "relative", overflow: "visible" }}>
|
<CardContent>
|
||||||
<Avatar
|
<Typography variant="h5" component="div" style={{ color: "#24292f", display: "flex" }}>
|
||||||
style={{
|
Github
|
||||||
width: "4rem",
|
|
||||||
height: "4rem",
|
|
||||||
position: "absolute",
|
|
||||||
top: "-2rem",
|
|
||||||
left: "-2rem",
|
|
||||||
backgroundColor: "#24292f",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<GitHubIcon
|
<GitHubIcon
|
||||||
style={{
|
style={{
|
||||||
width: "2.5rem",
|
color: "inherit",
|
||||||
height: "2.5rem",
|
marginLeft: "auto",
|
||||||
color: "white",
|
marginTop: "auto",
|
||||||
|
marginRight: ".25rem",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Avatar>
|
|
||||||
</div>
|
|
||||||
<CardContent sx={{ backgroundColor: "white", marginTop: "1rem" }}>
|
|
||||||
<Typography
|
|
||||||
variant="h5"
|
|
||||||
component="div"
|
|
||||||
style={{ color: "#24292f" }}
|
|
||||||
>
|
|
||||||
Github
|
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="body2" component="div">
|
<Typography variant="body2" component="div" mt=".25rem">
|
||||||
Archived projects specializing in Java, Python, Javascript,
|
Archived projects specializing in Java, Python, Javascript, HTML, and CSS. Built projects solo and in
|
||||||
HTML, and CSS. Built projects solo and in teams as project
|
teams as project lead, and principal contributor.
|
||||||
lead, and principal contributor.
|
|
||||||
</Typography>
|
</Typography>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
|
||||||
|
|
@ -23,8 +23,7 @@ export default function ContactCard(props) {
|
||||||
width: 320,
|
width: 320,
|
||||||
maxWidth: "100%",
|
maxWidth: "100%",
|
||||||
margin: 2,
|
margin: 2,
|
||||||
boxShadow:
|
boxShadow: "0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
|
||||||
"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 }}>
|
<CardContent sx={{ alignItems: "center", textAlign: "center", pb: 0 }}>
|
||||||
|
|
@ -42,7 +41,6 @@ export default function ContactCard(props) {
|
||||||
mb: 1,
|
mb: 1,
|
||||||
zIndex: 5,
|
zIndex: 5,
|
||||||
backgroundColor: "rgba(0, 115, 177,.1)",
|
backgroundColor: "rgba(0, 115, 177,.1)",
|
||||||
borderColor: "white",
|
|
||||||
color: "#0073b1",
|
color: "#0073b1",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
@ -52,22 +50,10 @@ export default function ContactCard(props) {
|
||||||
</Typography>
|
</Typography>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
<CardActions style={{ display: "flex", justifyContent: "center" }}>
|
<CardActions style={{ display: "flex", justifyContent: "center" }}>
|
||||||
<IconButton
|
<IconButton size="sm" variant="plain" component={Link} to={linkedin} sx={{ color: "#0073b1" }}>
|
||||||
size="sm"
|
|
||||||
variant="plain"
|
|
||||||
component={Link}
|
|
||||||
to={linkedin}
|
|
||||||
sx={{ color: "#0073b1" }}
|
|
||||||
>
|
|
||||||
<LinkedInIcon />
|
<LinkedInIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
<IconButton
|
<IconButton size="sm" variant="plain" color="neutral" component={Link} to={email}>
|
||||||
size="sm"
|
|
||||||
variant="plain"
|
|
||||||
color="neutral"
|
|
||||||
component={Link}
|
|
||||||
to={email}
|
|
||||||
>
|
|
||||||
<MailIcon />
|
<MailIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</CardActions>
|
</CardActions>
|
||||||
|
|
|
||||||
|
|
@ -38,12 +38,7 @@ export default function ReferenceCard(props) {
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography
|
<Typography variant="h5" component={Link} to={linkedin} sx={{ textDecoration: "none", color: "inherit" }}>
|
||||||
variant="h5"
|
|
||||||
component={Link}
|
|
||||||
to={linkedin}
|
|
||||||
sx={{ textDecoration: "none", color: "inherit" }}
|
|
||||||
>
|
|
||||||
{name}
|
{name}
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography variant="h6">{title}</Typography>
|
<Typography variant="h6">{title}</Typography>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,14 @@
|
||||||
import { defineConfig } from "vite";
|
import { defineConfig } from "vite";
|
||||||
import react from "@vitejs/plugin-react";
|
import react from "@vitejs/plugin-react";
|
||||||
|
import { analyzer } from "vite-bundle-analyzer";
|
||||||
import path from "node:path";
|
import path from "node:path";
|
||||||
|
|
||||||
|
const plugins = [react()];
|
||||||
|
if (process.env.USE_ANALYZER === "true") plugins.push(analyzer());
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
return defineConfig({
|
return defineConfig({
|
||||||
plugins: [react()],
|
plugins,
|
||||||
server: {
|
server: {
|
||||||
port: process.env.VITE_DEV_PORT ?? 5173,
|
port: process.env.VITE_DEV_PORT ?? 5173,
|
||||||
host: "0.0.0.0",
|
host: "0.0.0.0",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue