refactor: cleanup the code

raexera · Sep 9, 2024 · 7f045b0 · 7f045b0
1 parent 9872cf3
commit 7f045b0
Show file tree

Hide file tree

Showing 17 changed files with 113 additions and 142 deletions.
diff --git a/src/components/Boxes.tsx b/src/components/Boxes.tsx
@@ -43,54 +43,56 @@ export default function Boxes({ className = "" }: GridProps) {
   const rows = Math.ceil(dimensions.height / cellSize);
 
   return (
-    <div
-      ref={containerRef}
-      className={`absolute w-full overflow-hidden ${className}`}
-      style={{ height: `${dimensions.height}px`, 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: Math.ceil(columns / 2) }).map(
-                (_, colIndex) => (
-                  <div key={colIndex} className="relative w-full bg-black">
-                    <div className="absolute inset-0.5 bg-black" />
-                  </div>
-                ),
-              )}
-            </div>
-          ))}
+    <section className="relative h-screen w-full">
+      <div
+        ref={containerRef}
+        className={`absolute flex h-full w-full justify-center overflow-hidden bg-black ${className}`}
+        style={{ height: `${dimensions.height}px`, zIndex: -1 }}
+      >
+        {/* Left gradient overlay */}
+        <div className="absolute left-0 top-0 h-full w-1/2">
+          <div className="absolute inset-0 z-50 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: Math.ceil(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>
 
-      {/* 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: Math.ceil(columns / 2) }).map(
-                (_, colIndex) => (
-                  <div key={colIndex} className="relative w-full bg-black">
-                    <div className="absolute inset-0.5 bg-black" />
-                  </div>
-                ),
-              )}
-            </div>
-          ))}
+        {/* Right gradient overlay */}
+        <div className="absolute right-0 top-0 h-full w-1/2">
+          <div className="absolute inset-0 z-50 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: Math.ceil(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>
-    </div>
+    </section>
   );
 }
diff --git a/src/components/Button.astro b/src/components/Button.astro
@@ -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-black bg-neutral-200 px-4 py-2 text-sm font-bold text-black transition-all duration-300 ease-out hover:border-neutral-200 hover:bg-black hover:text-neutral-200 md:w-auto"
+  class="inline-flex w-full items-center justify-center rounded-full border border-black bg-white px-4 py-2 text-sm font-bold text-black transition-all duration-300 ease-out hover:border-white hover:bg-black hover:text-white md:w-auto"
 >
   {text}
 </a>
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -16,19 +16,17 @@ 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 rounded-2xl border border-dashed border-neutral-600 bg-black duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1"
+    class="absolute inset-0 z-20 rounded-2xl border border-dashed border-white/25 bg-black transition-transform duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1"
   ></span>
   <span
-    class="absolute inset-0 z-10 rounded-2xl border border-dashed border-neutral-600 duration-300 ease-out group-hover:translate-x-1 group-hover:translate-y-1"
+    class="absolute inset-0 z-10 rounded-2xl border border-dashed border-white/25 transition-transform duration-300 ease-out group-hover:translate-x-1 group-hover:translate-y-1"
   ></span>
   <span
-    class="relative z-30 duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1"
+    class="relative z-30 transition-transform duration-300 ease-out group-hover:-translate-x-1 group-hover:-translate-y-1"
   >
-    <div class="mb-1 mt-5 w-full px-1 sm:mt-3">
-      <h3
-        class="mb-0 flex items-center text-base font-bold tracking-tight text-neutral-100"
-      >
-        <span class="font-medium leading-snug text-neutral-200">{name}</span>
+    <div class="mb-1 mt-5 w-full sm:mt-3">
+      <h3 class="mb-0 flex items-center text-base font-bold">
+        <span class="leading-snug text-white">{name}</span>
         <svg
           class="ml-1 h-2.5 w-2.5 -translate-x-1 translate-y-1 -rotate-45 transform stroke-current transition-all duration-200 ease-in-out group-hover:translate-x-0 group-hover:translate-y-0"
           viewBox="0 0 13 15"
