Improve UI, theme toggle, work section and blog updates

Author: iamabdullah73524

src/components/Header.astro

@@ -18,14 +18,16 @@ const isActive = (path: string) => {
   return currentPath === path;
 };
 ---
-
-<header class="sticky top-0 z-50 w-full border-b border-foreground/10 bg-background/95 backdrop-blur-md">
+<header
+  class="sticky top-0 z-50 w-full border-b border-foreground/10"
+  style="background: hsl(var(--background)); backdrop-filter: none;"
+>
 
   <div class="mx-auto flex h-24 w-full items-center justify-between px-4 sm:px-6 lg:px-10">
 
     <!-- LEFT LOGO -->
     <a href="/" class="flex items-center gap-3 lg:gap-4">
-      
+
       <Picture
         src={logoImage}
         formats={["png", "webp", "jpg"]}
@@ -41,7 +43,7 @@ const isActive = (path: string) => {
     </a>
 
     <!-- CENTER NAV -->
-    <nav class="hidden lg:flex absolute left-1/2 -translate-x-1/2">
+    <nav class="absolute left-1/2 hidden -translate-x-1/2 lg:flex">
       <ul class="flex items-center gap-10">
 
         {
@@ -67,18 +69,18 @@ const isActive = (path: string) => {
     <!-- RIGHT -->
     <div class="flex items-center gap-4">
 
-      <!-- TOGGLE -->
+      <!-- THEME TOGGLE -->
       <button
         id="themeToggle"
-        class="flex h-12 w-12 items-center justify-center rounded-2xl border border-foreground/10 text-lg text-foreground transition hover:bg-foreground hover:text-background"
+        class="flex h-12 w-12 items-center justify-center rounded-2xl border border-foreground/10 text-2xl text-foreground transition duration-300 hover:bg-foreground hover:text-background"
       >
-        🌙
+        ☀️
       </button>
 
       <!-- JOIN BUTTON -->
       <a
         href="/career"
-        class="hidden rounded-2xl bg-foreground px-6 py-3 text-lg font-semibold text-background transition hover:bg-cyan-500 hover:text-black lg:block"
+        class="hidden rounded-2xl bg-foreground px-6 py-3 text-lg font-semibold text-background transition duration-300 hover:bg-cyan-500 hover:text-black lg:block"
       >
         Join Us
       </a>
@@ -122,13 +124,54 @@ const isActive = (path: string) => {
 
     </div>
   </div>
+
 </header>
 
 <script is:inline>
+  // MOBILE MENU
   const btn = document.getElementById("menuBtn");
   const menu = document.getElementById("mobileMenu");
 
   btn?.addEventListener("click", () => {
     menu.classList.toggle("hidden");
   });
+
+  // THEME TOGGLE
+  const themeToggle = document.getElementById("themeToggle");
+
+  // LOAD SAVED THEME
+  const savedTheme = localStorage.getItem("theme");
+
+  if (savedTheme === "dark") {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+
+  // UPDATE ICON
+  const updateThemeIcon = () => {
+    const isDark = document.documentElement.classList.contains("dark");
+
+    if (themeToggle) {
+      themeToggle.textContent = isDark ? "🌙" : "☀️";
+    }
+  };
+
+  updateThemeIcon();
+
+  // TOGGLE THEME
+  themeToggle?.addEventListener("click", () => {
+
+    document.documentElement.classList.toggle("dark");
+
+    const isDark =
+      document.documentElement.classList.contains("dark");
+
+    localStorage.setItem(
+      "theme",
+      isDark ? "dark" : "light"
+    );
+
+    updateThemeIcon();
+  });
 </script>

src/pages/work.astro

@@ -7,8 +7,8 @@ const pages = import.meta.glob("./work/*.astro", {
 });
 
 // Extract frontmatter and routes
-const pageList = Object.entries(pages).map(
-  ([path, module]) => {
+const pageList = Object.entries(pages)
+  .map(([path, module]) => {
     const { frontmatter } = module as any;
 
     const route = path
@@ -23,17 +23,24 @@ const pageList = Object.entries(pages).map(
       image: frontmatter.image || "",
       route
     };
-  }
-);
+  })
+
+  // REMOVE INTERACTIVE LETTER CARD
+  .filter(
+    (item) =>
+      item.title.toLowerCase() !==
+      "interactive letter"
+  );
 ---
 
 <BaseLayout meta={{ title: "Our Work" }}>
   <main class="bg-background text-foreground">
-    
+
     <!-- HERO -->
     <section class="mx-auto max-w-7xl px-6 py-20 lg:px-10">
-      
+
       <div class="text-center">
+
         <!-- LABEL -->
         <p class="mb-4 text-sm font-semibold uppercase tracking-[0.25em] text-cyan-500">
           Portfolio
@@ -49,11 +56,12 @@ const pageList = Object.entries(pages).map(
           Explore our latest projects, products, platforms and
           engineering solutions crafted by Recursive Zero.
         </p>
+
       </div>
 
       <!-- GRID -->
       <div class="mt-16 grid grid-cols-1 gap-8 pb-12 md:grid-cols-2 lg:grid-cols-3">
-        
+
         <!-- DYNAMIC PROJECTS -->
         {
           pageList.map(
@@ -81,7 +89,7 @@ const pageList = Object.entries(pages).map(
           url="http://abcdkbd.com"
           title="ABCDKBD"
           description="An interactive kids learning platform."
-          image="https://abcdkbd.com/_astro/48x48.Uhmpc0nK_ZnUDXw.png"
+          image="https://github.com/recursivezero/abcd/blob/main/public/assets/images/512x512.png?raw=true"
         />
 
         <!-- THREADZIP -->
@@ -99,6 +107,14 @@ const pageList = Object.entries(pages).map(
           description="A python tool that uses computer vision to identify and generate fabric patterns."
           image="https://lab.threadzip.com/media/4506a1f4769fb57c54b53e6189d5b405971d3595e689f77360792546.jpg"
         />
+        <!-- RZRO LINK -->
+<BlogCard
+  url="https://rzro.link/"
+  title="RZRO Link"
+  description="A modern smart link and URL shortening platform by Recursive Zero."
+  image="https://rzro.link/favicon.ico"
+/>
+
 
       </div>
     </section>