Button changes

src/components/NavigationBar.tsx

@@ -1,7 +1,7 @@
 import { useComputed, useSignal } from "@preact/signals";
 import { useEffect } from "preact/hooks";
-import { navigationItems } from '../config/data';
-import type { LucideIcon } from '../types';
+import { navigationItems } from "../config/data";
+import type { LucideIcon } from "../types";
 
 interface NavigationBarProps {
   currentPath: string;
@@ -20,7 +20,9 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
   });
 
   // Filter out disabled navigation items
-  const enabledNavigationItems = navigationItems.filter(item => item.enabled !== false);
+  const enabledNavigationItems = navigationItems.filter(
+    (item) => item.enabled !== false,
+  );
 
   // Update client path when location changes
   useEffect(() => {
@@ -92,23 +94,23 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
       } ${isVisible.value ? "translate-y-0" : "translate-y-20"}`}
     >
       <div class="overflow-visible">
-        <ul class="menu menu-horizontal bg-base-200 rounded-box p-1.5 sm:p-2 shadow-lg flex flex-nowrap whitespace-nowrap">
+        <ul class="menu menu-horizontal bg-base-200 rounded-box p-1.5 sm:p-2 flex flex-nowrap whitespace-nowrap">
           {enabledNavigationItems.map((item) => {
             const Icon = item.icon as LucideIcon;
-            const isActive = item.isActive 
+            const isActive = item.isActive
               ? item.isActive(normalizedPath)
               : normalizedPath === item.path;
-            
+
             return (
               <li key={item.id} class="mx-0.5 sm:mx-1">
-                <a 
-                  href={item.path} 
+                <a
+                  href={item.path}
                   class={`tooltip tooltip-top min-h-[44px] min-w-[44px] inline-flex items-center justify-center ${isActive ? "menu-active" : ""}`}
                   aria-label={item.tooltip}
                   data-tip={item.tooltip}
                 >
-                    <Icon size={18} class="sm:w-5 sm:h-5" />
-                    <span class="sr-only">{item.name}</span>
+                  <Icon size={18} class="sm:w-5 sm:h-5" />
+                  <span class="sr-only">{item.name}</span>
                 </a>
               </li>
             );

src/components/PostCard.astro

@@ -13,19 +13,19 @@ const { slug } = post;
 <div
     class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink"
 >
-    <div class="card-body p-3 break-words">
+    <div class="card-body p-6 break-words">
         <h2
-            class="card-title text-base-100 justify-center text-center break-words font-bold text-lg mb-2"
+            class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words text-base-100"
         >
             {title}
         </h2>
 
-        <p class="text-center text-base-100 break-words mb-3 text-base">
+        <p class="text-center break-words my-4 text-base-100">
             {blurb || "No description available."}
         </p>
 
         <div
-            class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm mb-2"
+            class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm mb-4"
         >
             <Icon name="mdi:clock" class="text-xl" />
             <span>
@@ -41,7 +41,7 @@ const { slug } = post;
 
         {
             post.data.tags && post.data.tags.length > 0 && (
-                <div class="flex gap-2 flex-wrap mb-2 justify-center">
+                <div class="flex gap-2 flex-wrap mb-4 justify-center">
                     {post.data.tags.map((tag: string) => (
                         <div class="badge badge-primary">
                             <Icon name="mdi:tag" class="text-lg" />
@@ -52,10 +52,10 @@ const { slug } = post;
             )
         }
 
-        <div class="card-actions justify-end mt-2">
+        <div class="card-actions justify-end mt-4">
             <a
                 href={`/post/${slug}`}
-                class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
+                class="btn btn-sm bg-base-100 hover:bg-secondary text-accent"
                 aria-label={`Read more about ${title}`}
             >
                 <Icon name="mdi:arrow-right" class="text-lg" />

src/components/ProjectCard.astro

@@ -28,7 +28,7 @@ const { project } = Astro.props;
                 href={project.link}
                 target="_blank"
                 rel="noopener noreferrer"
-                class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
+                class="btn btn-sm bg-base-100 hover:bg-secondary text-accent"
                 aria-label={`Visit ${project.name}`}
             >
                 <Icon name="mdi:link" class="text-lg" />

src/components/ResumeSettingsModal.tsx

@@ -162,7 +162,7 @@ export default function ResumeSettingsModal({
       {/* Floating Settings Button */}
       <button
         onClick={openModal}
-        class={`fixed top-4 right-4 z-20 btn btn-circle btn-secondary hover:bg-primary shadow-lg opacity-100 translate-y-0 min-h-[44px] min-w-[44px] ${className}`}
+        class={`fixed top-4 right-4 z-20 btn btn-square btn-secondary hover:bg-primary opacity-100 translate-y-0 min-h-[44px] min-w-[44px] ${className}`}
         aria-label="Resume Settings"
       >
         <Settings class="text-lg" />
@@ -207,7 +207,7 @@ export default function ResumeSettingsModal({
                   role="tab"
                   class={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 ${
                     activeTab === "upload"
-                      ? "bg-primary text-primary-content shadow-sm"
+                      ? "bg-primary text-primary-content"
                       : "text-base-content/70 hover:text-base-content hover:bg-base-200"
                   }`}
                   onClick={() => setActiveTab("upload")}
@@ -218,7 +218,7 @@ export default function ResumeSettingsModal({
                   role="tab"
                   class={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 ${
                     activeTab === "edit"
-                      ? "bg-primary text-primary-content shadow-sm"
+                      ? "bg-primary text-primary-content"
                       : "text-base-content/70 hover:text-base-content hover:bg-base-200"
                   }`}
                   onClick={() => setActiveTab("edit")}

src/components/ScrollUpButton.tsx

@@ -31,7 +31,7 @@ export default function ScrollUpButton() {
       type="button"
       onClick={scrollToTop}
       class={`fixed bottom-20 right-4 z-20 bg-secondary hover:bg-primary
-            p-3 rounded-full shadow-lg transition-all duration-300 min-h-[44px] min-w-[44px] inline-flex items-center justify-center
+            p-3 rounded-full transition-all duration-300 min-h-[44px] min-w-[44px] inline-flex items-center justify-center
             ${
               isVisible.value
                 ? "opacity-100 translate-y-0"

src/styles/global.css

@@ -34,4 +34,14 @@
     --border: 1px;
     --depth: 1;
     --noise: 1;
-}
+}
+
+@font-face {
+    font-family: "Indie Flower";
+    src:
+        url("IndieFlower.woff2") format("woff2"),
+        url("IndieFlower.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}