[FEATURE] Initial Packaging For Resume Display (#7)

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

src/pages/delta/ProjectTile.jsx

@@ -1,7 +1,9 @@
+import { useState } from "react";
 import Box from "@mui/material/Box";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
+import { SiGitea } from "react-icons/si";
 
 export default function ProjectTile({
   image,
@@ -10,9 +12,13 @@ export default function ProjectTile({
   children: description,
   disableGutter,
   openPhoto,
+  link,
 }) {
   const theme = useTheme();
   const smallMode = useMediaQuery(theme.breakpoints.down("md"));
+  const [gitHov, setGitHov] = useState(false);
+
+  const toggleHover = () => setGitHov(!gitHov);
 
   const imageClick = () => openPhoto(image);
   return (
@@ -48,6 +54,7 @@ export default function ProjectTile({
             display: "inline-flex",
             width: "100%",
             justifyContent: smallMode ? "center" : "",
+            flexWrap: "wrap",
           }}
         >
           <Typography variant="h5" component="div" style={{ fontWeight: 800 }}>
@@ -65,6 +72,25 @@ export default function ProjectTile({
           >
             {year}
           </span>
+          <a
+            href={link ?? "/"}
+            style={{
+              color: "#609926",
+              opacity: gitHov ? ".8" : "1",
+              display: "flex",
+            }}
+          >
+            <SiGitea
+              size="1.5em"
+              style={{
+                padding: 5,
+                margin: "auto 0 auto 10px",
+                cursor: "pointer",
+              }}
+              onMouseEnter={toggleHover}
+              onMouseLeave={toggleHover}
+            />
+          </a>
         </div>
         <div
           style={{