link homepage images

src/components/MasonryGallery.tsx

@@ -50,9 +50,7 @@ const MasonryGallery = ({
   const { breakpoint } = useBreakpoint(breakpoints, 'xs')
 
   // const breakpoint = currentBreakpoint.length ? currentBreakpoint : "xs";
-  console.log("🚀 ~ file: MasonryGallery.tsx ~ line 51 ~ breakpoint", breakpoint)
   const galleryWidth = `calc(100vw - ${ breakpoint === "xs" || breakpoint === "sm" ? "32" : "160" }px)`;
-  console.log("🚀 ~ file: MasonryGallery.tsx ~ line 55 ~ galleryWidth", galleryWidth)
 
   const aspectRatios = React.useMemo(
     () => R.map(getAspectRatio, images).filter(Boolean),
@@ -161,7 +159,7 @@ const MasonryGallery = ({
                   )`
                 : "",
             }}
-            to={`/photogallery/${image.base}`}
+            to={`/photogallery/${image.base}/`}
           >
             {debugHue && (
               <span className="text-white z-20 absolute bg-black">

src/components/Nav.tsx

@@ -84,7 +84,6 @@ const Nav = ({ internalLinks, className }: NavProps) => {
         "my-4 flex flex-col-reverse md:flex-row items-center w-full font-sans px-4 md:px-8",
         className
       )}
-      style={{ zIndex: 100 }}
     >
       <div className="md:flex items-baseline flex-auto">
         <h1 className="font-bold mr-2">Chuck Dries</h1>
@@ -107,6 +106,7 @@ const Nav = ({ internalLinks, className }: NavProps) => {
             ))}
         </ul>
         <Popover
+          containerClassName="z-30 p-1"
           content={<ExternalLinks />}
           isOpen={linksMenu}
           onClickOutside={() => setLinksMenu(false)}

src/pages/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { graphql, PageProps } from "gatsby";
+import { graphql, Link, PageProps } from "gatsby";
 import { GatsbyImage, getImage } from "gatsby-plugin-image";
 import { Helmet } from "react-helmet";
 // import { take } from "ramda";
@@ -90,13 +90,23 @@ const IndexPage = ({
             { href: "/photogallery/", label: "Gallery" },
           ]}
         />
-        {isClient && <GatsbyImage
-          alt=""
-          className="flex-auto m-4 md:m-8 mt-0 md:mt-0"
-          image={img!}
-          loading="eager"
-          objectFit={browserIsLandscape ? "cover" : "contain"}
-        />}
+        {isClient && (
+          <Link
+            className="flex-auto flex flex-col  m-4 md:m-8 mt-0 md:mt-0"
+            to={`/photogallery/${image.base}/`}
+          >
+            <GatsbyImage
+              alt=""
+              className="h-[calc(100vh-160px)]" // reeeeee
+              image={img!}
+              loading="eager"
+              objectFit={browserIsLandscape ? "cover" : "contain"}
+              style={{
+                height: "calc(100vh-160px)",
+              }}
+            />
+          </Link>
+        )}
       </main>
     </>
   );