From ae060c4bc9ad9c52da637ef597d0ce9e0a165ea8 Mon Sep 17 00:00:00 2001
From: ivalshamkya <ivalshamkya@gmail.com>
Date: Mon, 13 May 2024 15:59:50 +0800
Subject: [PATCH] chore: adjust project card responsive

---
 src/common/constant/stack.tsx             | 2 +-
 src/components/Navbar/Navbar.tsx          | 6 +++---
 src/components/Projects/Badge.astro       | 2 +-
 src/components/Projects/ProjectCard.astro | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/common/constant/stack.tsx b/src/common/constant/stack.tsx
index 5feba0b..da79643 100644
--- a/src/common/constant/stack.tsx
+++ b/src/common/constant/stack.tsx
@@ -58,7 +58,7 @@ export const STACKS: stacksProps = {
   Bootstrap: (
     <SiBootstrap size={iconSize} className="text-purple-500" />
   ),
-  GraphQL: <SiGraphql size={iconSize} className="text-pink-600" />,
+  // GraphQL: <SiGraphql size={iconSize} className="text-pink-600" />,
   "Material UI": <SiMui size={iconSize} className="text-sky-400" />,
   Vite: <SiVite size={iconSize} className="text-purple-500" />,
   PostgreSql: <BiLogoPostgresql size={iconSize} className="text-blue-500" />,
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 06107d7..2a3afa8 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -50,7 +50,7 @@ const Navbar: React.FC<Navigation> = ({ active }) => {
         variants={navbarVariants}
         initial={"hidden"}
         animate={"visible"}
-        className="w-screen flex justify-between fixed top-5 md:top-7 right-0 left-0 px-4 md:px-7 z-50 -translate-x-1/2"
+        className="w-screen flex justify-between fixed top-5 md:top-7 right-0 left-0 px-1.5 md:px-7 z-50 -translate-x-1/2"
       >
         {METADATA.authors.isAvailable ? (
           <div className="hidden md:block w-44">
@@ -74,11 +74,11 @@ const Navbar: React.FC<Navigation> = ({ active }) => {
             METADATA.authors.isAvailable && "md:-ml-40"
           } bg-white/70 dark:bg-[#212121] border border-gray-300 dark:border-white/20 backdrop-blur-sm shadow-inner hover:drop-shadow-lg transition-all duration-200 rounded-full`}
         >
-          <motion.ul className="flex items-center">
+          <motion.ul className="overflow-auto flex items-center">
             {dataNavbar.map(({ id, navigate, navigate_url, offset }) => (
               <motion.li
                 key={`${navigate}`}
-                className={`w-[5rem] md:w-32 py-2 md:py-3 text-sm md:text-base text-center text-primary bg-gradient-to-r rounded-full transition-all ease-in duration-75 cursor-pointer ${
+                className={`w-[5rem] md:w-32 py-2 md:py-3 text-sm md:text-base text-center text-primary bg-gradient-to-r rounded-full transition-all ease-in duration-75 ${
                   active === navigate_url
                     ? "text-white from-[#3b52ff] to-[#aa00c0] font-bold"
                     : "text-primary hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-[#3b52ff] hover:to-[#aa00c0] font-medium"
diff --git a/src/components/Projects/Badge.astro b/src/components/Projects/Badge.astro
index 9fb1cc8..71364fb 100644
--- a/src/components/Projects/Badge.astro
+++ b/src/components/Projects/Badge.astro
@@ -20,7 +20,7 @@ const colors = {
 } as const;
 ---
 <span
-  class={`${colors[color]} absolute top-0 right-0 text-sm rounded-tr-lg rounded-bl-lg py-1 px-3`}
+  class={`${colors[color]} absolute top-0 right-0 text-sm rounded-tr-lg rounded-bl-lg py-1 px-3 shadow`}
 >
   {text}
 </span>
\ No newline at end of file
diff --git a/src/components/Projects/ProjectCard.astro b/src/components/Projects/ProjectCard.astro
index 611f1c6..98acbe7 100644
--- a/src/components/Projects/ProjectCard.astro
+++ b/src/components/Projects/ProjectCard.astro
@@ -27,12 +27,12 @@ const { name, role, url, image, description, languages, slug } = Astro.props;
   class="relative dark:bg-zinc-800 bg-white dark:text-zinc-400 text-zinc-500 gap-1 p-5 border dark:border-zinc-700/60 rounded-lg flex flex-col"
 >
   <Badge text={role} color={colors[role]} />
-  <div class="flex gap-3">
+  <div class="flex flex-col md:flex-row gap-3">
     <Image
       src={`${image}`}
       alt={name}
       loading="eager"
-      class="object-cover w-[100px] md:w-[200px] group-hover:scale-[1.03] transition-all duration-700 rounded-lg"
+      class="object-cover w-full md:w-[275px] group-hover:scale-[1.03] transition-all duration-700 rounded-lg"
       width={200}
       height={200}
     />