asd

Author: joladev

lib/jola_dev_web/components/core_components.ex

@@ -1228,37 +1228,40 @@ defmodule JolaDevWeb.CoreComponents do
   attr :class, :string, default: nil
 
   def project_card(assigns) do
+    # Determine the primary link (prefer external link over github)
+    assigns = assign(assigns, :primary_link, assigns[:link] || assigns[:github_link])
+
     ~H"""
-    <div class={[@class]}>
-      <.card variant={:bordered} class="h-full">
+    <a
+      href={@primary_link || "#"}
+      target={if @external && @primary_link, do: "_blank"}
+      rel={if @external && @primary_link, do: "noopener"}
+      class={["block group", @class]}
+    >
+      <.card variant={:interactive} hover class="h-full">
         <div class="flex items-start justify-between mb-3">
-          <h3 class="text-xl font-semibold text-foreground">
+          <h3 class="text-xl font-semibold text-foreground group-hover:text-foreground/80 transition-colors">
             {@title}
           </h3>
           <div class="flex items-center gap-2 flex-shrink-0 ml-2">
-            <a
+            <span
               :if={@github_link}
-              href={@github_link}
-              target="_blank"
-              rel="noopener"
-              class="text-muted-foreground hover:text-foreground transition-colors"
+              onclick={"event.stopPropagation(); event.preventDefault(); window.open('#{@github_link}', '_blank');"}
+              class="text-muted-foreground hover:text-foreground transition-colors cursor-pointer relative z-10 p-2 -m-2"
               aria-label="View on GitHub"
             >
               <.icon name="lucide-github" class="w-5 h-5" />
-            </a>
-            <a
+            </span>
+            <span
               :if={@link}
-              href={@link}
-              target={if @external, do: "_blank"}
-              rel={if @external, do: "noopener"}
-              class="text-muted-foreground hover:text-foreground transition-colors"
+              class="text-muted-foreground group-hover:text-foreground transition-colors"
               aria-label="Visit project"
             >
               <.icon
                 name={if @external, do: "hero-arrow-top-right-on-square", else: "hero-arrow-right"}
                 class="w-5 h-5"
               />
-            </a>
+            </span>
           </div>
         </div>
 
@@ -1272,7 +1275,7 @@ defmodule JolaDevWeb.CoreComponents do
           </.badge>
         </div>
       </.card>
-    </div>
+    </a>
     """
   end
 

lib/jola_dev_web/controllers/page_html/projects.html.heex

@@ -11,7 +11,7 @@
       <.project_card
         title="ElixirEvents"
         description="The Elixir Event calendar, find conferences and meetups!"
-        tags={["Elixir", "Community", "Events"]}
+        tags={["Elixir", "Community", "Events", "Open Source"]}
         link="https://elixirevents.net/"
         github_link="https://github.com/joladev/elixir_events"
         external