index.njk

---
layout: layouts/home.njk
eleventyNavigation:
  key: Home
  order: 1
---

<div class="tw-w-full tw-grid lg:tw-grid-cols-12 tw-grid-cols-1">
  <!-- Left Column-->
  <div class="tw-grid tw-h-full tw-bg-cyan-900 tw-p-3 tw-col-span-4 tw-my-auto">
    <div
      class="tw-flex tw-flex-col tw-items-center tw-content-center tw-justify-center"
    >
      <img
        src="/../img/logowhitem.png"
        alt="logo image"
        width="100"
        class="tw-flex tw-text-center tw-align-middle tw-pr-4 tw-items-center"
      />
      <p class="tw-text-gray-50 tw-pb-4 tw-italic">martinbreynolds.dev</p>
      <h1
        class="tw-uppercase tw-text-5xl tw-flex tw-items-center tw-text-center tw-font-bold tw-text-gray-50 tw-tracking-widest"
      >
        Welcome
      </h1>
    </div>
  </div>
  <!-- Right Column-->

  <div class="tw-bg-cyan-50 tw-h-96 tw-col-span-8 tw-flex tw-flex-row">
    <style>
      svg.trapezoidal-vertical {
        position: relative;
        bottom: 0;
        right: 0;
        width: 100px;
        height: 100%;
        /* set height to pixels if you want angle to change with screen width */
      }
    </style>
    <svg
      class="trapezoidal-vertical tw-absolute tw-invisible md:tw-visible tw-left-0 tw-col-auto"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 100"
      preserveAspectRatio="none"
    >
      <polygon fill="#174f63" points="100,0 0,100 0,0" />
    </svg>
    {% set maxPosts = collections.posts.length | min(3) %}
    <div class="tw-my-auto">
      <h2
        class="tw-text-2xl tw-p-6 tw-font-semibold tw-text-cyan-600 tw-uppercase tw-flex tw-justify-center tw-items-center tw-text-center tw-tracking-widest"
      >
        This site is my 11ty Jamstack site built whilst studying with The Coders
        Giuld and is used to showcase the skils I have learnt.
      </h2>
      <div
        class="buttonHolder tw-flex tw-flex-row tw-justify-around p-4 tw-text-center tw-items-center"
      >
        <a class="tw-w-1/2" href="{{ '/pages/challenges' | url }}"
          ><button
            type="button"
            class="tw-p-3 tw-bg-cyan-200 tw-text-gray-900 tw-font-bold tw-rounded-md tw-mx-auto md:tw-text-lg tw-text-xs"
          >
            <i class="fas fa-eye"></i> TCG Challenges
          </button></a
        >
        <a class="tw-w-1/2" href="{{ '/pages/contact' | url }}"
          ><button
            type="button"
            class="tw-p-3 tw-bg-cyan-200 tw-text-gray-900 tw-font-bold tw-rounded-md tw-mx-auto md:tw-text-lg tw-text-xs"
          >
            <i class="fas fa-file-signature"></i> Contact Me
          </button></a
        >
      </div>
    </div>
  </div>
</div>

<div
  class="tw-flex tw-mt-3 tw-text-2xl tw-w-auto tw-mx-auto tw-font-semibold tw-text-center tw-text-cyan-300 tw-uppercase tw-justify-center"
>
  <p
    class="tw-p-3 tw-px-6 tw-rounded-t-3xl tw-mx-3 tw-bg-gradient-to-b tw-from-cyan-900 tw-via-cyan-700 tw-to-cyan-900"
  >
    Latest {% if maxPosts == 1 %}Post{% else %}{{ maxPosts }} Posts {% endif %}
    <i class="far fa-newspaper"></i>
  </p>
</div>
<div class="tw-h-6 tw-w-full tw-bg-cyan-900"></div>

{% set postslist = collections.posts | head(-3) %} {% set postslistCounter =
collections.posts | length %} {% include "postslist.njk" %}

<div class="tw-p-8 tw-mx-auto tw-text-center">
  <a href="{{ '/posts/' | url }}"
    ><button
      type="button"
      class="tw-p-3 tw-bg-cyan-200 tw-text-gray-900 tw-font-bold tw-rounded-md tw-mx-auto"
    >
      Read More Posts in the Archive.
    </button></a
  >
</div>