add gallery

src/assets/data/gallery.js

@@ -0,0 +1,108 @@
+import pic0 from "../pics/gallery/IMG_0796.jpg";
+import pic1 from "../pics/gallery/IMG_6390.jpg";
+import pic2 from "../pics/gallery/IMG_6392.jpg";
+import pic3 from "../pics/gallery/IMG_6393.jpg";
+import pic4 from "../pics/gallery/IMG_8547.jpg";
+import pic5 from "../pics/gallery/IMG_8548.jpg";
+import pic6 from "../pics/gallery/IMG_8549.jpg";
+import pic7 from "../pics/gallery/JSDC2011.jpg";
+import pic8 from "../pics/gallery/JSDC2012.jpg";
+import pic9 from "../pics/gallery/dsc_0001.jpg";
+import pic10 from "../pics/gallery/dsc_0003.jpg";
+import pic11 from "../pics/gallery/dsc_0235.jpg";
+import pic12 from "../pics/gallery/dsc_0238.jpg";
+import pic13 from "../pics/gallery/dsc_0243.jpg";
+import pic14 from "../pics/gallery/jsdc2015_001.jpg";
+import pic15 from "../pics/gallery/jsdc2015_002.jpg";
+import pic16 from "../pics/gallery/jsdc2015_003.jpg";
+
+const gallery = {
+  pic: [
+    {
+      title: "",
+      content: "",
+      img: pic0,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic1,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic2,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic3,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic4,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic5,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic6,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic7,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic8,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic9,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic10,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic11,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic12,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic13,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic14,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic15,
+    },
+    {
+      title: "",
+      content: "",
+      img: pic16,
+    }
+  ],
+};
+export default gallery;

src/assets/stylesheets/gallery.scss

