feat: redesign project page

Author: Aksh-Bansal-dev

frontend/src/components/Cards/ProjectCardv3.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { createStyles, makeStyles } from "@material-ui/core/styles";
+import { Card, CardMedia, Typography } from "@material-ui/core";
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      display: "flex",
+      margin: "2vh",
+      height: "65vh",
+      width: "80vw",
+      position: "relative",
+    },
+    info: {
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      top: 0,
+      background: "rgba(0, 0, 0, 0.63)",
+      backdropFilter: "blur(10px)",
+      color: "white",
+      padding: "6% 0 0 10%",
+    },
+    title: {
+      fontSize: "2rem",
+      textDecoration: "none",
+      fontWeight: "bold",
+      color: "white",
+      fontFamily: "monospace",
+    },
+    lang: {
+      opacity: 0.5,
+      marginTop: "1vh",
+      fontSize: "1rem",
+      fontFamily: "monospace",
+    },
+    body: {
+      marginTop: "5vh",
+      fontSize: "1rem",
+      width: "80%",
+      fontFamily: "monospace",
+    },
+    owner: {
+      marginTop: "5vh",
+      fontSize: "1rem",
+      opacity: 0.5,
+      fontFamily: "monospace",
+    },
+    media: {
+      width: "100%",
+      height: "100%",
+    },
+  })
+);
+
+interface ProjectCardv3Props {
+  projectName: string;
+  lang: string;
+  description: string;
+  dev: string;
+  url: string;
+  image: string;
+}
+const ProjectCardv3: React.FC<ProjectCardv3Props> = ({
+  projectName,
+  lang,
+  description,
+  dev,
+  url,
+  image,
+}) => {
+  const classes = useStyles();
+  const [display, setDisplay] = React.useState<string>("none");
+
+  return (
+    <Card className={classes.root}>
+      <div
+        style={{ display }}
+        onMouseLeave={() => setDisplay("none")}
+        className={classes.info}
+      >
+        <a href={url} className={classes.title} target="_blank">
+          <Typography className={classes.title}>{projectName}</Typography>
+        </a>
+        <Typography className={classes.lang}>{lang}</Typography>
+        <Typography className={classes.body}>{description}</Typography>
+        <Typography className={classes.owner}>{dev}</Typography>
+      </div>
+      <CardMedia
+        onMouseEnter={() => setDisplay("block")}
+        image={image}
+        className={classes.media}
+      />
+    </Card>
+  );
+};
+
+export default ProjectCardv3;

frontend/src/pages/Projects/index.tsx

@@ -1,9 +1,7 @@
 import React from "react";
 import { createStyles, makeStyles } from "@material-ui/core/styles";
-import ProjectCardv2 from "src/components/Cards/ProjectCardv2";
+import ProjectCardv3 from "src/components/Cards/ProjectCardv3";
 import { projectlist } from "./projectlist";
-import useWindowDimensions from "../../utils/useWindowDimensions";
-import ProjectCard from "src/components/Cards/ProjectCard";
 import Nav2 from "src/components/Navs/Nav_v2";
 
 const useStyles = makeStyles(() =>
@@ -29,17 +27,12 @@ const useStyles = makeStyles(() =>
 
 const Projects: React.FC = () => {
   const classes = useStyles();
-  const { width } = useWindowDimensions();
   return (
     <div className={classes.root}>
       <Nav2 />
       <div className={classes.flexbox}>
         {projectlist.map((project, key) => {
-          if (width > 600) {
-            return <ProjectCardv2 key={key} {...project} />;
-          } else {
-            return <ProjectCard key={key} {...project} />;
-          }
+          return <ProjectCardv3 key={key} {...project} />;
         })}
       </div>
     </div>