index.html

---
layout: default
title: Charles Barnes - Frontend Developer
---

<div class="latest-post-preview" style="padding: 0 10px; box-sizing: border-box;">
  <h2 class="latest-post-heading">Latest from the Blog</h2>
  {% assign current_year = 'now' | date: '%Y' %}
  {% for post in site.posts %}
    {% assign post_year = post.date | date: '%Y' %}
    {% if post_year > current_year %}
      {% assign post.date = post.date | date: '%Y-%m-%d' | replace: post_year, current_year %}
    {% endif %}
  {% endfor %}
  {% assign latest_post = site.posts | sort: 'date' | reverse | first %}
  {% if latest_post %}
    <div class="latest-post-container">
      <div class="latest-post-image">
        <div style="height: 300px; position: relative; overflow: hidden; background-color: var(--icon-background);">
          {% if latest_post.image %}
            {% include picture.html path=latest_post.image alt=latest_post.title class="cover-image" %}
          {% else %}
            {% include picture.html path="/assets/images/blog/default-image.png" alt=latest_post.title class="cover-image" %}
          {% endif %}
        </div>
      </div>
      <div class="latest-post-content">
        <h3 class="latest-post-title">
          <a href="{{ latest_post.url | relative_url }}">{{ latest_post.title }}</a>
        </h3>
        <div class="latest-post-meta">
          {{ latest_post.date | date: "%B %d, %Y" }}
          {% if latest_post.categories.size > 0 %}
            <span class="project-tags">
              {% for category in latest_post.categories %}
                <span class="project-tag">{{ category }}</span>
              {% endfor %}
            </span>
          {% endif %}
        </div>
        <div class="latest-post-excerpt">
          {{ latest_post.excerpt | strip_html | truncatewords: 50 }}
        </div>
        <a href="{{ latest_post.url | relative_url }}" class="read-more-button">Read More</a>
      </div>
    </div>
  {% else %}
    <p>No blog posts available yet. Check back soon!</p>
  {% endif %}
</div>

{% include icon_grid.html %}