index.html

---
layout: main
---

{% assign latest_post = site.posts.first %}

<div class="hero glass-card">
  <div class="hero-content">
    {% if latest_post.categories %}
    <span class="hero-category">{{ latest_post.categories | first }}</span>
    {% endif %}
    <h1>{{ latest_post.title }}<span class="cursor-blink"></span></h1>
    <p>{{ latest_post.content | strip_html | truncatewords: 30 }}</p>
    <a href="{{ latest_post.url | prepend: site.baseurl }}" class="hero-button">./read_more.sh</a>
  </div>
  {% if latest_post.img %}
  <div class="hero-background" style="background-image: url('{{site.baseurl}}/assets/img/{{latest_post.img}}')"></div>
  {% endif %}
</div>

<div class="section-heading">
  <h2>~/articles<span class="cursor-blink"></span></h2>
  <p>Explore my thoughts on Machine Learning, AI, and more</p>
</div>

<div class="posts-grid">
  {% for post in paginator.posts %}
  {% if forloop.index > 1 %}
  <article class="post-card">
    <a class="post-card-link" href="{{post.url | prepend: site.baseurl}}">
      {% if post.img %}
      <div class="post-card-image">
        <img src="{{" /assets/img/" | prepend: site.baseurl | append : post.img}}" alt="Cover image for {{post.title}}"
          srcset="{{'/assets/img/' | prepend: site.baseurl | append: post.img | replace: '.jpg', '.webp'}} 1x, {{'/assets/img/' | prepend: site.baseurl | append: post.img}} 2x"
          loading="lazy">

        {% if post.categories %}
        <div class="post-card-category">
          <span>{{ post.categories | first }}</span>
        </div>
        {% endif %}
      </div>
      {% endif %}
      <div class="post-card-content">
        <h2 class="post-card-title">{{post.title}}</h2>
        <p class="post-card-excerpt">{{ post.content | strip_html | truncatewords: 15 }}</p>
        <div class="post-card-meta">
          <div class="post-card-author">
            {% if site.author-img %}
            <img src="{{site.baseurl}}/assets/img/{{site.author-img}}" alt="{{site.author}} profile photo"
              class="author-image" loading="lazy">
            {% endif %}
            <span>{{site.author}}</span>
          </div>
          <div class="post-card-info">
            <span class="post-card-date">{{post.date | date: '%b %d, %Y'}}</span>&nbsp;&nbsp;
            <span class="post-card-read-time">{% capture words %}{{ post.content | number_of_words }}{% endcapture %}{%
              unless words contains "-" %}{{ words | plus: 250 | divided_by: 250 | append: " min read" }}{% endunless
              %}</span>
          </div>
        </div>
      </div>
    </a>
  </article>
  {% endif %}
  {% endfor %}
</div>

{% if paginator.total_pages > 1 %}
<div class="pagination-container">
  {% include pagination.html %}
</div>
{% endif %}

<div class="newsletter-section glass-card">
  <div class="newsletter-content">
    <h2>~/subscribe<span class="cursor-blink"></span></h2>
    <p>// Get the latest updates on Machine Learning, AI, and more</p>
    <form class="newsletter-form">
      <input type="email" placeholder="your@email.com" required>
      <button type="submit" class="newsletter-button">[ SUBSCRIBE ]</button>
    </form>
  </div>
</div>

<script>
  // Scroll-reveal animation for post cards
  document.addEventListener('DOMContentLoaded', function () {
    const cards = document.querySelectorAll('.post-card, .hero, .newsletter-section');

    const observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry, index) {
        if (entry.isIntersecting) {
          // Staggered delay for cascading effect
          setTimeout(function () {
            entry.target.classList.add('revealed');
          }, index * 80);
          observer.unobserve(entry.target);
        }
      });
    }, {
      threshold: 0.1,
      rootMargin: '0px 0px -40px 0px'
    });

    cards.forEach(function (card) {
      card.classList.add('scroll-reveal');
      observer.observe(card);
    });
  });
</script>