<main class="container-fluid h-100 d-flex justify-content-center align-items-center">

  <div class="d-flex flex-column-reverse flex-lg-row align-items-lg-end mt-5">

    <div class="col-auto mt-3 mt-lg-0">
      <%= img_tag Routes.static_path(@conn, "/images/cat-roof_portrait.jpg"),
          class: "img-fluid border border-20 border-gray-900 rounded-2",
          alt: "My cat Babka, stuck on a roof when she was still just a stray.",
          title: "My cat Babka, stuck on a roof when she was still just a stray."
        %>
    </div>


    <div class="col-auto justify-content-start ms-lg-3">

      <h2 class="fs-2 fw-600 mb-0">
        <%= icon_div @conn, "mdi-account", [class: "icon baseline me-2"] %><span>Adam Piontek</span>
      </h2>

      <div class="font-monospace text-gray-500 fs-5">Desktop Systems Engineer. Human.</div>

      <div id="social-icons" class="mt-1">
        <%= for s <- socials(@conn) do %>
          <%= link to: s.url, target: "_blank", class: "fs-3 link-light text-decoration-none" do %>
            <%= icon_div @conn, s.icon, [class: "icon baseline"] %>
          <% end %>
        <% end %>
      </div>

    </div>

  </div>

</main>
