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

Merge branch 'ep/Jul27/SkillsImageDisplay' into 'master'

Browse source 
Adjusted Image Display of Skills

See merge request Dunemask/nile!2
This commit is contained in:
Elijah Dunemask 2023-07-27 14:44:24 +00:00
commit 9dc1864073
5 changed files with 86 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

3
public/css/fonts.css
View file

@ -45,7 +45,8 @@ blockquote {
line-height: 30px; line-height: 30px;
} }
pre,span { pre,
span {
font-family: "Dejavu Sans"; font-family: "Dejavu Sans";
font-size: 13px; font-size: 13px;
font-style: normal; font-style: normal;

2
public/favicons/README.md
View file

@ -20,4 +20,4 @@ Insert the following code in the `head` section of your pages:
<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="#ff0000"> <meta name="theme-color" content="#ff0000">
*Optional* - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker) _Optional_ - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker)

104
public/favicons/site.webmanifest
View file

@ -1,54 +1,54 @@
{ {
"name": "Dunemask", "name": "Dunemask",
"short_name": "Dunemask", "short_name": "Dunemask",
"icons": [ "icons": [
{ {
"src": "/favicons/android-chrome-36x36.png?v=jan27deltaburn", "src": "/favicons/android-chrome-36x36.png?v=jan27deltaburn",
"sizes": "36x36", "sizes": "36x36",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "/favicons/android-chrome-48x48.png?v=jan27deltaburn", "src": "/favicons/android-chrome-48x48.png?v=jan27deltaburn",
"sizes": "48x48", "sizes": "48x48",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "/favicons/android-chrome-72x72.png?v=jan27deltaburn", "src": "/favicons/android-chrome-72x72.png?v=jan27deltaburn",
"sizes": "72x72", "sizes": "72x72",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "/favicons/android-chrome-96x96.png?v=jan27deltaburn", "src": "/favicons/android-chrome-96x96.png?v=jan27deltaburn",
"sizes": "96x96", "sizes": "96x96",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "/favicons/android-chrome-144x144.png?v=jan27deltaburn", "src": "/favicons/android-chrome-144x144.png?v=jan27deltaburn",
"sizes": "144x144", "sizes": "144x144",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "/favicons/android-chrome-192x192.png?v=jan27deltaburn", "src": "/favicons/android-chrome-192x192.png?v=jan27deltaburn",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "/favicons/android-chrome-256x256.png?v=jan27deltaburn", "src": "/favicons/android-chrome-256x256.png?v=jan27deltaburn",
"sizes": "256x256", "sizes": "256x256",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "/favicons/android-chrome-384x384.png?v=jan27deltaburn", "src": "/favicons/android-chrome-384x384.png?v=jan27deltaburn",
"sizes": "384x384", "sizes": "384x384",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "/favicons/android-chrome-512x512.png?v=jan27deltaburn", "src": "/favicons/android-chrome-512x512.png?v=jan27deltaburn",
"sizes": "512x512", "sizes": "512x512",
"type": "image/png" "type": "image/png"
} }
], ],
"theme_color": "#ff0000", "theme_color": "#ff0000",
"background_color": "#ff0000", "background_color": "#ff0000",
"display": "standalone" "display": "standalone"
} }

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

@ -18,14 +18,13 @@ export default function SkillPaper({
<Card <Card
sx={{ sx={{
margin: "0 auto", margin: "0 auto",
boxShadow: backgroundColor: bgColor,
"0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
}} }}
> >
<CardMedia <img
sx={{ minHeight: 380 }} src={src}
image={src} style={{ width: "100%" }}
title="Fullstack Development Certificate" title={`${heading} Pluralsight Score`}
onClick={mediaClick} onClick={mediaClick}
/> />
<CardContent sx={{ color: fgColor, backgroundColor: bgColor }}> <CardContent sx={{ color: fgColor, backgroundColor: bgColor }}>

46
src/pages/delta/Skills.jsx
View file

@ -1,13 +1,13 @@
import React, { useState } from "react"; import React, { Suspense, useState } from "react";
import { FaReact, FaPython, FaJava, FaHtml5 } from "react-icons/fa"; import { FaReact, FaPython, FaJava, FaHtml5 } from "react-icons/fa";
import { SiJavascript } from "react-icons/si"; import { SiJavascript } from "react-icons/si";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
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 CardMedia from "@mui/material/CardMedia";
import SkillPaper from "./SkillPaper.jsx"; import SkillPaper from "./SkillPaper.jsx";
import PhotoHover from "./PhotoHover.jsx"; import PhotoHover from "./PhotoHover.jsx";
import Skeleton from "@mui/material/Skeleton";
const Carousel = React.lazy(() => import("react-material-ui-carousel")); const Carousel = React.lazy(() => import("react-material-ui-carousel"));
export default function Skills() { export default function Skills() {
@ -105,9 +105,9 @@ export default function Skills() {
"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)",
}} }}
> >
<CardMedia <img
sx={{ minHeight: 320, maxWidth: 374 }} src="/portfolio/bottega-cert.png"
image="/portfolio/bottega-cert.png" style={{ width: "100%" }}
title="Fullstack Development Certificate" title="Fullstack Development Certificate"
onClick={bottegaCertClick} onClick={bottegaCertClick}
/> />
@ -127,18 +127,18 @@ export default function Skills() {
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",
}} }}
> >
<CardMedia <img
sx={{ minHeight: 320, maxWidth: 374 }} src="/portfolio/linux-cert.png"
image="/portfolio/linux-cert.png" style={{ width: "100%" }}
title="Linux Client Administration Certificate"
onClick={testoutCertClick} onClick={testoutCertClick}
title="Linux Client Administration Certificate"
/> />
<CardContent <CardContent
sx={{ sx={{
color: "white", color: "white",
backgroundColor: "#c3802b",
}} }}
> >
<Typography gutterBottom variant="h5" component="div"> <Typography gutterBottom variant="h5" component="div">
@ -166,26 +166,32 @@ export default function Skills() {
Pluralsight Scores Pluralsight Scores
</h3> </h3>
</div> </div>
<Box sx={{ display: "block" }}> <Box
<Box sx={{
sx={{ 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
fallback={
<Skeleton variant="rectangular" width="374px" height="374px" />
}
> >
<Carousel <Carousel
interval={8000} interval={8000}
navButtonsAlwaysVisible navButtonsAlwaysVisible
indicatorContainerProps={{ style: { display: "none" } }} indicatorContainerProps={{ style: { display: "none" } }}
stopAutoPlayOnHover={true}
sx={{ minHeight: 481 }}
> >
{skills.map((skill, i) => ( {skills.map((skill, i) => (
<React.Fragment key={skill}>{skill}</React.Fragment> <React.Fragment key={skill}>{skill}</React.Fragment>
))} ))}
</Carousel> </Carousel>
</Box> </Suspense>
</Box> </Box>
</Box> </Box>
</Box> </Box>