{%- assign projects = site.projects -%}

{%- if page.lang != null -%}

{%- assign projects = site.projects | where: "lang", page.lang -%}

{%- endif -%}

<div id=“projects” class=“min-h-screen pt-32”>

<h2 class="text-primary-700 mb-10 text-3xl">Some Things I've Built</h2>

<div class="row">
   {% for project in projects | where: "featured", true %}
      <div class="col w-full sm:w-1/2">
         <a href="{{ project.url }}" class="card featured">
            <div class="py-5 pt-2">
               {% for category in project.categories %}
                  <span class="text-gray-300 text-sm pr-5 py-1">{{ category }}</span>
               {% endfor %}
            </div>

            <h2 class="text-gray-800 text-2xl mb-3">{{ project.title }}</h2>

            <div class="absolute bottom-0">
               <div class="h-36 overflow-hidden w-4/5 mx-auto">
                  <img src="{{ project.thumbnail }}" alt="{{ project.title }}">
               </div>
            </div>
         </a>
      </div>
   {% endfor %}
</div>

{%- if page.projects -%}
   <div class="flex justify-center my-5">
      <a href="{{ page.projects.url }}" class="btn border-primary-700 border rounded-md text-center text-primary-700 hover:bg-primary-700 hover:text-white transition-all">{{ page.projects.see_more_label }}</a>
   </div>
{%- endif -%}

</div>