@@ -0,0 +1,40 @@
+@font-face {
+  font-family: itrFont;
+  src: url(../font/LeagueSpartan-ExtraBold.ttf);
+}
+
+@font-face {
+  font-family: itrFontMedium;
+  src: url(../font/LeagueSpartan-Medium.ttf);
+}
+
+.gallery {
+  background-color: #232323;
+  width: 100%;
+  min-height: 100vh;
+  height: auto;
+  opacity: 100%;
+  overflow-x: hidden;
+  display: flex;
+  -webkit-animation: fade 0.9s ease-in;
+  -moz-animation: fade 0.9s ease-in;
+  -ms-animation: fade 0.9s ease-in;
+  -o-animation: fade 0.9s ease-in;
+  animation: fade 0.9s ease-in;
+  background: linear-gradient(#3b3b3b, #1a1a1a);
+}
+
+.gallery_wrap {
+  flex-wrap: wrap;
+  padding: 24px;
+  margin-left: 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+}
+.gallery__title {
+  margin: 20px 0 20px 20px;
+  font-family: itrFontMedium;
+  color: #fff;
+  text-align: center;
+}

src/components/AppOuter.js

@@ -3,9 +3,15 @@ import DropdownContainer from "../components/DropdownContainer";
 import GlobalStore from "../store/global";
 import NavBar from "../components/NavBar";
 import Footer from "../components/Footer";
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
 
 const AppOuter = ({ children }) => {
   const { isHamburger, setIsHamburger } = useContainer(GlobalStore);
+  const location = useLocation();
+  useEffect(() => {
+    setIsHamburger(false);
+  }, [location.pathname]);
   return (
     <div className="container">
       {isHamburger ? (

src/components/Gallery.js

@@ -1,22 +1,62 @@
-import React, { Component } from "react";
-import backgroundVideo from "../assets/video.mp4";
-import "../assets/stylesheets/home.scss";
+import React, { useEffect, useMemo } from "react";
+import "../assets/stylesheets/gallery.scss";
+import { useContainer } from "unstated-next";
+import GlobalStore from "../store/global";
+import gallery from "../assets/data/gallery";
+import WaterfallPosition from "./hooks/waterfall";
+import { Image } from "antd";
 
-export default class Gallery extends Component {
-  render() {
-    return (
-      <div className="home">
-        <video autoPlay loop muted className="home__video">
-          <source src={backgroundVideo} type="video/mp4" />
-        </video>
-        <div className="home__content">
-          <label className="home__content__title">
-            ILLINOIS TECH
-            <br />
-            ROBOTICS
-          </label>
+const Render = ({ onLoad, data, sizeRef }) => {
+  return (
+    <div className="gallery__content">
+      <Image
+        onLoad={() => {
+          setTimeout(() => {
+            onLoad(sizeRef.current.size);
+          }, 100);
+        }}
+        onError={() =>
+          setTimeout(() => {
+            onLoad(sizeRef.current.size);
+          }, 100)
+        }
+        width={"100%"}
+        src={data.img}
+      />
+    </div>
+  );
+};
+
+const Gallery = () => {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  const { bodySize } = useContainer(GlobalStore);
+  const count = useMemo(() => {
+    if (bodySize.width > 850) {
+      return 3;
+    }
+    if (bodySize.width > 650) {
+      return 2;
+    }
+    return 1;
+  }, [bodySize]);
+  return (
+    <div className="gallery">
+      <div className="gallery__content">
+        <div className="gallery__content__main">
+          <div>
+            <h1 className="gallery__title">Gallery</h1>
+            <WaterfallPosition
+              columnNumber={count}
+              list={gallery.pic}
+              Render={Render}
+            />
+          </div>
         </div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+export default Gallery;

src/components/Projects.js

@@ -3,8 +3,59 @@ import "../assets/stylesheets/project.scss";
 import { useContainer } from "unstated-next";
 import GlobalStore from "../store/global";
 import projects from "../assets/data/projects";
-import WaterfallPosition from "./Waterfall";
-
+import WaterfallPosition from "./hooks/waterfall";
+import { Image } from "antd";
+const Render = ({ onLoad, data, sizeRef }) => {
+  return (
+    <div className="project__content__main__container">
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+      >
+        <h3
+          style={{
+            fontFamily: "itrFontMedium",
+            fontSize: "25px",
+            color: "#fff",
+            marginBottom: 12,
+          }}
+        >
+          {data.title}
+        </h3>
+        <h3
+          style={{
+            fontFamily: "itrFontMedium",
+            fontSize: "25px",
+            color: "#fff",
+            marginBottom: 12,
+          }}
+        >
+          {data.sub}
+        </h3>
+      </div>
+      <div className="project_item_content">
+        <Image
+          onLoad={() => {
+            setTimeout(() => {
+              onLoad(sizeRef.current.size);
+            }, 500);
+          }}
+          onError={() =>
+            setTimeout(() => {
+              onLoad(sizeRef.current.size);
+            }, 500)
+          }
+          width={"100%"}
+          src={data.img}
+        />
+        <span>{data.content}</span>
+      </div>
+    </div>
+  );
+};
 const Project = () => {
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -26,11 +77,19 @@ const Project = () => {
         <div className="project__content__main">
           <div>
             <h1 className="projects__title">Active Projects</h1>
-            <WaterfallPosition columnNumber={count} list={projects.active} />
+            <WaterfallPosition
+              columnNumber={count}
+              list={projects.active}
+              Render={Render}
+            />
           </div>
           <div>
             <h1 className="projects__title">Retired/Inactive Projects</h1>
-            <WaterfallPosition columnNumber={count} list={projects.inactive} />
+            <WaterfallPosition
+              columnNumber={count}
+              list={projects.inactive}
+              Render={Render}
+            />
           </div>
         </div>
         {/* <WaterfallPositionDemo /> */}

src/components/hooks/waterfall.js

@@ -1,9 +1,8 @@
-import { useSize } from "ahooks";
+import { useDebounce, useSize, useThrottleFn } from "ahooks";
 import React, { useRef, useEffect, useState } from "react";
-import "../assets/stylesheets/waterfall.scss";
-import { Image } from "antd";
+import "../../assets/stylesheets/waterfall.scss";
 
-const WaterfallItem = ({ data, onLoad }) => {
+const WaterfallItem = ({ data, onLoad, Render }) => {
   const ref = useRef();
   const size = useSize(ref);
   const sizeRef = useRef({});
@@ -12,58 +11,20 @@ const WaterfallItem = ({ data, onLoad }) => {
   }, [size]);
   return (
     <div className="waterfallItem" ref={ref}>
-      <div className="project__content__main__container">
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "space-between",
-          }}
-        >
-          <h3
-            style={{
-              fontFamily: "itrFontMedium",
-              fontSize: "25px",
-              color: "#fff",
-              marginBottom: 12,
-            }}
-          >
-            {data.title}
-          </h3>
-          <h3
-            style={{
-              fontFamily: "itrFontMedium",
-              fontSize: "25px",
-              color: "#fff",
-              marginBottom: 12,
-            }}
-          >
-            {data.sub}
-          </h3>
-        </div>
-        <div className="project_item_content">
-          <Image
-            onLoad={() => {
-              setTimeout(() => {
-                onLoad(sizeRef.current.size);
-              }, 500);
-            }}
-            onError={() =>
-              setTimeout(() => {
-                onLoad(sizeRef.current.size);
-              }, 500)
-            }
-            width={"100%"}
-            src={data.img}
-          />
-          <span>{data.content}</span>
-        </div>
-      </div>
+      <Render
+        onLoad={() => {
+          setTimeout(() => {
+            onLoad(sizeRef.current.size);
+          }, 500);
+        }}
+        sizeRef={sizeRef}
+        data={data}
+      />
     </div>
   );
 };
 
-const WaterfallPosition = ({ columnNumber, list }) => {
+const useWaterfall = ({ list, columnNumber, Render }) => {
   const stateRef = useRef({
     heights: [],
     loadNum: 0,
@@ -71,7 +32,7 @@ const WaterfallPosition = ({ columnNumber, list }) => {
   const onload = (index, height) => {
     stateRef.current.heights[index] = height;
     stateRef.current.loadNum++;
-    if (stateRef.current.loadNum === list.length) {
+    if (stateRef.current.loadNum <= list.length) {
       onSize();
     }
   };
@@ -95,12 +56,29 @@ const WaterfallPosition = ({ columnNumber, list }) => {
   };
   const waterfallDOM = useRef();
   const size = useSize(waterfallDOM);
+  const { run: onSizeThrottle } = useThrottleFn(onSize, { wait: 5e2 });
   useEffect(() => {
-    onSize();
+    onSizeThrottle();
   }, [size, columnNumber]);
   const rendered = list.map((item, index) => (
-    <WaterfallItem onLoad={(size) => onload(index, size.height)} data={item} />
+    <WaterfallItem
+      onLoad={(size) => onload(index, size.height)}
+      data={item}
+      Render={Render}
+    />
   ));
+  return {
+    waterfallDOM,
+    columns,
+  };
+};
+
+const WaterfallPosition = ({ columnNumber, list, Render }) => {
+  const { waterfallDOM, columns } = useWaterfall({
+    columnNumber,
+    list,
+    Render,
+  });
   return (
     <div ref={waterfallDOM} className="waterfallContainer">
       {columns.map((column) => {

src/index.js

@@ -8,6 +8,7 @@ import reportWebVitals from "./reportWebVitals";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import ErrorRoute from "./routes/ErrorRoute";
 import GlobalStore from "./store/global";
+import GalleryRoute from "./routes/GalleryRoute";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
@@ -31,11 +32,18 @@ const router = createBrowserRouter([
     path: "/projects",
     element: <ProjectsRoute></ProjectsRoute>,
     errorElement: <ErrorRoute></ErrorRoute>,
-  }
+  },
+  {
+    path: "/gallery",
+    element: <GalleryRoute></GalleryRoute>,
+    errorElement: <ErrorRoute></ErrorRoute>,
+  },
 ]);
 
-root.render(<GlobalStore.Provider>
-  <RouterProvider router={router}></RouterProvider>
-</GlobalStore.Provider>);
+root.render(
+  <GlobalStore.Provider>
+    <RouterProvider router={router}></RouterProvider>
+  </GlobalStore.Provider>
+);
 
 reportWebVitals();

src/routes/GalleryRoute.js

@@ -0,0 +1,12 @@
+import AppOuter from "../components/AppOuter";
+import Gallery from "../components/Gallery";
+
+const GalleryRoute = () => {
+  return (
+    <AppOuter>
+      <Gallery />
+    </AppOuter>
+  );
+};
+
+export default GalleryRoute;