@@ -42,19 +40,19 @@ const { url, description, highlights, name } = Astro.props as CardProps;
             stroke-linejoin="round"
           >
             <polyline
-              class="opacity-0 transition-all duration-200 ease-out group-hover:opacity-100"
+              class="opacity-0 transition-opacity duration-200 ease-out group-hover:opacity-100"
               points="5.33 0 10.83 5.5 5.33 11"></polyline>
             <line
-              class="-translate-x-1 transform opacity-0 transition-all duration-200 ease-out group-hover:translate-x-0 group-hover:opacity-100"
+              class="-translate-x-1 transform opacity-0 transition-transform duration-200 ease-out group-hover:translate-x-0 group-hover:opacity-100"
               x1="10.83"
               y1="5.5"
               x2="0.83"
               y2="5.17"></line>
           </g>
         </svg>
       </h3>
-      <p class="mt-2 text-sm leading-normal text-neutral-300">{description}</p>
-      <p class="mt-2 text-sm leading-normal text-neutral-400">
+      <p class="mt-2 text-sm">{description}</p>
+      <p class="mt-2 text-sm text-white/50">
         {highlights.join(" ")}
       </p>
     </div>

diff --git a/src/components/Drawer.astro b/src/components/Drawer.astro
@@ -21,7 +21,7 @@ const subpath = pathname.match(/[^/]+/g);
             "transition-colors duration-300 ease-in-out",
             pathname === LINK.HREF || "/" + subpath?.[0] === LINK.HREF
               ? "pointer-events-none bg-white text-black"
-              : "",
+              : ""
           )}
         >
           {LINK.TEXT}

diff --git a/src/components/ExpandButton.tsx b/src/components/ExpandButton.tsx
@@ -19,7 +19,7 @@ export default function ExpandButton({ children }: ExpandButtonProps) {
       </div>
       <button
         onClick={() => setExpanded(!expanded)}
-        className="group/more flex w-fit cursor-pointer items-center justify-center gap-1.5 text-xs text-neutral-400 underline transition-all hover:text-neutral-200"
+        className="group/more flex w-fit cursor-pointer items-center justify-center gap-1.5 text-xs underline transition-all hover:text-white"
       >
         <span>{expanded ? "Show less" : "Show more"}</span>
         <svg

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -34,7 +34,7 @@ import Container from "@/components/Container.astro";
                   "transition-colors duration-300 ease-in-out",
                   pathname === LINK.HREF || "/" + subpath?.[0] === LINK.HREF
                     ? "bg-white text-black"
-                    : "hover:bg-white/20 hover:text-white",
+                    : "hover:bg-white/20 hover:text-white"
                 )}
               >
                 {LINK.TEXT}
@@ -53,7 +53,7 @@ import Container from "@/components/Container.astro";
             "bg-transparent hover:bg-white/20",
             "stroke-current  hover:stroke-white",
             "border border-white/25",
-            "transition-colors duration-300 ease-in-out",
+            "transition-colors duration-300 ease-in-out"
           )}
         >
           <svg

diff --git a/src/components/Heading.astro b/src/components/Heading.astro
@@ -9,9 +9,7 @@ const { title, description } = Astro.props;
     >
       {title}.
     </h1>
-    <h2
-      class="mt-2 text-justify text-sm font-medium text-neutral-400 lg:text-lg"
-    >
+    <h2 class="mt-2 text-justify text-sm font-medium lg:text-lg">
       {description}
     </h2>
   </div>

diff --git a/src/components/Section.astro b/src/components/Section.astro
@@ -5,9 +5,7 @@ const { className, title } = Astro.props;
 <section class:list={["flex flex-col gap-4", className]}>
   {
     title && (
-      <h2 class="text-sm font-bold uppercase tracking-widest text-neutral-200">
-        {title}
-      </h2>
+      <h2 class="text-sm font-bold uppercase tracking-widest">{title}</h2>
     )
   }
   <slot />

