Adjusted Image Display of Skills

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

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 }}>

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>