projects layout

Author: Dowdow

src/components/Home.tsx

@@ -1,9 +1,19 @@
 import me from "../assets/me.jpg";
 import Project from "./Project";
+import useBreakpoint from "../hooks/breakpoint";
 import { projects } from "../hooks/projects";
 import ImageViewer from "./ImageViewer";
+import { useMemo } from "react";
 
 export default function Home() {
+  const breakpoint = useBreakpoint();
+
+  const breakpointCount = useMemo(() => {
+    if (breakpoint === "lg") return 3;
+    if (breakpoint === "md") return 2;
+    return 1;
+  }, [breakpoint]);
+
   return (
     <>
       <ImageViewer />
@@ -52,17 +62,23 @@ export default function Home() {
             Every side projects I made, and some from university
           </span>
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 mt-10">
-          {projects.map((p, index) => (
-            <Project
-              key={index}
-              name={p.name}
-              description={p.description}
-              date={p.date}
-              images={p.images}
-              tools={p.tools}
-              links={p.links}
-            />
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 mt-20">
+          {Array.from({ length: breakpointCount }).map((_, index) => (
+            <div key={index} className="flex flex-col gap-y-10">
+              {projects
+                .filter((_, i) => i % breakpointCount === index)
+                .map((p, i) => (
+                  <Project
+                    key={i}
+                    name={p.name}
+                    description={p.description}
+                    date={p.date}
+                    images={p.images}
+                    tools={p.tools}
+                    links={p.links}
+                  />
+                ))}
+            </div>
           ))}
         </div>
       </div>

src/components/Project.tsx

@@ -38,18 +38,20 @@ export default function Project({
       <h3 className="text-2xl font-bold tracking-tighter">{name}</h3>
       <span className="text-sm text-prim/60">{date}</span>
       <p className="mt-3 text-prim/80">{description}</p>
-      <div className="flex gap-3 mt-3 h-40 overflow-x-scroll">
-        {images.map((m, index) => (
-          <img
-            key={`img-${index}`}
-            src={m}
-            alt={`${name} image ${index + 1}`}
-            className="w-40 h-40 rounded cursor-pointer object-cover"
-            onClick={() => showImages(index)}
-          />
-        ))}
-      </div>
-      <div className="flex flex-wrap mt-5 gap-x-2 gap-y-0.5">
+      {images.length > 0 ? (
+        <div className="flex gap-3 mt-3 h-40 overflow-x-scroll">
+          {images.map((m, index) => (
+            <img
+              key={`img-${index}`}
+              src={m}
+              alt={`${name} image ${index + 1}`}
+              className="w-40 h-40 rounded cursor-pointer object-cover"
+              onClick={() => showImages(index)}
+            />
+          ))}
+        </div>
+      ) : null}
+      <div className="flex flex-wrap mt-3 gap-x-2 gap-y-0.5">
         {tools.map((t, index) => (
           <>
             <span key={index} className="text-prim/60 italic">

src/hooks/breakpoint.ts

@@ -0,0 +1,34 @@
+import { useState, useEffect } from "react";
+
+export default function useBreakpoint() {
+  const [breakpoint, setBreakpoint] = useState<"sm" | "md" | "lg">("sm");
+
+  useEffect(() => {
+    const breakpoints = {
+      sm: window.matchMedia("(min-width: 640px)"),
+      md: window.matchMedia("(min-width: 768px)"),
+      lg: window.matchMedia("(min-width: 1024px)"),
+    };
+
+    const determineBreakpoint = () => {
+      if (breakpoints.lg.matches) setBreakpoint("lg");
+      else if (breakpoints.md.matches) setBreakpoint("md");
+      else if (breakpoints.sm.matches) setBreakpoint("sm");
+      else setBreakpoint("sm");
+    };
+
+    Object.values(breakpoints).forEach((mq) => {
+      mq.addEventListener("change", determineBreakpoint);
+    });
+
+    determineBreakpoint();
+
+    return () => {
+      Object.values(breakpoints).forEach((mq) => {
+        mq.removeEventListener("change", determineBreakpoint);
+      });
+    };
+  }, []);
+
+  return breakpoint;
+}

src/hooks/projects.ts

@@ -111,6 +111,26 @@ export const projects = [
       },
     ],
   },
+  {
+    name: "dowdow.github.io",
+    description: "The current website you are scrolling.",
+    date: "2022-09",
+    images: [],
+    tools: [
+      "Typescript",
+      "Vite",
+      "React 19",
+      "Tailwind",
+      "Gamepad API",
+      "Midi API",
+    ],
+    links: [
+      {
+        name: "GitHub",
+        link: "https://github.com/Dowdow/dowdow.github.io",
+      },
+    ],
+  },
   {
     name: "Event Sonar",
     description: