index.html

---
layout: default
overtitle: i go by aj but mostly
title: i'm ternera on the internet
image: null.jpg
---
<div class="page-home">

    {% if site.data.settings.hero_settings.background_image %}
    <img src="{{ site.data.settings.hero_settings.background_image | relative_url }}" class="hero__background" draggable="false">
    {% endif %}
  
    <section class="hero">
      <div class="wrap grid">
        <div class="title">
          <p class="subtitle">{{ page.overtitle }}</p>
          <h1>{{ page.title }}</h1>
        </div>
  
        <p class="intro subtitle--light">
          {{ page.description }}
          <a href="#" class="hero__cta button--fill contact-trigger js-contact">Get In Touch</a>
        </p>
      </div>
    </section>
  
    <section class="listing">
      <div class="wrap">
  
        {% for project in site.projects reversed %}
  
        {% if project.accent_color %}{% capture accent_color %}{{ project.accent_color }}{% endcapture %}{% endif %}
  
        <article class="project__preview">
          <h3 class="project__title"><a href="{{ project.url | relative_url }}" style="--accent: {{ accent_color }}">{{ project.title }}</a></h3>
  
          <div class="project__images owl-carousel" style="--accent: {{ accent_color }}">
            {% for image in project.gallery_images %}
            <a href="{{ project.url | relative_url }}"><img src="{{ '/images/projects/' | relative_url}}{{ image }}" alt="" class="project__image"></a>
            {% endfor %}
          </div>
  
          <div class="project__content grid" style="border-color: {{ accent_color }}">
            <p class="project__subtitle subtitle--light">{{ project.subtitle }}</p>
            <p class="project__description --small">
              {{ project.description }}
              <a href="{{ project.url | relative_url }}" class="project__link button--text --right"
                style="color: {{ accent_color }}; --color-var: {{ accent_color }}">View Work</a>
            </p>
          </div>
        </article>
  
        {% endfor %}
      </div>
    </section>
  
    {% include section__about.html %}
  
    <section class="recent-posts">
      <div class="wrap grid">
        <header class="recent-posts__header">
          <h4>Recent blog posts</h4>
          <a href="{{ '/blog' | relative_url }}" class="action button--text--accent --right">All Posts</a>
        </header>
  
        <div class="recent-posts__list grid">
          {% for post in site.posts limit: 3 %}
          {% include component__post-preview.html %}
          {% endfor %}
        </div>
  
        <a href="{{ '/blog' | relative_url }}" class="action-bottom button--text--accent --right">All Posts</a>
      </div>
    </section>
  </div>