About us: profile info

IciaCarroBarallobre · Aug 22, 2024 · 2e51c6a · 2e51c6a
1 parent d4cf0cf
commit 2e51c6a
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 8 deletions.
diff --git a/lib/exploring_beam_community_web/components/core_components.ex b/lib/exploring_beam_community_web/components/core_components.ex
@@ -593,6 +593,38 @@ defmodule ExploringBeamCommunityWeb.CoreComponents do
     """
   end
 
+  def icon(%{name: "github"} = assigns) do
+    ~H"""
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 496 512" class="h-6 w-6">
+    <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+    </svg>
+    """
+  end
+
+  def icon(%{name: "twitter"} = assigns) do
+    ~H"""
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512">
+      <path d="M459.4 151.7c.3 4.6 .3 9.3 .3 14 0 142.2-108.2 306.4-306.4 306.4-61.2 0-118.1-18-166.1-48.9 8.5 1 16.6 1.5 25.6 1.5 50.6 0 97.2-17.2 134.4-46-47.3-1-87-32.2-100.8-75 6.5 .8 13.1 1.3 20 1.3 9.5 0 18.9-1.3 27.8-3.6-49.5-10-86.5-53.7-86.5-106.1v-1.3c14.5 8.1 31.3 13.1 49.2 13.7-29.2-19.5-48.4-52.7-48.4-90.3 0-19.9 5.3-38.3 14.5-54.2 52.7 64.3 131.7 106.7 220.6 111.2-1.8-8.1-2.6-16.6-2.6-25.1 0-61.7 50-111.7 111.7-111.7 32.2 0 61.2 13.7 81.6 35.6 25.4-5 49.2-14.2 70.5-27-8.5 26.6-26.3 48.9-49.8 63.1 22.5-2.5 44.3-8.5 64.4-17.1-14.9 22.5-33.6 42.3-55.2 58.1z" />
+    </svg>
+    """
+  end
+
+  def icon(%{name: "linkedin"} = assigns) do
+    ~H"""
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 448 512">
+      <path d="M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 1 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z" />
+    </svg>
+    """
+  end
+
+  def icon(%{name: "gmail"} = assigns) do
+    ~H"""
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 488 512">
+      <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
+    </svg>
+    """
+  end
+
   ## JS Commands
 
   def show(js \\ %JS{}, selector) do

diff --git a/lib/exploring_beam_community_web/components/profile_card.ex b/lib/exploring_beam_community_web/components/profile_card.ex
@@ -1,12 +1,18 @@
 defmodule ExploringBeamCommunityWeb.ProfileCard do
   use Phoenix.Component
+  import ExploringBeamCommunityWeb.CoreComponents, only: [icon: 1]
 
   attr(:name, :string, required: true)
   attr(:role, :string, required: false, default: "")
   attr(:company, :string, required: false)
   attr(:image, :string, required: false, default: "")
   attr(:description, :string, required: false, default: "")
 
+  attr(:twitter, :string, required: false, default: "")
+  attr(:gmail, :string, required: false, default: "")
+  attr(:linkedin, :string, required: false, default: "")
+  attr(:github, :string, required: false, default: "")
+
   def profile_card(assigns) do
     ~H"""
     <div class="max-w-2xl mx-auto bg-zinc-200 dark:bg-main-700 rounded-lg shadow-lg overflow-hidden">
@@ -24,6 +30,35 @@ defmodule ExploringBeamCommunityWeb.ProfileCard do
           <%= @description %>
         </p>
       </div>
