index.html

---
layout: default
---

<section
  class="py-16 lg:py-52 dark:lg:pt-32 bg-blue-600 dark:bg-neutral-900 text-slate-50"
>
  <div class="max-w-7xl mx-auto">
    <div class="px-8 lg:px-0">
      <h1 class="text-5xl lg:text-7xl font-bold font-sans tracking-tight">
        <span class="wave">👋</span> Howdy! My name is Justin
      </h1>
      <p class="text-xl lg:text-3xl mt-4 lg:mt-8">
        I am a Senior Engineering Manager at
        <a
          href="https://sproutsocial.com"
          class="underline"
          rel="noopener noreferrer"
          target="_blank"
          >Sprout&nbsp;Social</a
        >. I've spent the last fifteen years solving problems with web
        technologies. I am always interested in finding new and innovative ways
        to build web&nbsp;products.
      </p>
      <p class="text-xl lg:text-3xl mt-4 lg:mt-8">
        Connect with me via {% for social in site.footer_social %}
        {% if forloop.last %}or {% endif %}
        <a href="{{ social.url }}" class="inline-block underline"
          >{{ social.name }}</a
        >{% if forloop.last %}.{% else %},{% endif %} {% endfor %}
      </p>
    </div>
  </div>
</section>

<section
  class="py-16 lg:py-52 dark:lg:pt-0 bg-slate-100 text-neutral-900 dark:bg-neutral-900 dark:text-slate-50"
>
  <div class="max-w-7xl mx-auto">
    <div class="px-8 lg:px-0">
      <h2 class="font-sans text-2xl lg:text-4xl tracking-tight">Writing</h2>

      <div class="lg:grid lg:grid-cols-6 lg:gap-8 mt-8">
        {% for post in site.posts limit:1 %}
        <article class="block w-full lg:col-span-4">
          <a class="block" href="{{ post.url | prepend: site.baseurl }}">
            <h2 class="text-4xl lg:text-6xl font-sans font-bold tracking-tight">
              {{ post.title }}
            </h2>

            <time class="block mt-2" datetime="{{post.date}}">
              {{ post.date | date: "%b %-d, %Y" }}
            </time>

            {% if post.featured_img %}
            <img
              class="block w-full h-auto mt-8 lazyload"
              src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
              data-src="{{ post.featured_img }}"
              alt="{{ post.title }}"
              loading="lazy"
              height="9"
              width="16"
            />
            {% endif %}
          </a>

          <div class="mt-8 text-xl leading-loose">
            {% if post.description %}
            <p>{{ post.description }}</p>
            {% else %} {{ post.excerpt }} {% endif %}
          </div>
        </article>
        {% endfor %}

        <div class="w-full lg:col-span-2 lg:pl-16 mt-8 lg:mt-0">
          {% for post in site.posts offset:1 limit:4 %}
          <a
            class="block {% if forloop.first %}{% else %}mt-4{% endif %}"
            href="{{ post.url | prepend: site.baseurl }}"
          >
            <h2 class="text-2xl font-bold font-sans">{{ post.title }}</h2>

            <time class="block mt-2" datetime="{{post.date}}">
              {{ post.date | date: "%b %-d, %Y" }}
            </time>
          </a>
          {% endfor %}

          <p class="mt-8">
            <a href="/writing/" class="block lg:text-2xl underline"> View all writing </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>