improve project cards

Author: vdawg-git

src/components/Button.astro

@@ -5,16 +5,19 @@ interface Props {
   url: string
   target?: string
   class?: string
+  type?: "default" | "outline"
 }
 
-const { url, target } = Astro.props
+const { url, target, type } = Astro.props
 ---
 
 <a
   href={url}
   target={target ?? "_blank"}
   class={cn(
     "button flex max-w-max justify-center gap-1 rounded-xl bg-deepCyan px-5 py-2.5 align-middle text-base font-bold text-black shadow transition-all hover:scale-[1.02]",
+    type == "outline" &&
+      "bg-black text-white hover:border-deepPink border-deepPurple border",
     Astro.props.class,
   )}><slot /></a
 >

src/components/homepage/ProjectBody.astro

@@ -17,7 +17,7 @@ interface Props {
     // Left side content
   }
   <div
-    class="flex w-1/2 min-w-0 max-w-max shrink grow-[5] flex-col justify-end @4xl:min-w-20 sm:p-8 lg:p-8"
+    class="flex w-1/2 min-w-0 shrink grow-[5] flex-col justify-end @md:max-w-max @4xl:min-w-20"
   >
     <slot name="logo" />
 

src/components/homepage/ProjectLogo.astro

@@ -12,7 +12,7 @@ const { hasBanner, src, name } = Astro.props
 
 <div
   class={cn([
-    "relative mb-4",
+    "relative mb-4 pl-6 @md:pl-8",
     hasBanner &&
       "flex h-full w-full grow items-center  @xl:justify-start justify-center max-2xl:@2xl:mx-0 max-2xl:@2xl:block max-2xl:@2xl:h-auto max-2xl:@2xl:grow-0",
   ])}

src/pages/index.astro

@@ -127,7 +127,7 @@ const projects: {
                     name={name}
                     description={description}
                   >
-                    <Button url={url} slot="button">
+                    <Button url={url} slot="button" type="outline">
                       {button}
                       {url.startsWith("http") && <IconOutlink class="size-6" />}
                     </Button>