fix: boxes pattern and inconsistent colors

Author: rxyhn

src/components/Boxes.astro

@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from "react";
+
+interface GridProps {
+  className?: string;
+}
+
+const Boxes: React.FC<GridProps> = ({ className = "" }) => {
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const updateDimensions = () => {
+      setDimensions({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    window.addEventListener("resize", updateDimensions);
+    updateDimensions();
+
+    return () => window.removeEventListener("resize", updateDimensions);
+  }, []);
+
+  const getCellSize = () => {
+    if (dimensions.width < 640) return 20; // sm
+    if (dimensions.width < 768) return 30; // md
+    if (dimensions.width < 1024) return 45; // lg
+    return 88; // xl
+  };
+
+  const cellSize = getCellSize();
+  const columns = Math.ceil(dimensions.width / cellSize);
+  const rows = Math.ceil(dimensions.height / 2 / cellSize); // Only half the screen height
+
+  return (
+    <div
+      className={`absolute h-1/2 w-full overflow-hidden ${className}`}
+      style={{ zIndex: -1 }}
+    >
+      {/* Left gradient overlay */}
+      <div className="absolute left-0 top-0 h-full w-1/2">
+        <div className="absolute inset-0 z-30 bg-gradient-to-tl from-black from-50% via-transparent via-90% to-transparent to-100%" />
+        <div className="flex h-full w-full flex-col divide-y divide-dashed divide-neutral-700 border-l border-t border-black">
+          {Array.from({ length: rows }).map((_, rowIndex) => (
+            <div
+              key={rowIndex}
+              className="relative flex w-full divide-x divide-dashed divide-neutral-700"
+              style={{ height: `${cellSize}px` }}
+            >
+              {Array.from({ length: columns / 2 }).map((_, colIndex) => (
+                <div key={colIndex} className="relative w-full bg-black">
+                  <div className="absolute inset-0.5 bg-black" />
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Right gradient overlay */}
+      <div className="absolute right-0 top-0 h-full w-1/2">
+        <div className="absolute inset-0 z-30 bg-gradient-to-tr from-black from-50% via-transparent via-90% to-transparent to-100%" />
+        <div className="flex h-full w-full flex-col divide-y divide-dashed divide-neutral-700 border-l border-t border-black">
+          {Array.from({ length: rows }).map((_, rowIndex) => (
+            <div
+              key={rowIndex}
+              className="relative flex w-full divide-x divide-dashed divide-neutral-700"
+              style={{ height: `${cellSize}px` }}
+            >
+              {Array.from({ length: columns / 2 }).map((_, colIndex) => (
+                <div key={colIndex} className="relative w-full bg-black">
+                  <div className="absolute inset-0.5 bg-black" />
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Boxes;

src/components/Boxes.tsx

@@ -4,7 +4,7 @@ const { link, text } = Astro.props;
 
 <a
   href={link}
-  class="inline-flex w-full items-center justify-center rounded-full border border-neutral-950 bg-neutral-200 px-4 py-2 text-sm font-semibold text-neutral-950 backdrop-blur-xl transition-all duration-300 ease-out hover:border-neutral-200 hover:bg-neutral-950 hover:text-neutral-200 md:w-auto md:justify-start"
+  class="inline-flex w-full items-center justify-center rounded-full border border-black bg-neutral-200 px-4 py-2 text-sm font-semibold text-black backdrop-blur-xl transition-all duration-300 ease-out hover:border-neutral-200 hover:bg-black hover:text-neutral-200 md:w-auto md:justify-start"
 >
   {text}
 </a>

src/components/Button.astro

@@ -16,7 +16,7 @@ const { url, description, highlights, name } = Astro.props as CardProps;
   class="group relative flex h-full flex-col items-stretch rounded-2xl p-7 duration-300 ease-out sm:p-5"
 >
   <span
-    class="absolute inset-0 z-20 block h-full w-full rounded-2xl border border-dashed border-transparent bg-transparent duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:border group-hover:border-dashed group-hover:border-neutral-600 group-hover:bg-neutral-950"
+    class="absolute inset-0 z-20 block h-full w-full rounded-2xl border border-dashed border-transparent bg-transparent duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:border group-hover:border-dashed group-hover:border-neutral-600 group-hover:bg-black"
     aria-hidden="true"></span>
   <span
     class="absolute inset-0 z-10 block h-full w-full rounded-2xl border border-dashed border-neutral-600 duration-300 ease-out group-hover:translate-x-1 group-hover:translate-y-1"

src/components/Card.astro

@@ -10,7 +10,7 @@ export default function CollapseText({ children }: CollapseTextProps) {
   return (
     <div className="relative">
       <div
-        className={`relative flex flex-col gap-4 max-sm:!h-auto md:after:absolute md:after:bottom-0 md:after:h-12 md:after:w-full md:after:bg-gradient-to-t md:after:from-neutral-950 md:after:content-[''] ${
+        className={`relative flex flex-col gap-4 max-sm:!h-auto md:after:absolute md:after:bottom-0 md:after:h-12 md:after:w-full md:after:bg-gradient-to-t md:after:from-black md:after:content-[''] ${
           expanded ? "after:hidden" : ""
         }`}
         style={{ maxHeight: expanded ? "none" : "50px", overflow: "hidden" }}

src/components/CollapseText.tsx

@@ -0,0 +1,13 @@
+---
+import { basics } from "@cv";
+const { name } = basics;
+---
+
+<footer class="w-full print:hidden">
+  <div
+    class="mx-auto items-center border-t border-neutral-800 bg-black px-6 py-4 text-center text-xs text-neutral-200 sm:mt-20"
+  >
+    © {new Date().getFullYear()}
+    {name}. All rights reserved.
+  </div>
+</footer>

src/components/Footer.astro

@@ -1,9 +1,8 @@
 ---
 import NavBar from "@/components/NavBar.astro";
+import Footer from "@/components/Footer.astro";
 import Starry from "@/components/Starry";
-import Boxes from "@/components/Boxes.astro";
-import { basics } from "@cv";
-const { name } = basics;
+import Boxes from "@/components/Boxes";
 const { title } = Astro.props;
 ---
 
@@ -22,9 +21,9 @@ const { title } = Astro.props;
     />
   </head>
   <body
-    class="relative z-10 bg-neutral-950 leading-relaxed tracking-wide text-neutral-200 antialiased selection:bg-neutral-300 selection:text-neutral-900"
+    class="relative flex min-h-screen flex-col bg-black leading-relaxed tracking-wide text-neutral-200 antialiased selection:bg-neutral-300 selection:text-neutral-900"
   >
-    <Boxes />
+    <Boxes client:load />
     <NavBar />
     <Starry
       client:idle
@@ -34,22 +33,14 @@ const { title } = Astro.props;
       maxSize={1.4}
       opacity={0.2}
       particleDensity={100}
-      className="fixed z-0 h-full w-full"
+      className="fixed inset-0 z-0"
       particleColor="#FFFFFF"
     />
-    <main
-      class="flex flex-grow flex-col items-center justify-center pb-20 pt-16"
-    >
+    <main class="relative z-10 flex-grow py-16">
       <slot />
     </main>
-    <footer class="bottom-0 left-0 z-50 w-full print:hidden">
-      <div
-        class="mx-auto h-14 w-full items-center border-l-0 border-r-0 border-t border-neutral-600/40 bg-neutral-900/60 px-6 py-4 text-center text-xs backdrop-blur-2xl"
-      >
-        © {new Date().getFullYear()}
-        {name}. All rights reserved.
-      </div>
-    </footer>
+    <Footer />
+
     <script src="../scripts/main.ts"></script>
   </body>
 </html>