diff --git a/src/components/sections/Awards.astro b/src/components/sections/Awards.astro
@@ -25,15 +25,15 @@ import { awards } from "@cv";
               <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" />
             </svg>
             <div class="relative w-full">
-              <time class="mb-1 text-xs font-bold text-neutral-500 md:absolute md:right-0 md:top-0 md:mb-0">
+              <time class="mb-1 text-xs font-bold text-white/50 md:absolute md:right-0 md:top-0 md:mb-0">
                 {date}
               </time>
-              <h3 class="font-medium">{title}</h3>
-              <p class="mt-1 text-sm text-neutral-400">{awarder}</p>
+              <h3 class="font-medium text-white">{title}</h3>
+              <p class="mt-1 text-sm">{awarder}</p>
               {summary && (
                 <div class="mt-4 text-sm">
-                  <h4 class="font-medium text-neutral-300">Summary:</h4>
-                  <ul class="list-inside list-disc space-y-1 text-neutral-400">
+                  <h4 class="font-medium">Summary:</h4>
+                  <ul class="list-inside list-disc space-y-1 text-white/50">
                     {Array.isArray(summary) ? (
                       summary.map((item) => <li>{item}</li>)
                     ) : (

diff --git a/src/components/sections/Education.astro b/src/components/sections/Education.astro
@@ -32,14 +32,13 @@ import { education } from "@cv";
                 <path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" />
               </svg>
               <div class="relative w-full">
-                {/* Date appears above the institution on small screens */}
-                <time class="mb-1 text-xs font-bold text-neutral-500 md:absolute md:right-0 md:top-0 md:mb-0">
+                <time class="mb-1 text-xs font-bold text-white/50 md:absolute md:right-0 md:top-0 md:mb-0">
                   {years}
                 </time>
-                <h3 class="text-base font-medium leading-snug text-neutral-200">
+                <h3 class="text-base font-medium leading-snug text-white">
                   {url ? (
                     <a
-                      class="inline-flex items-center text-neutral-200 hover:text-neutral-300"
+                      class="inline-flex items-center hover:text-white/75"
                       href={url}
                       target="_blank"
                       rel="noopener noreferrer"
@@ -63,11 +62,11 @@ import { education } from "@cv";
                     <span>{institution}</span>
                   )}
                 </h3>
-                <p class="mt-1 text-sm text-neutral-400">{area}</p>
+                <p class="mt-1 text-sm">{area}</p>
                 {summary && (
                   <div class="mt-4 text-sm">
-                    <h4 class="font-medium text-neutral-300">Summary:</h4>
-                    <ul class="list-inside list-disc space-y-1 text-neutral-400">
+                    <h4 class="font-medium">Summary:</h4>
+                    <ul class="list-inside list-disc space-y-1 text-white/50">
                       {Array.isArray(summary) ? (
                         summary.map((item) => <li>{item}</li>)
                       ) : (
@@ -79,7 +78,7 @@ import { education } from "@cv";
               </div>
             </li>
           );
-        },
+        }
       )
     }
   </ul>

diff --git a/src/components/sections/Experience.astro b/src/components/sections/Experience.astro
@@ -26,21 +26,21 @@ import ExpandButton from "../ExpandButton";
           return (
             <li class="relative">
               <div class="group relative grid pb-1 transition-all sm:grid-cols-12 sm:gap-8">
-                <header class="mt-1 text-xs font-bold text-neutral-500 sm:col-span-2">
+                <header class="mt-1 text-xs font-bold text-white/50 sm:col-span-2">
                   <time datetime={startDate}>{startYear}</time>
                   <span class="mx-1">-</span>
                   <time datetime={endDate}>{endYear}</time>
                 </header>
                 <div class="relative flex flex-col pb-6 before:absolute before:-ml-6 before:mt-2 before:h-full before:w-px before:bg-neutral-500 sm:col-span-10">
                   <div class="absolute mt-2 h-2 w-2 -translate-x-[1.71rem] rounded-full bg-white ring ring-white" />
                   <div class="flex flex-col pb-6 sm:col-span-10">
-                    <h3 class="text-left text-base font-medium leading-snug text-neutral-200">
+                    <h3 class="text-left text-base font-medium leading-snug text-white">
                       <div class="inline-flex flex-wrap items-center">
                         <span>{position}</span>
                         <span class="mx-1.5">@</span>
                         {url ? (
                           <a
-                            class="inline-flex items-center text-neutral-200 hover:text-neutral-300"
+                            class="inline-flex items-center hover:text-white/75"
                             href={url}
                             target="_blank"
                             rel="noopener noreferrer"
@@ -66,7 +66,7 @@ import ExpandButton from "../ExpandButton";
                       </div>
                     </h3>
                     {(location || location_type) && (
-                      <p class="mt-1 text-sm text-neutral-400">
+                      <p class="mt-1 text-sm">
                         {location}
                         {location && location_type && " - "}
                         {location_type}
@@ -75,8 +75,8 @@ import ExpandButton from "../ExpandButton";
                     <div class="mt-2 flex flex-col gap-4 text-sm">
                       {summary && (
                         <div>
-                          <h4 class="font-medium text-neutral-300">Summary:</h4>
-                          <ul class="list-inside list-disc space-y-1 text-neutral-400">
+                          <h4 class="font-medium">Summary:</h4>
+                          <ul class="list-inside list-disc space-y-1 text-white/50">
                             {Array.isArray(summary) ? (
                               summary.map((item) => <li>{item}</li>)
                             ) : (
@@ -89,10 +89,8 @@ import ExpandButton from "../ExpandButton";
                         <ExpandButton client:load>
                           {responsibilities && (
                             <div>
-                              <h4 class="font-medium text-neutral-300">
-                                Responsibilities:
-                              </h4>
-                              <ul class="list-inside list-disc space-y-1 text-neutral-400">
+                              <h4 class="font-medium">Responsibilities:</h4>
+                              <ul class="list-inside list-disc space-y-1 text-white/50">
                                 {responsibilities.map((responsibility) => (
                                   <li>{responsibility}</li>
                                 ))}
@@ -101,10 +99,8 @@ import ExpandButton from "../ExpandButton";
                           )}
                           {achievements && (
                             <div>
-                              <h4 class="font-medium text-neutral-300">
-                                Achievements:
-                              </h4>
-                              <ul class="list-inside list-disc space-y-1 text-neutral-400">
+                              <h4 class="font-medium">Achievements:</h4>
+                              <ul class="list-inside list-disc space-y-1 text-white/50">
                                 {achievements.map((achievement) => (
                                   <li>{achievement}</li>
                                 ))}
@@ -119,7 +115,7 @@ import ExpandButton from "../ExpandButton";
               </div>
             </li>
           );
-        },
+        }
       )
     }
   </ul>

diff --git a/src/components/sections/Skills.astro b/src/components/sections/Skills.astro
@@ -10,7 +10,7 @@ const { technologies, programming_languages } = skills;
     {
       technologies.map(({ name }) => {
         return (
-          <li class="flex items-center gap-1 rounded-md border border-neutral-700 bg-neutral-800/50 px-2 py-1 text-xs text-neutral-300">
+          <li class="flex items-center gap-1 rounded-md border border-white/25 bg-neutral-800/50 px-2 py-1 text-xs">
             <span>{name}</span>
           </li>
         );
@@ -22,7 +22,7 @@ const { technologies, programming_languages } = skills;
   <ul class="flex flex-wrap gap-2">
     {
       programming_languages.map(({ name }) => (
-        <li class="flex items-center gap-1 rounded-md border border-neutral-700 bg-neutral-800/50 px-2 py-1 text-xs text-neutral-300">
+        <li class="flex items-center gap-1 rounded-md border border-white/25 bg-neutral-800/50 px-2 py-1 text-xs">
           <span>{name}</span>
         </li>
       ))