disclaimer now closable

Author: JS-GitRepo

src/components/WIPDisclaimer.css

@@ -0,0 +1,48 @@
+.WIPDisclaimer {
+  font-family: "munro";
+  color: white;
+  position: absolute;
+  bottom: 12%;
+  left: 50%;
+  transform: translate(-50%);
+  z-index: 100;
+  border: solid white 2px;
+  background-color: rgba(96, 96, 96, 0.348);
+  padding: 0px 10px;
+  width: 90%;
+}
+
+.WIPDisclaimer h2 {
+  margin: 10px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.WIPDisclaimer .wip-text {
+  margin: 10px;
+  font-size: 14px;
+}
+
+.WIPDisclaimer .close-ctr {
+  position: absolute;
+  border: solid white 1px;
+  left: 5px;
+  top: 5px;
+}
+
+.WIPDisclaimer .close-ctr p {
+  margin: 0px;
+  padding: 1px;
+  width: 18px;
+  height: 18px;
+}
+
+/* - - - - MEDIA QUERIES - - - - */
+@media only screen and (min-width: 768px) {
+  .WIPDisclaimer {
+    bottom: 100px;
+    padding: 10px;
+    width: 80%;
+  }
+}

src/components/WIPDisclaimer.tsx

@@ -0,0 +1,23 @@
+import { useState } from "react";
+import "./WIPDisclaimer.css";
+
+const WIPDisclaimer = () => {
+  const [closeClass, setCloseClass] = useState<string>("WIPDisclaimer");
+
+  return (
+    <div className={`${closeClass}`}>
+      <div
+        className='close-ctr'
+        onClick={() => setCloseClass("WIPDisclaimer hide")}>
+        <p>X</p>
+      </div>
+      <h2>
+        <span className='emoji'>🛠</span> Website Under Construction{" "}
+        <span className='emoji'>🛠</span>
+      </h2>
+      <p className='wip-text'>{`Some features may be incomplete, buggy, or site-breaking. Feel free to explore and please re-visit soon!`}</p>
+    </div>
+  );
+};
+
+export default WIPDisclaimer;

src/components/projects/MediaMatchup.tsx

@@ -27,7 +27,7 @@ const MediaMatchup = ({ isPortfolio }: Props) => {
   const desc: string = "";
 
   return (
-    <animated.div className="MediaMatchup">
+    <animated.div className='MediaMatchup media-ctr'>
       <ProjImage
         imgSrc={mediaMatchupMainAVIF}
         imgSrc_Fallback={mediaMatchupMainJPG}

src/components/projects/ProjImage.css

@@ -0,0 +1,11 @@
+.ProjImage {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  max-width: 100%;
+}
+
+.ProjImage .img-ctr {
+  max-width: 100%;
+}