hw7 started, added project info page

site/src/projectDetails/ProjectDetails.tsx

@@ -0,0 +1,57 @@
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import {sidecardData}  from '../data.tsx';
+import { useParams, Link } from 'react-router-dom';
+import BackgroundVideo from "./components/BackgroundVideo";
+
+const StyledTypography = styled(Typography)(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    textAlign: 'justify',
+    marginBottom: '1em',
+}));
+
+
+function ProjectDetails() {
+    const { id } = useParams();
+    const projectDetails = sidecardData[Number(id)];
+    return (
+        <>
+        <div style={{display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", minHeight:"100vh"}}>
+            <Card sx={{ display: 'flex', flexDirection: "column", alignItems: "center", backgroundColor:"#FFFFFFA8"}} >
+                <Box sx={{ display: 'flex', flexDirection: 'row', alignSelf: 'flex-start', gap: '0.5em', m: '1em' }}>
+                    <Link to="/" style={{ textDecoration: 'none' }}><Typography sx={{color:"#659adf"}}>Main</Typography></Link>  &gt; {projectDetails.title}
+                </Box>
+                <Typography gutterBottom variant="h5" >
+                    {projectDetails.title}
+                </Typography>
+                <CardMedia
+                    component="img"
+                    alt={projectDetails.title}
+                    image={projectDetails.img}
+                    sx={{ width:"auto", maxHeight:"45vh",  rounded: '8px' }}
+                />
+                <Box>
+                    <CardContent>
+                        <Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: {xs:0, sm:'2em'}}}>
+                            {projectDetails.description.map((item, ind) => (
+                                <StyledTypography key={ind} variant="body2" sx={{ flex: 1 }}>
+                                    {item}
+                                </StyledTypography>
+                            ))}
+                        </Box>
+                    </CardContent>
+
+                </Box>
+            </Card>
+            <BackgroundVideo />
+        </div>
+        </>
+    )
+}
+
+export default ProjectDetails;

site/src/projectDetails/components/BackgroundVideo.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+
+import { playbackVideo } from '../../data.tsx';
+
+const BgVideo = () => {
+  const videoSrc = playbackVideo;
+  const [loading, setLoading] = useState(true);
+  const makeVisible = () => {
+    setLoading(false);
+  }
+
+  return (
+    <video
+      onLoadedData={makeVisible}
+      autoPlay
+      muted
+      loop
+      style={{
+        position: "fixed",
+        minWidth: "100vw",
+        minHeight: "100vh",
+        left: 0,
+        top: 0,
+        zIndex: -1,
+        opacity: loading ? 0 : 1,
+        transition: "opacity, 2s ease-in-out"
+
+      }}
+    >
+      <source src={videoSrc} type="video/mp4" />
+    </video>
+  );
+
+}
+
+export default BgVideo;