fix: colors

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: http://localhost:4321/sitemap-index.xml

src/components/BaseHead.astro

@@ -50,8 +50,8 @@ const { title, description } = Astro.props;
   document.addEventListener("astro:before-swap", (e) =>
     [
       ...(e as TransitionBeforeSwapEvent).newDocument.head.querySelectorAll(
-        'link[as="font"]',
+        'link[as="font"]'
       ),
-    ].forEach((link) => link.remove()),
+    ].forEach((link) => link.remove())
   );
 </script>

src/components/Boxes.tsx

@@ -46,23 +46,26 @@ export default function Boxes({ className = "" }: GridProps) {
     <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 }}
+        className={`absolute flex h-full w-full justify-center overflow-hidden bg-white dark:bg-black ${className}`}
+        style={{ height: `${dimensions.height}px`, zIndex: 0 }}
       >
         {/* 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-white/25 border-l border-t border-black">
+          <div className="absolute inset-0 z-50 bg-gradient-to-tl from-white from-50% via-transparent via-90% to-transparent to-100% dark:from-black" />
+          <div className="flex h-full w-full flex-col divide-y divide-black/25 border-l border-t border-white dark:divide-white/25 dark:border-black">
             {Array.from({ length: rows }).map((_, rowIndex) => (
               <div
                 key={rowIndex}
-                className="relative flex w-full divide-x divide-white/25"
+                className="relative flex w-full divide-x divide-black/25 dark:divide-white/25"
                 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
+                      key={colIndex}
+                      className="relative w-full bg-white dark:bg-black"
+                    >
+                      <div className="absolute inset-0.5 bg-white dark:bg-black" />
                     </div>
                   ),
                 )}
@@ -74,17 +77,20 @@ export default function Boxes({ className = "" }: GridProps) {
         {/* 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-white/25 border-l border-t border-black">
+          <div className="flex h-full w-full flex-col divide-y divide-black/25 border-l border-t border-white dark:divide-white/25 dark:border-black">
             {Array.from({ length: rows }).map((_, rowIndex) => (
               <div
                 key={rowIndex}
-                className="relative flex w-full divide-x divide-white/25"
+                className="relative flex w-full divide-x divide-black/25 dark:divide-white/25"
                 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
+                      key={colIndex}
+                      className="relative w-full bg-white dark:bg-black"
+                    >
+                      <div className="absolute inset-0.5 bg-white dark:bg-black" />
                     </div>
                   ),
                 )}

src/components/Button.astro

@@ -4,18 +4,20 @@ import { Icon } from "astro-icon/components";
 type Props = {
   icon: string;
   href: string;
+  label: string; // Add a label prop for accessibility
 };
 
-const { icon, href } = Astro.props;
+const { icon, href, label } = Astro.props;
 ---
 
 <a
   href={href}
   target="_blank"
-  class="blend group flex w-fit items-center gap-2 rounded border border-neutral-700 px-3 py-2 hover:bg-neutral-800"
+  class="blend group flex w-fit items-center gap-2 rounded border border-neutral-300 px-3 py-2 hover:bg-neutral-200 dark:border-neutral-700 dark:hover:bg-neutral-800"
+  aria-label={label}
 >
   <span
-    class="blend text-sm capitalize text-neutral-400 group-hover:text-white"
+    class="blend text-sm capitalize text-neutral-600 group-hover:text-black dark:text-neutral-400 dark:group-hover:text-white"
   >
     <Icon name={icon} size={20} />
   </span>

src/components/Card.astro

@@ -47,13 +47,13 @@ const { url, name, description, highlights, technologies } = Astro.props;
     </div>
     <div class="mt-2 flex flex-col gap-2">
       <p class="text-sm">{description}</p>
-      <p class="text-sm text-white/50">
+      <p class="text-sm text-black/50 dark:text-white/50">
         {highlights.join(" ")}
       </p>
       <ul class="flex flex-wrap gap-2">
         {
           technologies.map((name) => (
-            <li class="flex items-center gap-1 rounded-md border border-white/25 bg-neutral-800/50 px-2 py-1 text-xs">
+            <li class="flex items-center gap-1 rounded-md border border-black/25 bg-neutral-200/50 px-2 py-1 text-xs dark:border-white/25 dark:bg-neutral-800/50">
               <span>{name}</span>
             </li>
           ))

src/components/Drawer.astro

@@ -1,4 +1,5 @@
 ---
+import { Icon } from "astro-icon/components";
 import { LINKS } from "@/consts";
 import { cn } from "@/lib/utils";
 const { pathname } = Astro.url;
@@ -7,7 +8,7 @@ const subpath = pathname.match(/[^/]+/g);
 
 <div
   id="drawer"
-  class="fixed inset-0 z-40 flex h-0 flex-col items-center justify-center overflow-hidden bg-black/50 backdrop-blur-md transition-[height] duration-300 ease-in-out md:hidden"
+  class="fixed inset-0 z-40 flex h-0 flex-col items-center justify-center overflow-hidden bg-neutral-100 transition-[height] duration-300 ease-in-out md:hidden dark:bg-neutral-900"
 >
   <nav class="flex flex-col items-center space-y-2">
     {
@@ -16,12 +17,12 @@ const subpath = pathname.match(/[^/]+/g);
           href={LINK.HREF}
           class={cn(
             "flex items-center justify-center rounded-full px-3 py-1",
-            "text-current hover:text-white",
-            "hover:bg-white/20",
+            "text-current hover:text-black dark:hover:text-white",
+            "hover:bg-black/5 dark:hover:bg-white/20",
             "transition-colors duration-300 ease-in-out",
             pathname === LINK.HREF || "/" + subpath?.[0] === LINK.HREF
-              ? "pointer-events-none bg-white text-black"
-              : "",
+              ? "pointer-events-none bg-black text-white dark:bg-white dark:text-black"
+              : ""
           )}
         >
           {LINK.TEXT}

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 underline transition-all hover:text-white"
+        className="group/more flex w-fit cursor-pointer items-center justify-center gap-1.5 text-xs underline transition-all hover:text-black dark:hover:text-white"
       >
         <span>{expanded ? "Show less" : "Show more"}</span>
         <svg

src/components/Footer.astro

@@ -3,8 +3,10 @@ import { SITE } from "@/consts";
 import Container from "@/components/Container.astro";
 ---
 
-<footer class="relative bg-black">
-  <section class="overflow-hidden border-t border-white/25 py-3">
+<footer class="relative bg-white dark:bg-black">
+  <section
+    class="overflow-hidden border-t border-black/25 py-3 dark:border-white/25"
+  >
     <Container size="md">
       <div class="flex h-full items-center justify-center">
         <p class="text-center text-sm">

src/components/Header.astro

@@ -1,20 +1,21 @@
 ---
+import Container from "@/components/Container.astro";
+import { Icon } from "astro-icon/components";
 import { SITE, LINKS } from "@/consts";
 import { cn } from "@/lib/utils";
 const { pathname } = Astro.url;
 const subpath = pathname.match(/[^/]+/g);
-import Container from "@/components/Container.astro";
 ---
 
 <header id="header" class="fixed top-0 z-50 h-16 w-full">
   <Container size="md">
     <div class="relative h-full w-full">
       <div
-        class="absolute left-0 top-1/2 flex -translate-y-1/2 gap-1 font-bold"
+        class="absolute left-0 top-1/2 flex -translate-y-1/2 gap-1 font-semibold"
       >
         <a
           href="/"
-          class="flex gap-1 text-current transition-colors duration-300 ease-in-out hover:text-white"
+          class="flex gap-1 text-current transition-colors duration-300 ease-in-out hover:text-black dark:hover:text-white"
         >
           <div class="font-bold uppercase">
             {SITE.TITLE}
@@ -33,8 +34,8 @@ import Container from "@/components/Container.astro";
                   "flex items-center justify-center",
                   "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",
+                    ? "bg-black text-white dark:bg-white dark:text-black"
+                    : "hover:bg-black/5 hover:text-black dark:hover:bg-white/20 dark:hover:text-white"
                 )}
               >
                 {LINK.TEXT}
@@ -43,17 +44,18 @@ import Container from "@/components/Container.astro";
           }
         </nav>
       </div>
+
       <div class="buttons absolute right-0 top-1/2 flex -translate-y-1/2 gap-1">
         <button
           id="header-drawer-button"
           aria-label={`Toggle drawer open and closed`}
           class={cn(
             "flex md:hidden",
             "size-9 rounded-full p-2 items-center justify-center",
-            "bg-transparent hover:bg-white/20",
-            "stroke-current  hover:stroke-white",
-            "border border-white/25",
-            "transition-colors duration-300 ease-in-out",
+            "bg-transparent hover:bg-black/5 dark:hover:bg-white/20",
+            "stroke-current hover:stroke-black hover:dark:stroke-white",
+            "border border-black/10 dark:border-white/25",
+            "transition-colors duration-300 ease-in-out"
           )}
         >
           <svg

src/components/Heading.astro

@@ -11,7 +11,7 @@ const { title, description, highlight } = Astro.props;
 <header class="flex flex-col items-center gap-4 text-center">
   <div>
     <h1
-      class="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text text-4xl font-bold tracking-tight text-transparent lg:text-5xl"
+      class="bg-opacity-50 bg-gradient-to-b from-neutral-900 to-neutral-600 bg-clip-text text-4xl font-bold tracking-tight text-transparent lg:text-5xl dark:from-neutral-50 dark:to-neutral-400"
     >
       {title}.
     </h1>

src/components/Section.astro

@@ -8,6 +8,6 @@ const { className, title } = Astro.props;
 ---
 
 <section class:list={["flex flex-col gap-2", className]}>
-  {title && <h2 class="font-semibold text-white">{title}</h2>}
+  {title && <h2 class="font-semibold text-black dark:text-white">{title}</h2>}
   <slot />
 </section>

src/components/Starry.tsx

@@ -13,7 +13,6 @@ type ParticlesProps = {
   minSize?: number;
   maxSize?: number;
   speed?: number;
-  particleColor?: string;
   particleDensity?: number;
   opacity?: number;
 };
@@ -26,12 +25,12 @@ const Starry = (props: ParticlesProps) => {
     minSize,
     maxSize,
     speed,
-    particleColor,
     particleDensity,
     opacity,
   } = props;
 
   const [init, setInit] = useState(false);
+  const [particleColor, setParticleColor] = useState("#000000");
   const controls = useAnimation();
 
   useEffect(() => {
@@ -40,6 +39,24 @@ const Starry = (props: ParticlesProps) => {
     }).then(() => {
       setInit(true);
     });
+
+    const isDarkMode = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    ).matches;
+    setParticleColor(isDarkMode ? "#FFFFFF" : "#000000");
+
+    const handleThemeChange = (e: MediaQueryListEvent) => {
+      setParticleColor(e.matches ? "#FFFFFF" : "#000000");
+    };
+
+    const darkModeMediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    );
+    darkModeMediaQuery.addEventListener("change", handleThemeChange);
+
+    return () => {
+      darkModeMediaQuery.removeEventListener("change", handleThemeChange);
+    };
   }, []);
 
   const particlesLoaded = async (container?: Container) => {
@@ -64,7 +81,7 @@ const Starry = (props: ParticlesProps) => {
           options={{
             background: {
               color: {
-                value: background || "#0d47a1",
+                value: background || "transparent",
               },
             },
             fullScreen: {
@@ -125,7 +142,7 @@ const Starry = (props: ParticlesProps) => {
                 },
               },
               color: {
-                value: particleColor || "#ffffff",
+                value: particleColor,
                 animation: {
                   h: {
                     count: 0,

src/components/sections/Awards.astro

@@ -25,10 +25,10 @@ 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-white/50 md:absolute md:right-0 md:top-0 md:mb-0">
+              <time class="mb-1 text-xs font-bold text-black/50 md:absolute md:right-0 md:top-0 md:mb-0 dark:text-white/50">
                 {date}
               </time>
-              <h3 class="font-medium text-white">{title}</h3>
+              <h3 class="font-medium text-black dark:text-white">{title}</h3>
               <p class="mt-1 text-sm">{awarder}</p>
             </div>
           </li>

src/components/sections/Education.astro

@@ -32,13 +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">
-                <time class="mb-1 text-xs font-bold text-white/50 md:absolute md:right-0 md:top-0 md:mb-0">
+                <time class="mb-1 text-xs font-bold text-black/50 md:absolute md:right-0 md:top-0 md:mb-0 dark:text-white/50">
                   {years}
                 </time>
-                <h3 class="text-base font-medium leading-snug text-white">
+                <h3 class="text-base font-medium leading-snug text-black dark:text-white">
                   {url ? (
                     <a
-                      class="inline-flex items-center hover:text-white/75"
+                      class="inline-flex items-center hover:text-black/75 dark:hover:text-white/75"
                       href={url}
                       target="_blank"
                       rel="noopener noreferrer"
@@ -65,7 +65,7 @@ import { education } from "@cv";
                 <p class="mt-1 text-sm">{area}</p>
                 {summary && (
                   <div class="mt-4 text-sm">
-                    <ul class="space-y-1 text-white/50">
+                    <ul class="space-y-1 text-black/50 dark:text-white/50">
                       {Array.isArray(summary) ? (
                         summary.map((item) => <li>{item}</li>)
                       ) : (
@@ -77,7 +77,7 @@ import { education } from "@cv";
               </div>
             </li>
           );
-        },
+        }
       )
     }
   </ul>