From 2e51c6a1a45ada1ad1537eed6ae3ff7b75f58a4f Mon Sep 17 00:00:00 2001 From: IciaC Date: Thu, 22 Aug 2024 20:50:08 +0200 Subject: [PATCH] About us: profile info --- .../components/core_components.ex | 32 ++++++++++++++ .../components/profile_card.ex | 35 ++++++++++++++++ .../controllers/about_us_html.ex | 27 ++++++++---- priv/static/assets/app.css | 42 +++++++++++++++++++ 4 files changed, 128 insertions(+), 8 deletions(-) diff --git a/lib/exploring_beam_community_web/components/core_components.ex b/lib/exploring_beam_community_web/components/core_components.ex index aca574f..3c8abdc 100644 --- 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""" + + + + """ + end + + def icon(%{name: "twitter"} = assigns) do + ~H""" + + + + """ + end + + def icon(%{name: "linkedin"} = assigns) do + ~H""" + + + + """ + end + + def icon(%{name: "gmail"} = assigns) do + ~H""" + + + + """ + 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 index fa50687..71b350c 100644 --- a/lib/exploring_beam_community_web/components/profile_card.ex +++ b/lib/exploring_beam_community_web/components/profile_card.ex @@ -1,5 +1,6 @@ defmodule ExploringBeamCommunityWeb.ProfileCard do use Phoenix.Component + import ExploringBeamCommunityWeb.CoreComponents, only: [icon: 1] attr(:name, :string, required: true) attr(:role, :string, required: false, default: "") @@ -7,6 +8,11 @@ defmodule ExploringBeamCommunityWeb.ProfileCard do 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"""
@@ -24,6 +30,35 @@ defmodule ExploringBeamCommunityWeb.ProfileCard do <%= @description %>

+
+ + <%= if @gmail != "" do %> + @gmail} class="[&>svg]:h-6 [&>svg]:w-6 hover:text-red-600" target="_blank"> + <.icon name={"gmail"}/> + + <% end %> + + + <%= if @linkedin != "" do %> + @linkedin} class="[&>svg]:h-6 [&>svg]:w-6 hover:text-blue-600" target="_blank"> + <.icon name={"linkedin"}/> + + <% end %> + + + <%= if @github != "" do %> + @github} class="[&>svg]:h-6 [&>svg]:w-6 hover:text-zinc-500" target="_blank"> + <.icon name={"github"}/> + + <% end %> + + + <%= if @twitter != "" do %> + @twitter} class="[&>svg]:h-6 [&>svg]:w-6 hover:text-blue-400" target="_blank"> + <.icon name={"twitter"}/> + + <% end %> +
""" 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 index 09e2fb5..0f7c571 100644 --- 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

About us!

+

+ Feel free to contact us with any feedback ✉️, issues 🛠️, or questions. +

<.profile_card @@ -23,6 +26,10 @@ 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="iciacarrobarallobre@gmail.com" + linkedin="icia-carro-barallobre" + twitter="IciaCB" /> <.profile_card name="Maria Jose Gavilan" @@ -30,16 +37,20 @@ defmodule ExploringBeamCommunityWeb.AboutUsHTML do 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="mariajose.gavilan@gmail.com" + linkedin="mariajosegavilan" + twitter="galateadunkel" />
+ """ end end diff --git a/priv/static/assets/app.css b/priv/static/assets/app.css index b46634b..7786403 100644 --- 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; +}