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

Adjusted Image Display of Skills

Browse source
This commit is contained in:
Elijah Dunemask 2023-07-27 14:44:24 +00:00
parent e297a693a6
commit 4f4bac619f
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;
}
pre,span {
pre,
span {
font-family: "Dejavu Sans";
font-size: 13px;
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="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",
"short_name": "Dunemask",
"icons": [
{
"src": "/favicons/android-chrome-36x36.png?v=jan27deltaburn",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-48x48.png?v=jan27deltaburn",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-72x72.png?v=jan27deltaburn",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-96x96.png?v=jan27deltaburn",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-144x144.png?v=jan27deltaburn",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-192x192.png?v=jan27deltaburn",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-256x256.png?v=jan27deltaburn",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-384x384.png?v=jan27deltaburn",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-512x512.png?v=jan27deltaburn",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ff0000",
"background_color": "#ff0000",
"display": "standalone"
"name": "Dunemask",
"short_name": "Dunemask",
"icons": [
{
"src": "/favicons/android-chrome-36x36.png?v=jan27deltaburn",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-48x48.png?v=jan27deltaburn",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-72x72.png?v=jan27deltaburn",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-96x96.png?v=jan27deltaburn",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-144x144.png?v=jan27deltaburn",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-192x192.png?v=jan27deltaburn",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-256x256.png?v=jan27deltaburn",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-384x384.png?v=jan27deltaburn",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/favicons/android-chrome-512x512.png?v=jan27deltaburn",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ff0000",
"background_color": "#ff0000",
"display": "standalone"
}

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

@ -18,14 +18,13 @@ export default function SkillPaper({
<Card
sx={{
margin: "0 auto",
boxShadow:
"0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
backgroundColor: bgColor,
}}
>
<CardMedia
sx={{ minHeight: 380 }}
image={src}
title="Fullstack Development Certificate"
<img
src={src}
style={{ width: "100%" }}
title={`${heading} Pluralsight Score`}
onClick={mediaClick}
/>
<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 { SiJavascript } from "react-icons/si";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import SkillPaper from "./SkillPaper.jsx";
import PhotoHover from "./PhotoHover.jsx";
import Skeleton from "@mui/material/Skeleton";
const Carousel = React.lazy(() => import("react-material-ui-carousel"));
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)",
}}
>
<CardMedia
sx={{ minHeight: 320, maxWidth: 374 }}
image="/portfolio/bottega-cert.png"
<img
src="/portfolio/bottega-cert.png"
style={{ width: "100%" }}
title="Fullstack Development Certificate"
onClick={bottegaCertClick}
/>
@ -127,18 +127,18 @@ export default function Skills() {
margin: "10px auto",
boxShadow:
"0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)",
backgroundColor: "#c3802b",
}}
>
<CardMedia
sx={{ minHeight: 320, maxWidth: 374 }}
image="/portfolio/linux-cert.png"
title="Linux Client Administration Certificate"
<img
src="/portfolio/linux-cert.png"
style={{ width: "100%" }}
onClick={testoutCertClick}
title="Linux Client Administration Certificate"
/>
<CardContent
sx={{
color: "white",
backgroundColor: "#c3802b",
}}
>
<Typography gutterBottom variant="h5" component="div">
@ -166,26 +166,32 @@ export default function Skills() {
Pluralsight Scores
</h3>
</div>
<Box sx={{ display: "block" }}>
<Box
sx={{
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)",
}}
<Box
sx={{
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)",
}}
>
<Suspense
fallback={
<Skeleton variant="rectangular" width="374px" height="374px" />
}
>
<Carousel
interval={8000}
navButtonsAlwaysVisible
indicatorContainerProps={{ style: { display: "none" } }}
stopAutoPlayOnHover={true}
sx={{ minHeight: 481 }}
>
{skills.map((skill, i) => (
<React.Fragment key={skill}>{skill}</React.Fragment>
))}
</Carousel>
</Box>
</Suspense>
</Box>
</Box>
</Box>