+      <div class="p-4 flex space-x-6 md:space-x-4 mx-auto justify-center text-center">
+        <!-- Email -->
+        <%= if @gmail != "" do %>
+          <a href={"mailto:" <> @gmail} class="[&>svg]:h-6 [&>svg]:w-6 hover:text-red-600" target="_blank">
+            <.icon name={"gmail"}/>
+          </a>
+        <% end %>
+
+        <!-- LinkedIn -->
+        <%= if @linkedin != "" do %>
+          <a href={"https://www.linkedin.com/in/" <> @linkedin} class="[&>svg]:h-6 [&>svg]:w-6 hover:text-blue-600" target="_blank">
+            <.icon name={"linkedin"}/>
+          </a>
+        <% end %>
+
+        <!-- Github -->
+        <%= if @github != "" do %>
+          <a href={"https://www.github.com/" <> @github} class="[&>svg]:h-6 [&>svg]:w-6 hover:text-zinc-500" target="_blank">
+            <.icon name={"github"}/>
+          </a>
+        <% end %>
+
+        <!-- Twitter -->
+        <%= if @twitter != "" do %>
+          <a href={"https://twitter.com/" <> @twitter} class="[&>svg]:h-6 [&>svg]:w-6 hover:text-blue-400" target="_blank">
+            <.icon name={"twitter"}/>
+          </a>
+        <% end %>
+      </div>
     </div>
     """
   end

diff --git a/lib/exploring_beam_community_web/controllers/about_us_html.ex b/lib/exploring_beam_community_web/controllers/about_us_html.ex
@@ -7,6 +7,9 @@ defmodule ExploringBeamCommunityWeb.AboutUsHTML do
     <h1 class="mx-auto text-center text-3xl dark:text-main-400 font-bold my-6">
       About us!
     </h1>
+    <p class="mx-auto text-center my-4 font-semibold text-lg my-6">
+      Feel free to contact us with any feedback ✉️, issues 🛠️, or questions.
+    </p>
 
     <div class="grid md:grid-cols-2 grid-cols-1 gap-4 max-w-6xl w-full">
       <.profile_card
@@ -23,23 +26,31 @@ defmodule ExploringBeamCommunityWeb.AboutUsHTML do
          university studies and the Stack Overflow survey, where Elixir and Phoenix
          were highlighted as beloved frameworks. Now, I work at Peer Stritzinger GmbH,
          focusing on Erlang solutions for embedded systems."
+        github="IciaCarroBarallobre"
+        gmail="[email protected]"
+        linkedin="icia-carro-barallobre"
+        twitter="IciaCB"
       />
       <.profile_card
         name="Maria Jose Gavilan"
         role="Researcher / Project Manager"
         company="Peer Stritzinger"
         image="images/profiles/mariajo.jpg"
         description="Passionate about people, their organizational methods,
-      creative processes, and the need for communication and community.
-      I run a private practice in San José, providing therapy and developing
-      treatment plans. My journey into psychology began with a Licentiate
-      from UCACIS and a diploma in Art Therapy from UAM, sparking my interest
-      in connecting psychoanalysis with art. In 2015, I co-founded Kunsthilft
-      in Berlin, offering therapeutic art workshops for refugee children. I
-      combine my expertise in psychology with project management, bringing
-      a unique perspective to my work."
+        creative processes, and the need for communication and community.
+        I run a private practice in San José, providing therapy and developing
+        treatment plans. My journey into psychology began with a Licentiate
+        from UCACIS and a diploma in Art Therapy from UAM, sparking my interest
+        in connecting psychoanalysis with art. In 2015, I co-founded Kunsthilft
+        in Berlin, offering therapeutic art workshops for refugee children. I
+        combine my expertise in psychology with project management, bringing
+        a unique perspective to my work."
+        gmail="[email protected]"
+        linkedin="mariajosegavilan"
+        twitter="galateadunkel"
       />
     </div>
+
     """
   end
 end
diff --git a/priv/static/assets/app.css b/priv/static/assets/app.css
@@ -1102,6 +1102,10 @@ select {
   height: 1.25rem;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
 .h-fit {
   height: -moz-fit-content;
   height: fit-content;
@@ -1159,6 +1163,10 @@ select {
   width: 1.25rem;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
 .w-80 {
   width: 20rem;
 }
@@ -1343,6 +1351,12 @@ select {
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1922,6 +1936,16 @@ select {
   fill: #f9a8d4;
 }
 
+.hover\:text-blue-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
+.hover\:text-blue-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
+
 .hover\:text-main-400:hover {
   --tw-text-opacity: 1;
   color: rgb(113 130 182 / var(--tw-text-opacity));
@@ -1932,11 +1956,21 @@ select {
   color: rgb(60 67 95 / var(--tw-text-opacity));
 }
 
+.hover\:text-red-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.hover\:text-zinc-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(113 113 122 / var(--tw-text-opacity));
+}
+
 .hover\:text-zinc-700:hover {
   --tw-text-opacity: 1;
   color: rgb(63 63 70 / var(--tw-text-opacity));
@@ -2282,3 +2316,11 @@ select {
     padding-bottom: 2rem;
   }
 }
+
+.\[\&\>svg\]\:h-6>svg {
+  height: 1.5rem;
+}
+
+.\[\&\>svg\]\:w-6>svg {
+  width: 1.5rem;
+}