hw7 started, added project info page

site/src/main/components/Gallery.tsx

@@ -0,0 +1,41 @@
+import ImageList from '@mui/material/ImageList';
+import ImageListItem from '@mui/material/ImageListItem';
+import {realPhotos} from "../../data";
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import ImageListItemBar from '@mui/material/ImageListItemBar';
+const imgData = realPhotos.slice(0,3)
+
+function Gallery() {
+  return (
+    <Container maxWidth="lg">
+      <Box sx={{ width: {xs:"100%", sm:"90%"}, height: 'min-content', m: '20px auto' } }>
+        <ImageList
+          variant="masonry"
+          sx={{
+            columnCount: {
+              xs: '1 !important',
+              sm: '3 !important',
+              md: '3 !important',
+              lg: '3 !important',
+            },
+          }}
+          gap={5}>
+          {imgData.map((item,index) => (
+            <ImageListItem key={item.img} sx={{paddingTop: index%2!=0 ? '0px' : '5px'}}>
+              <img
+                alt={item.title}
+                srcSet={item.img}
+                src={item.img}
+                loading="lazy"
+              />
+              <ImageListItemBar position="bottom" title={ item.title } />
+            </ImageListItem>
+          ))}
+        </ImageList>
+      </Box>
+    </Container>
+  );
+}
+
+export default Gallery;