+
+ );
};
-const OneByOneGridElement = ({
- image_url,
- image_alt,
- text,
-}: GridElementProps) => {
- return (
-
+
+ {title}
+
+
+ {text}
+
-
- );
+const OneWidePic = ({
+ image_url,
+ image_alt,
+ title,
+ text,
+ }: GridElementImageProps) => {
+ return (
+
- 
-
-
-
- {text}
-
+
+ );
};
const FourByOneGridElement = ({
- image_url,
- image_alt,
- text,
-}: GridElementProps) => {
- return (
-
+
+
+
+
+ {title}
+{text}
+
-
- );
+ image_url,
+ image_alt,
+ title,
+ text,
+ }: GridElementImageProps) => {
+ return (
+
-
-
-
-
- {text}
-
+
+ );
};
export const ProjectGrid = () => {
+ useEffect(() => {
+ var elem = document.querySelector("#project-grid");
+
+ // @ts-ignore
+ var msnry = new Masonry(elem, {
+ itemSelector: ".GridElement",
+ gutter: 5,
+ columnWidth: ".GridSizer",
+ percentPosition: true,
+ });
+ });
+ return (
+
+
+
+
+
+ {title}
+ +{text}
+
+
+
+ );
};
diff --git a/src/cusotmHooks.ts b/src/cusotmHooks.ts
new file mode 100644
index 0000000..6c9865e
--- /dev/null
+++ b/src/cusotmHooks.ts
@@ -0,0 +1,33 @@
+import {useEffect, useState} from "react";
+
+
+export function useWindowSize() {
+ // Initialize state with undefined width/height so server and client renders match
+ // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+ const [windowSize, setWindowSize] = useState({
+ width: 0,
+ height: 0,
+ });
+
+ useEffect(() => {
+ // Handler to call on window resize
+ function handleResize() {
+ // Set window width/height to state
+ setWindowSize({
+ width: window.innerWidth,
+ height: window.innerHeight,
+ });
+ }
+
+ // Add event listener
+ window.addEventListener("resize", handleResize);
+
+ // Call handler right away so state gets updated with initial window size
+ handleResize();
+
+ // Remove event listener on cleanup
+ return () => window.removeEventListener("resize", handleResize);
+ }, []); // Empty array ensures that effect is only run on mount
+
+ return windowSize;
+}
+
+
-
- );
+