[FIX] Fixed CSS not displaying properly for skills (#6)

Co-authored-by: dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.net/elysium/nile/pulls/6

index.html

@@ -149,7 +149,7 @@
           const mediaCover = document.getElementById(
             "loading-content-media-cover",
           );
-          if (mediaCover === null && mediaCover.style === null) return;
+          if (mediaCover === null || mediaCover.style === null) return;
           mediaCover.style.display = "block";
         }
 

src/pages/delta/Skills.jsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useState } from "react";
+import React, { Suspense, useState, useEffect } from "react";
 import { FaReact, FaPython, FaJava, FaHtml5 } from "react-icons/fa";
 import { SiJavascript } from "react-icons/si";
 import Typography from "@mui/material/Typography";
@@ -13,7 +13,10 @@ const Carousel = React.lazy(() => import("react-material-ui-carousel"));
 export default function Skills() {
   const [image, setImage] = useState();
   const [open, setOpen] = useState(false);
+  const [carouselInterval, setCarouselInterval] = useState(200);
 
+  useEffect(()=>{setTimeout(()=>setCarouselInterval(7000),500)},[]); // Mitigates bug where height doesn't load properly
+	
   function openPhoto(image) {
     setImage(image);
     setOpen(true);
@@ -177,15 +180,16 @@ export default function Skills() {
           >
             <Suspense
               fallback={
-                <Skeleton variant="rectangular" width="374px" height="374px" />
+                <Skeleton variant="rectangular" width="374px" height="100%" />
               }
             >
               <Carousel
-                interval={8000}
+                interval={carouselInterval}
                 navButtonsAlwaysVisible
                 indicatorContainerProps={{ style: { display: "none" } }}
                 stopAutoPlayOnHover={true}
-                sx={{ minHeight: 481 }}
+                sx={{ height: "100%"}}
+	  	animation="slide"
               >
                 {skills.map((skill, i) => (
                   <React.Fragment key={skill}>{skill}</React.Fragment>