---
layout: default
---

<div class="blog-home">
  <div
    style="
      background-color: white;
      margin: 1em 0 2em;
      color: black;
      border-radius: 5px;
      border: 3px dotted #ccc !important;
      padding: 1em;
    "
  >
    <h2 style="font-weight: bold">Hello, fellow human!</h2>
    <p>
      Welcome! Just a quick message... Like you, I have many areas of interests,
      and in this site you will find posts on varying topics that are not always
      confined to my professional life.
    </p>
    <p>
      There really is no central theme on this blog -- even the writing
      quality/style may change between posts. My only rule here is that I put
      out my thoughts about things I want to talk about.
    </p>

    <div class="hide-message" style="display: none">
      <p>
        There may be some topics that pop up more than others.
        <a href="/technology">Technology</a> posts are mostly about web
        development, and may be more relatable to people who found me for my
        development work. More opinionated
        <a href="/personal">personal</a> posts are where I talk about stuff I
        find interesting and helpful to put out in the open for their potential
        to help others as well. However, other topics will most likely be
        included in the future and a lot of things may change over time.
      </p>
      <p>
        Thank you for the interest in reading. I look forward to any feedback or
        even the possibility of collaboration. Hit me up about any topic you
        find here! Below are my contact details.
      </p>
      <ul>
        <li>email: <a href="mailto:ayo@ayco.io">ayo@ayco.io</a></li>
        <li>chat: <a href="https://t.me/ayoayco">ayoayco @ Telegram</a></li>
      </ul>
      <p>~ <em>Ayo Ayco</em></p>
    </div>
    <button
      class="read-message"
      style="cursor: pointer"
      onclick="toggleMessage()"
    >
      Read full message &raquo;
    </button>
    <script>
      function toggleMessage() {
        var x = document.getElementsByClassName("hide-message")[0];
        var y = document.getElementsByClassName("read-message")[0];
        if (x.style.display === "none") {
          x.style.display = "block";
          y.innerHTML = "&laquo; Read less...";
        } else {
          x.style.display = "none";
          y.innerHTML = "Read full message &raquo;";
        }
      }
    </script>
  </div>
  {% if site.posts.size > 0 %}
  <ul class="blog-home__list-items">
    {% for post in site.posts %}
    <li class="blog-home__list-items__item">
      <div class="blog-home__list-items__item__header">
        <div>
          <h3 class="blog-home__list-items__item__header__title">
            <a href="{{ post.url | relative_url }}"
              >{{ post.title | escape }}</a
            >
          </h3>
        </div>
        <div class="blog-home__list-items__item__header__description">
          <span>{{post.date | date_to_string}}</span> •
          <span>{{post.description}}</span>
        </div>
      </div>
      <div class="blog-home__list-items__item__excerpt">
        {% if post.image %}
        <a href="{{post.url | relative_url}}"
          ><img
            class="blog-home__list-items__item__excerpt__thumb"
            alt="{{ post.description | escape }}"
            title="{{ post.description | escape }}"
            src="../assets/images/{{ post.image }}.jpg"
        /></a>
        {% else %}
        <!-- <a href="{{post.url | relative_url}}"
          ><img
            class="blog-home__list-items__item__excerpt__thumb"
            alt="{{ post.description | escape }}"
            title="{{ post.description | escape }}"
            src="../assets/images/hello-world.jpg"
        /></a> -->

        {% endif %} {{ post.excerpt }}
      </div>
      <div class="blog-home__list-items__item__readmore">
        <a href="{{ post.url | relative_url }}" class="button"
          >Continue Reading</a
        >
      </div>
    </li>
    {% endfor %}
  </ul>
  {% endif %}
</div>