Adjusted Image Display of Skills
This commit is contained in:
parent
e297a693a6
commit
4f4bac619f
5 changed files with 86 additions and 80 deletions
|
@ -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 }}>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue