Merge branch 'feat/waterfallpic'

src/components/Waterfall.js

@@ -13,9 +13,33 @@ const WaterfallItem = ({ data, onLoad }) => {
   return (
     <div className="waterfallItem" ref={ref}>
       <div className="project__content__main__container">
-        <div style={{ display: 'flex', flexDirection: 'row', justifyContent:'space-between'  }}>
+        <div
-          <h3 style={{ fontFamily: "itrFontMedium", fontSize: '25px', color: "#fff", marginBottom: 12 }}>{data.title}</h3>
+          style={{
-          <h3 style={{ fontFamily: "itrFontMedium", fontSize: '25px', color: "#fff", marginBottom: 12 }}>{data.sub}</h3>
+            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
@@ -24,10 +48,11 @@ const WaterfallItem = ({ data, onLoad }) => {
                 onLoad(sizeRef.current.size);
               }, 500);
             }}
-            alt="asd"
+            onError={() =>
-            onError={setTimeout(() => {
+              setTimeout(() => {
                 onLoad(sizeRef.current.size);
-            }, 500)}
+              }, 500)
+            }
             width={"100%"}
             src={data.img}
           />