index.html

---
layout: default
title: Home
---


<!--<div class="intro-container">
    <div class="intro">
  <h1 class="big-header">Hi, I'm Shawn.</h1>

    <p>I am a Full Stack Web Developer, Designer and Electronics enthusiast.<br>
      I'm {{site.description}}</p>
    <p> I created this website to show case my projects and share the new things that i have discovered or made with
      the rest of the internet.
    </p>
    <a href="{{site.baseurl}}/about/"> You can read more About Me here </a>
  </div>
</div>
<br>
<br>-->

<!--<script>
    document.getElementById("menu").checked = true;

    if (document.documentElement.clientWidth < 900) {
      document.getElementById("container").style.paddingTop = "40rem"
      document.addEventListener("scroll", function() {
          if (window.pageYOffset > 550) {
            document.getElementById("menu").checked = false;
            document.getElementById("sidebar").style.position = "fixed";
            document.getElementById("container").style.paddingTop = "40rem";

          }
          else {
            document.getElementById("menu").checked = true;
            document.getElementById("sidebar").style.position = "absolute";
            document.getElementById("container").style.paddingTop = "40rem";

          }
    });
    function checkedHandler(checkbox) {
      if(!checkbox.checked) {
        document.getElementById("container").style.paddingTop = "4rem";
      }
      else {
        document.getElementById("container").style.paddingTop = "40rem";
      }
    }
    }
  </script>-->

  <script src="public/js/script.js"></script>
  <script src="public/js/checkHandler.js"></script>

<h1 class="big-header">Latest Posts</h1>
<div class="posts">
  {% for post in paginator.posts %}
  <div class="post">
    <h1 class="post-title-link">
      <a href="{{ post.url }}">
        {{ post.title }}
      </a>
    </h1>

    <span class="post-date-homepage"> <i class=" date-icon far fa-calendar-alt"></i> {{ post.date | date: "%A, %B %-d, %Y" }}</span>

    <!--<span style="font-size:20px;"> <i class="icons fas fa-folder-open"></i> Posted in
      <a class="categories" href="/tags#{{post.categories}}">{{post.categories}}</a> <br>
      <i class="icons fas fa-tags"></i> Tags : </span>
    {% for tag in post.tags %}
      <a class="mini-tags" href="/tags/{{ tag }}/">{{ tag }}</a>
      {% endfor %}
<br>
<br>-->
    {{ post.excerpt | truncate:250 | strip_html }}
    <br>
    <i style="font-size: 23px;" class="fas fa-tags"></i> :
    {% for tag in post.tags %}
    <a class="mini-tags" href="/tags/{{ tag }}/">{{ tag }}</a>
    {% endfor %}
    <br>
    <a href="{{post.url}}" class="read-more"> Read More &nbsp; ➤
    </a>

  </div>
  {% endfor %}
</div>

<div class="pagination">
  {% if paginator.next_page %}
  <a class="pagination-item older" href="{{ site.baseurl }}page{{paginator.next_page}}">Older</a>
  {% else %}
  <span class="pagination-item older">Older</span>
  {% endif %}
  {% if paginator.previous_page %}
  {% if paginator.page == 2 %}
  <a class="pagination-item newer" href="{{ site.baseurl }}">Newer</a>
  {% else %}
  <a class="pagination-item newer" href="{{ site.baseurl }}page{{paginator.previous_page}}">Newer</a>
  {% endif %}
  {% else %}
  <span class="pagination-item newer">Newer</span>
  {% endif %}
</div>