From 25698a08e2a88e0f6ad00b71cf6f02063664ad24 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Fri, 16 Jul 2021 22:52:00 -0700
Subject: [PATCH 1/3] float navbar in middle of screen

---
 src/pages/index.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 4aabc1e..a7a0821 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -163,7 +163,6 @@ const IndexPage = ({
           style={getVibrantToHelmetSafeBodyStyle(vibrant)}
         />
       </Helmet>
-      {/* WIP: ipad portrait hits md breakpoint, looks bad */}
       <main
         className={classnames(
           "font-serif hero",
@@ -187,7 +186,6 @@ const IndexPage = ({
             }}
           />
         ) : (
-          // 67vw = 1/1.49253731 = 1/aspect ratio of my camera lol
           <div
             className="landscape:h-screen portrait:h-two-thirds-vw w-full"
             style={{ gridArea: "1/1" }}
@@ -204,14 +202,12 @@ const IndexPage = ({
         >
           <nav
             className={classnames(
-              isClient &&
-                "text-vibrant-dark bg-vibrant-dark blurred-or-opaque-bg-2",
-              "px-6 p-2",
-              ar > 1 || !isClient ? "landscape:w-screen" : "portrait:w-screen"
+              // ar > 1 || !isClient ? "landscape:w-screen" : "portrait:w-screen"
+              "w-screen p-2 flex justify-center"
             )}
             style={{ zIndex: 100 }}
           >
-            <ul className="flex flex-wrap justify-center">
+            <ul className="text-vibrant-dark px-6 p-2 bg-vibrant-dark blurred-or-opaque-bg-2 inline-flex flex-wrap justify-center">
               <li>
                 <HeroA
                   href="/CharlesDriesResumeCurrent.pdf"

From d83ee37c0c6139d7e3425470822401c2645c8a5a Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Fri, 16 Jul 2021 22:54:34 -0700
Subject: [PATCH 2/3] fix portrait images

---
 src/pages/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index a7a0821..9d8a73a 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -202,8 +202,8 @@ const IndexPage = ({
         >
           <nav
             className={classnames(
-              // ar > 1 || !isClient ? "landscape:w-screen" : "portrait:w-screen"
-              "w-screen p-2 flex justify-center"
+              ar > 1 || !isClient ? "landscape:w-screen" : "portrait:w-screen",
+              "p-2 flex justify-center"
             )}
             style={{ zIndex: 100 }}
           >

From a0e2f6c90fde8ead2e50fb491967f208aef34526 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sat, 17 Jul 2021 12:30:21 -0700
Subject: [PATCH 3/3] nav buttons work and I like the refactor but I like the
 navbar better

---
 src/pages/index.js | 131 +++++++++++++++++++++++----------------------
 1 file changed, 67 insertions(+), 64 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 9d8a73a..00df4d5 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -25,14 +25,72 @@ const getDifferentRand = (range, lastNs, iterations = 0) => {
   return n;
 };
 
+const getButtonClasses = (isClient, colorMode = 'vibrant') =>
+  classnames(
+    "z-20 rounded-md text-md inline-block px-3 py-2 my-1 mr-2 text-md hover:underline",
+    isClient &&
+      `text-muted-light bg-${colorMode}-dark blurred-or-opaque-bg-2`,
+    isClient && colorMode === 'muted' ? `hover:bg-muted` : ''
+  );
+
+const Nav = ({ ar, isClient }) => (
+  <nav
+    className={classnames(
+      ar > 1 || !isClient ? "landscape:w-screen" : "portrait:w-screen",
+      "p-2 flex justify-center"
+    )}
+    style={{ zIndex: 100 }}
+  >
+    {/* <ul className="text-vibrant-dark px-6 p-2 bg-vibrant-dark blurred-or-opaque-bg-2 inline-flex flex-wrap justify-center"> */}
+    <ul className="inline-flex flex-wrap">
+      <li>
+        <a
+          className={getButtonClasses(isClient)}
+          href="/CharlesDriesResumeCurrent.pdf"
+        >
+          Resume
+        </a>
+      </li>
+      <li>
+        <a
+          className={getButtonClasses(isClient)}
+          href="https://github.com/chuckdries"
+        >
+          Github
+        </a>
+      </li>
+      <li>
+        <a
+          className={getButtonClasses(isClient)}
+          href="https://www.linkedin.com/in/chuckdries/"
+        >
+          LinkedIn
+        </a>
+      </li>
+      <li>
+        <a
+          className={getButtonClasses(isClient)}
+          href="https://devpost.com/chuckdries"
+        >
+          Devpost
+        </a>
+      </li>
+      <li>
+        <a
+          className={getButtonClasses(isClient)}
+          href="https://medium.com/@chuckdries"
+        >
+          Medium (blog)
+        </a>
+      </li>
+    </ul>
+  </nav>
+);
+
 const ImageButtons = ({ isClient, image, shuffleImage }) => (
   <div className="flex mx-6 mb-6">
     <Link
-      className={classnames(
-        "z-20 rounded-md text-md inline-block px-3 py-2 my-1 mr-2 text-md",
-        isClient &&
-          "text-muted-light bg-muted-dark hover:bg-muted blurred-or-opaque-bg-2"
-      )}
+      className={getButtonClasses(isClient, 'muted')}
       id="image-link"
       title="view image details"
       to={`/photogallery/${image.base}/`}
@@ -42,11 +100,7 @@ const ImageButtons = ({ isClient, image, shuffleImage }) => (
       </span>
     </Link>
     <button
-      className={classnames(
-        "z-20 rounded-md text-md inline-block px-3 py-2 my-1 mr-2 text-md",
-        isClient &&
-          "text-muted-light bg-muted-dark hover:bg-muted blurred-or-opaque-bg-2"
-      )}
+      className={getButtonClasses(isClient, 'muted')}
       id="shuffle-button"
       onClick={() => {
         shuffleImage(image);
@@ -59,11 +113,7 @@ const ImageButtons = ({ isClient, image, shuffleImage }) => (
       </span>
     </button>
     <Link
-      className={classnames(
-        "self-center z-20 hover:underline rounded-md px-4 py-2 text-md font-bold font-serif",
-        isClient &&
-          "text-muted-light bg-muted-dark hover:bg-muted blurred-or-opaque-bg-2"
-      )}
+      className={getButtonClasses(isClient, 'muted')}
       id="photogallery-link"
       to="/photogallery/"
     >
@@ -154,6 +204,7 @@ const IndexPage = ({
   const vibrant = getVibrant(image);
   const ar = getAspectRatio(image);
   console.log("bg", image.base);
+
   return (
     <>
       <Helmet>
@@ -200,55 +251,7 @@ const IndexPage = ({
           )}
           style={{ gridArea: "1/1" }}
         >
-          <nav
-            className={classnames(
-              ar > 1 || !isClient ? "landscape:w-screen" : "portrait:w-screen",
-              "p-2 flex justify-center"
-            )}
-            style={{ zIndex: 100 }}
-          >
-            <ul className="text-vibrant-dark px-6 p-2 bg-vibrant-dark blurred-or-opaque-bg-2 inline-flex flex-wrap justify-center">
-              <li>
-                <HeroA
-                  href="/CharlesDriesResumeCurrent.pdf"
-                  isClient={isClient}
-                >
-                  Resume
-                </HeroA>
-              </li>
-              <li>
-                {" "}
-                <HeroA href="https://github.com/chuckdries" isClient={isClient}>
-                  Github
-                </HeroA>
-              </li>
-              <li>
-                <HeroA
-                  href="https://www.linkedin.com/in/chuckdries/"
-                  isClient={isClient}
-                >
-                  LinkedIn
-                </HeroA>
-              </li>
-              <li>
-                <HeroA
-                  href="https://devpost.com/chuckdries"
-                  isClient={isClient}
-                >
-                  Devpost
-                </HeroA>
-              </li>
-              <li>
-                <HeroA
-                  href="https://medium.com/@chuckdries"
-                  isClient={isClient}
-                >
-                  Medium (blog)
-                </HeroA>
-              </li>
-            </ul>
-          </nav>
-
+          <Nav isClient={isClient} ar={ar} />
           <div className="flex flex-col items-center">
             <h1
               className={classnames(