web/wp-content/themes/mozilla-builders/templates/pages/profile.twig

{% extends "layouts/base.twig" %}

{% block pageBody %}

<header class="relative grid grid-site centered-page mt-24 md:-mt-24">
  <div class="col-span-4 col-start-3 max-md:-mt-8 max-md:-mr-grid-site-margin max-md:order-2 md:col-span-11 md:col-start-6">
    <div class="aspect-[3/4] overflow-hidden">
      {% if post.stylized_photo.id %}
        {% include 'components/lazy-img.twig' with { img: get_image(post.stylized_photo.id), class: 'w-full h-full object-cover' } %}
      {% else %}
        <div class="aspect-[3/4] bg-gray"></div>
      {% endif %}
    </div>
  </div>

  <div class="z-10 max-md:col-span-4 max-md:col-start-2 max-md:order-1 md:absolute md:inset-0 md:grid md:grid-site md:place-content-center md:pointer-events-none">
    <h1 class="type-headline-2xl uppercase flex max-md:text-center max-md:items-center max-md:justify-center max-md:flex-col md:flex-wrap md:justify-between md:gap-8 md:col-span-18 md:col-start-4 md:pointer-events-auto">
      <span>{{ post.first_name }}</span>
      <span>{{ post.last_name }}</span>
    </h1>
  </div>

  <div class="col-span-full md:col-span-8 xl:col-span-7 md:col-start-17 my-8 md:mb-0 flex flex-col justify-end max-md:order-3">
    <dl class="grid grid-cols-6 md:grid-cols-8 xl:grid-cols-7 gap-x-grid-site-gutter gap-y-1">

      {% if post.projects %}
      <div class="contents">
        <dt class="col-span-2 md:col-span-3 uppercase">Project{% if post.projects|length > 1 %}s{% endif %}</dt>
        <dd class="col-span-4 md:max-xl:col-span-5">
          {% for project in post.projects %}
            <a class="hover-link font-bold" href="{{ project.link }}">{{ project.title }}</a>{% if loop.last %}{% else %}, {% endif %}
          {% endfor %}
        </dd>
      </div>
      {% endif %}

      {% if post.github_username %}
      <div class="contents">
        <dt class="col-span-2 md:col-span-3 uppercase">GitHub</dt>
        <dd class="col-span-4 md:max-xl:col-span-5"><a class="hover-link font-bold" href="https://github.com/{{ post.github_username }}">{{ post.github_username }}</a></dd>
      </div>
      {% endif %}

      {% if post.contacts %}
      <div class="contents">
        <dt class="col-span-2 md:col-span-3 uppercase">Contact</dt>
        <dd class="col-span-4 md:max-xl:col-span-5">
          {% for item in post.contacts %}
            <a class="hover-link font-bold" href="{{ item.link }}">{{ item.label }}</a>
          {% endfor %}
        </dd>
      </div>
      {% endif %}
    </dl>
  </div>
</header>

<section class="grid grid-site centered-page">

  {% if post.cohorts %}
    {% set cohort = post.cohorts[0] %}
    <nav aria-label="Cohort" class="mt-12 md:mt-24 col-span-full md:col-span-7 lg:col-span-8 md:col-start-1 md:row-span-full">
      <div class="md:grid md:grid-cols-8 md:gap-x-grid-site-gutter lg:grid-cols-8">
        <h2 class="max-lg:mb-2 max-lg:col-span-full lg:col-span-4 font-bold uppercase lg:leading-4 lg:mt-1">{{ cohort.title }}</h2>
        <ul class="lg:mt-1 max-lg:col-span-full lg:col-span-4 lg:col-start-5">
          {% for profile in cohort.profiles %}
            {% if profile.id == post.id %}
              <li class="font-bold uppercase leading-4 [&+&]:mt-1">
                {{ profile.first_name }} {{ profile.last_name }}
              </li>
            {% else %}
              <li class="uppercase leading-4 [&+&]:mt-1">
                <a href="{{ profile.link }}" class="hocus:bg-spot">
                  {{ profile.first_name }} {{ profile.last_name }}
                </a>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
    </nav>
  {% endif %}

  {% if post.project_description %}
    <div class="mt-12 md:mt-24 col-span-full md:col-span-17 md:col-start-8 lg:col-span-14 lg:col-start-11 xl:col-start-13 xl:col-span-11">
      <div class="md:grid md:grid-cols-17 lg:grid-cols-14 xl:grid-cols-11 md:gap-x-grid-site-gutter">
        <h2 class="max-md:mb-4 md:col-span-5 lg:col-span-4 xl:col-span-3 md:col-start-1 max-md:indent-8 font-bold uppercase">Project</h2>
        <div x-hang-punc class="md:col-span-12 lg:col-span-10 xl:col-span-8 md:col-start-6 lg:col-start-5 xl:col-start-4 prose">
          {{ post.project_description }}
        </div>
      </div>
    </div>
  {% endif %}

  {% if post.collaborators %}
    <div class="mt-12 md:mt-24 col-span-full md:col-span-17 md:col-start-8 lg:col-span-14 lg:col-start-11 xl:col-start-13 xl:col-span-11">
      <div class="md:grid md:grid-cols-17 lg:grid-cols-14 xl:grid-cols-11 md:gap-x-grid-site-gutter">
        <h2 class="max-md:mb-4 md:col-span-5 lg:col-span-4 xl:col-span-3 md:col-start-1 max-md:indent-8 font-bold uppercase">Collaborators</h2>
        <div x-hang-punc class="md:col-span-12 lg:col-span-10 xl:col-span-8 md:col-start-6 lg:col-start-5 xl:col-start-4 prose">
          {{ post.collaborators }}
        </div>
      </div>
    </div>
  {% endif %}

  {% if post.about %}
    <div class="mt-12 md:mt-24 col-span-full md:col-span-17 md:col-start-8 lg:col-span-14 lg:col-start-11 xl:col-start-13 xl:col-span-11">
      <div class="md:grid md:grid-cols-17 lg:grid-cols-14 xl:grid-cols-11 md:gap-x-grid-site-gutter">
        <h2 class="max-md:mb-4 md:col-span-5 lg:col-span-4 xl:col-span-3 md:col-start-1 max-md:indent-8 font-bold uppercase">About</h2>
        <div x-hang-punc class="md:col-span-12 lg:col-span-10 xl:col-span-8 md:col-start-6 lg:col-start-5 xl:col-start-4 prose">
          {{ post.about }}
        </div>
      </div>
    </div>
  {% endif %}
</section>

{% include 'components/article-recirculation.twig' with { posts: post.latest_articles, title: 'Written by ' ~ post.first_name } %}

{% endblock %}