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

  <div class="d-flex flex-column mt-5 pb-3 mb-5">

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

      <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-300 fs-5">Desktop Systems Engineer.</div>

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

    </div>

    <div class="col-auto">

      <div class="separator mt-4 mb-2">qualifications</div>

      <ul class="text-gray-100">
        <%= for qualif <- resume_qualifs() do %>
          <%= content_tag :li, qualif %>
        <% end %>
      </ul>

      <div class="separator mt-4 mb-n2">experience</div>

      <%= for %{employer: employer, positions: positions} <- resume_experience() do %>
        <div class="fs-5 border-bottom border-gray mt-3 mb-2"><%= employer%></div>
        <div class="mb-3">
        <%= for position <- positions do %>
          <div class="d-flex justify-content-between">
            <span class="text-gray-100"><%= position.title %></span>
            <span class="text-gray-300"><%= position.start %> &mdash; <%= position.end %></span>
          </div>
        <% end %>
        </div>
      <% end %>

    </div>

  </div>

</main>
