Prepared Nile v1

src/pages/delta/Projects.jsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import Box from "@mui/material/Box";
+
+import ProjectTile from "./ProjectTile.jsx";
+import PhotoHover from "./PhotoHover.jsx";
+
+export default function Projects() {
+  const [image, setImage] = useState();
+  const [open, setOpen] = useState(false);
+
+  function openPhoto(image) {
+    setImage(image);
+    setOpen(true);
+  }
+
+  return (
+    <Box style={{ padding: 10, scrollMarginTop: "4rem" }} id="portfolio">
+      <PhotoHover
+        image={image}
+        open={open}
+        setOpen={setOpen}
+        alt={"Missing Project Photo"}
+      />
+      <div style={{ display: "flex" }}>
+        <h3 style={{ fontSize: "1.75rem", margin: "2rem auto" }}>Portfolio</h3>
+      </div>
+      <ProjectTile
+        image="/portfolio/projects/qualiteer.png"
+        title="Qualiteer"
+        year="2022"
+        openPhoto={openPhoto}
+      >
+        Manage failing tests and silence unecessary alerts. Check the state of
+        your services worldwide and improve developer confidence with a simple
+        interface.
+      </ProjectTile>
+      <ProjectTile
+        image="/portfolio/projects/khufu.png"
+        title="Khufu"
+        year="2021"
+        openPhoto={openPhoto}
+      >
+        Basic cloud file management built on React class components. Simple
+        interface allows users to upload, delete, and multiple files.
+      </ProjectTile>
+      <ProjectTile
+        image="/portfolio/projects/codepen.png"
+        title="Codepen"
+        year="2020"
+        openPhoto={openPhoto}
+      >
+        Visual replication of the website{" "}
+        <a
+          href="https://codepen.io"
+          style={{ color: "black", fontFamily: "inherit" }}
+        >
+          codepen.io
+        </a>{" "}
+        webpage in 2020. Simple demonstration of css and html
+      </ProjectTile>
+      <ProjectTile
+        image="/portfolio/projects/movieplayer.png"
+        title="Media Player"
+        year="2018"
+        openPhoto={openPhoto}
+      >
+        Simple media player built on javafx. Player supports media seeking,
+        playback controls, and speed distortion.
+      </ProjectTile>
+      <ProjectTile
+        image="/portfolio/projects/voxelcraft.png"
+        title="Voxelcraft"
+        year="2018"
+        openPhoto={openPhoto}
+      >
+        Voxel game built on a simple rendering engine written with JavaFX.
+        Generate your terrain and form your ideal world by exploring and
+        harvesting resources.
+      </ProjectTile>
+    </Box>
+  );
+}