hw7 started, added project info page

site/src/App.tsx

@@ -1,26 +0,0 @@
-import NavBar from './components/Navbar'
-import Gallery from "./components/Gallery";
-import MainContent from "./components/Content";
-import CustomFooter from "./components/CustomFooter";
-import Sidebar from "./components/Sidebar";
-
-import {Container} from "@mui/material";
-
-import './styles/App.css'
-
-function App() {
-  return (
-    <>
-      <NavBar  active='1'/>
-      <Gallery />
-      <Container sx={{display: 'flex', flexDirection: {xs: 'column', md: 'row'}, gap: '2px', mt: '20px',p:"0px !important"}}>
-        <MainContent />
-        <Sidebar />
-      </Container>
-  
-      <CustomFooter/>
-    </>
-  )
-}
-
-export default App

site/src/components/Sidebar.tsx

@@ -1,19 +0,0 @@
-import Container from '@mui/material/Container';
-import Grid from '@mui/material/Grid';
-import {sidecardData} from "../data";
-import SmallCard from "./SmallCard"
-const cardData = sidecardData
-
-function Content() {
-  return (
-    <Container maxWidth="xs" sx={{maxWidth: {xs:"100%", md:"300px"}, pr:{md:"0px !important",xs:"20px"}}}>
-      {cardData.map((item, index) => (
-        <Grid key={index} size={{ xs: 12, md: 3 }} >
-          <SmallCard data={ item } cardNum={index} />
-        </Grid>
-      ))}
-    </Container>
-  );
-}
-
-export default Content;

site/src/main.tsx

@@ -1,10 +1,42 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './styles/index.css'
-import App from './App.tsx'
 
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
+
+// import List from "./list/List";
+// import Chart from "./chart/Chart";
+import Main from "./main/Main";
+import ProjectDetails from "./projectDetails/ProjectDetails";
+
+
+
+const router = createBrowserRouter([
+  {
+    path: "",
+    element: <Main />,
+  },
+  {
+    path: "/project-details/:id",
+    element: <ProjectDetails />,
+  },
+  // {
+  //   path: "/chart",
+  //   element: <Chart />,
+  // },
+  // {
+  //   path: "/building/:id",
+  //   element: <Building />,
+  // },
+]);
+
+
+
+import './styles/index.css'
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </StrictMode>,
 )

site/src/main/Main.tsx

@@ -0,0 +1,27 @@
+import NavBar from '../components/Navbar'
+import CustomFooter from "../components/CustomFooter";
+
+import Gallery from "./components/Gallery";
+import MainContent from "./components/Content";
+import Sidebar from "./components/Sidebar";
+
+import { Container } from "@mui/material";
+
+import '../styles/App.css'
+
+function App() {
+    return (
+        <>
+            <NavBar active='1' />
+            <Gallery />
+            <Container sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap: '2px', mt: '20px', p: "0px !important" }}>
+                <MainContent />
+                <Sidebar />
+            </Container>
+
+            <CustomFooter />
+        </>
+    )
+}
+
+export default App

site/src/main/components/Content.tsx

@@ -1,6 +1,6 @@
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
-import {mainCards} from "../data";
+import {mainCards} from "../../data";
 import BigCard from "./BigCard"
 const cardData = mainCards
 

site/src/main/components/Gallery.tsx

@@ -1,6 +1,6 @@
 import ImageList from '@mui/material/ImageList';
 import ImageListItem from '@mui/material/ImageListItem';
-import {realPhotos} from "../data";
+import {realPhotos} from "../../data";
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import ImageListItemBar from '@mui/material/ImageListItemBar';

site/src/main/components/Sidebar.tsx

@@ -0,0 +1,18 @@
+import Container from '@mui/material/Container';
+import {sidecardData} from "../../data";
+import SmallCard from "./SmallCard"
+const cardData = sidecardData
+
+function Content() {
+  return (
+    <Container maxWidth="xs" sx={{display:"flex", flexDirection:"column", gap:"5px", maxWidth: {xs:"100%", md:"300px"}, pr:{md:"0px !important",xs:"20px"}}}>
+      {cardData.map((item, index) => (
+        // <Grid key={index} size={{ xs: 12, md: 3 }} >
+          <SmallCard data={ item } idx={index} />
+        // </Grid>
+      ))}
+    </Container>
+  );
+}
+
+export default Content;

site/src/main/components/SmallCard.tsx

@@ -6,13 +6,14 @@ import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
+import { Link } from 'react-router-dom';
 interface ComponentProps {
   data: {
     img: string,
     title: string,
     description: string[]
   },
-  cardNum: number;
+  idx: number;
 }
 
 
@@ -21,20 +22,20 @@ const StyledTypography = styled(Typography)(({ theme }) => ({
   textAlign: 'justify',
   marginBottom: '2px',
   fontSize: '12px',
-  padding:"5px"
+  padding: "5px"
 }));
 
 
 
 
-function SmallCard({ data }: ComponentProps) {
+function SmallCard({ data,idx }: ComponentProps) {
   // if(reverseModifier){
   //   [textA,textB] = [textB,textA];
   // }
-  let buf=data.description.reduce((acc, val) => acc + " " + val, "");
-  
-  if(buf.length>70){
-    buf = buf.slice(0,70)+"...";
+  let buf = data.description.reduce((acc, val) => acc + " " + val, "");
+
+  if (buf.length > 70) {
+    buf = buf.slice(0, 70) + "...";
   }
 
   const textPart = buf;
@@ -50,14 +51,16 @@ function SmallCard({ data }: ComponentProps) {
       }}>
         <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }} >
           <CardHeader title={data.title} sx={{ p: "5px", '& .MuiCardHeader-title': { fontSize: '13px' } }} />
-            <StyledTypography variant="body2" sx={{display:{xs:"none", md:"block"}}}>
-              {textPart}
-            </StyledTypography>
-            <StyledTypography variant="body2" sx={{display:{xs:"block", md:"none"}}}>
-              {data.description}
-            </StyledTypography>
-          <CardActions sx={{ justifyContent: 'end', alignContent: "flex-end", p:0 }} >
-            <Button size="small" sx={{p:0, fontSize:"10px"}}>Check it out</Button>
+          <StyledTypography variant="body2" sx={{ display: { xs: "none", md: "block" } }}>
+            {textPart}
+          </StyledTypography>
+          <StyledTypography variant="body2" sx={{ display: { xs: "block", md: "none" } }}>
+            {data.description}
+          </StyledTypography>
+          <CardActions sx={{ justifyContent: 'end', alignContent: "flex-end", p: 0 }} >
+            <Link key={idx} to={"/project-details/" + idx}>
+              <Button size="small" sx={{ p: "0 5px", fontSize: "10px" }}>Check it out</Button>
+            </Link>
           </CardActions>
         </Box>
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', maxWidth: { xs: '100%', md: "40%" }, bgcolor: "#0581f513" }} >
@@ -65,7 +68,7 @@ function SmallCard({ data }: ComponentProps) {
             component="img"
             alt={data.title}
             image={data.img}
-            sx={{objectFit: 'fill' }}
+            sx={{ objectFit: 'fill' }}
           />
         </Box>
       </Box>

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;

site/src/styles/index.css

@@ -2,7 +2,7 @@
   --text: #6b6375;
   --text-h: #08060d;
   --bg: #fff;
-  --border: #e5e4e7;
+  /* --border: #e5e4e7; */
   --code-bg: #f4f3ec;
   --accent: #aa3bff;
   --accent-bg: rgba(170, 59, 255, 0.1);