_duotóne_

src/components/Nav.tsx

@@ -5,7 +5,8 @@ import useDimensions from "react-cool-dimensions";
 
 import Menu from "@spectrum-icons/workflow/Menu";
 
-const navClasses = "hover:underline hover:bg-transparentblack block p-3 text-vibrant-light";
+const navClasses =
+  "hover:underline hover:bg-transparentblack block p-3 text-vibrant-light";
 
 const ExternalLinks = ({ isVertical }: { isVertical: boolean }) => (
   <ul
@@ -13,7 +14,7 @@ const ExternalLinks = ({ isVertical }: { isVertical: boolean }) => (
       "z-30 bg-vibrant-dark rounded overflow-hidden",
       isVertical
         ? "inline-flex flex-wrap justify-center"
-        : "absolute rounded-md top-[40px] border border-white"
+        : "absolute rounded-md top-[40px] border border-vibrant-light"
     )}
   >
     <li>
@@ -80,7 +81,7 @@ interface NavProps {
 
 const Nav = ({ internalLinks, className }: NavProps) => {
   const { observe, currentBreakpoint } = useDimensions({
-    breakpoints: { XS: 0, LG: 690 },
+    breakpoints: { XS: 0, LG: 750 },
     updateOnBreakpointChange: true,
   });
   const [linksMenu, setLinksMenu] = useState(false);
@@ -89,7 +90,6 @@ const Nav = ({ internalLinks, className }: NavProps) => {
     <nav
       className={classnames(
         "mt-0 flex justify-center w-full font-serif",
-        "bg-vibrant-dark",
         className
       )}
       ref={observe}
@@ -111,7 +111,7 @@ const Nav = ({ internalLinks, className }: NavProps) => {
             ))}
         </ul>
         {internalLinks && currentBreakpoint !== "XS" && (
-          <span className="block p-3 text-gray-200">|</span>
+          <span className="block p-3 text-vibrant-light opacity-75">|</span>
         )}
         {currentBreakpoint === "XS" && (
           <button

src/pages/index.tsx

@@ -170,18 +170,22 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
             DarkMuted: [0, 0, 0],
             LightMuted: [255, 255, 255],
             Vibrant: [255, 255, 255],
-            LightVibrant: [255, 255, 255],
+            LightVibrant: [0, 0, 0],
-            DarkVibrant: [0, 0, 0],
+            DarkVibrant: [231, 229, 228],
           })}
         />
       </Helmet>
-      <div className="top-0 z-10 bg-black">
+      <div className="top-0 z-10">
-        <Nav className="mb-4" internalLinks={[{ href: "/", label: "Home" }]} />
+        <div className="bg-vibrant-dark text-black pb-1">
+          <Nav
+            className="mb-4"
+            internalLinks={[{ href: "/", label: "Home" }]}
+          />
           <div className="flex flex-col text-center mr-5 md:ml-4 ml-2 my-4 md:my-7 font-serif">
             <h1 className="text-5xl mt-0 font-black z-10">Chuck Dries</h1>
             <h2 className="">Full Stack Software Engineer & Photographer</h2>
           </div>
-        {/* <div className="w-full gradient h-[10px]"></div> */}
+        </div>
         <div className="flex flex-col md:flex-row md:items-end justify-between">
           <KeywordsPicker
             keywords={[

src/styles/global.css

@@ -82,17 +82,22 @@
   }
   .gradient {
     background-image: linear-gradient(
-      45deg,
+      180deg,
-      hsl(226deg 100% 20%) 0%,
+      hsl(31deg 24% 44%) 0%,
-      hsl(279deg 68% 26%) 24%,
+      hsl(27deg 25% 42%) 7%,
-      hsl(309deg 85% 28%) 39%,
+      hsl(22deg 26% 40%) 14%,
-      hsl(324deg 92% 37%) 51%,
+      hsl(18deg 27% 37%) 21%,
-      hsl(339deg 72% 50%) 60%,
+      hsl(12deg 28% 35%) 29%,
-      hsl(356deg 91% 62%) 68%,
+      hsl(9deg 29% 32%) 36%,
-      hsl(15deg 100% 62%) 76%,
+      hsl(4deg 30% 30%) 43%,
-      hsl(32deg 100% 57%) 83%,
+      hsl(0deg 31% 27%) 50%,
-      hsl(45deg 100% 50%) 91%,
+      hsl(0deg 31% 23%) 57%,
-      hsl(55deg 100% 50%) 100%
+      hsl(0deg 31% 19%) 64%,
+      hsl(0deg 32% 15%) 71%,
+      hsl(0deg 30% 12%) 79%,
+      hsl(0deg 30% 8%) 86%,
+      hsl(0deg 30% 4%) 93%,
+      hsl(0deg 0% 0%) 100%
     );
   }
 }