feat: implement categories

_config.yml

@@ -84,7 +84,7 @@ prose:
           element: text
           label: category
           type: text
-          placeholder: useful | entertaining | motivational | dev
+          placeholder: productivity | entertaining | motivational | technology
     _drafts:
       - name: "published"
         field:
@@ -114,7 +114,7 @@ prose:
           element: text
           label: category
           type: text
-          placeholder: useful | entertaining | motivational | dev
+          placeholder: productivity | entertaining | motivational | technology
 # Exclude from processing.
 # The following items will not be processed, by default. Create a custom list
 # to override the default setting.

_layouts/category.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{content}}

_layouts/home.html

@@ -4,7 +4,6 @@ layout: default
 
 <div class="blog-home">
   {% if site.posts.size > 0 %}
-  <h2 class="blog-home__list-title">{{ page.list_title }}</h2>
   <ul class="blog-home__list-items">
     {% for post in site.posts %}
     <li class="blog-home__list-items__item">
@@ -48,6 +47,5 @@ layout: default
     </li>
     {% endfor %}
   </ul>
-
   {% endif %}
 </div>

_layouts/post.html

@@ -8,6 +8,7 @@ layout: default
   itemtype="http://schema.org/BlogPosting"
 >
   <header class="blog-post__header">
+    <div class="blog-post__header__category"><span><a href="{{ page.category | relative_url}}">{{ page.category }}</a></span></div>
     <div>
       <h3 class="blog-post__header__title" itemprop="name headline">
         {{ page.title | escape }}
@@ -32,7 +33,7 @@ layout: default
           >
           | {% endif %} {% assign date_format = site.minima.date_format |
           default: "%b %-d, %Y" %} {{ page.date | date: date_format }}
-        </time>
+        <time>
       </span>
     </div>
 
@@ -73,7 +74,8 @@ layout: default
       >
         <div id="mc_embed_signup_scroll">
           <label for="mce-EMAIL"
-            >Sign up to get useful posts like this periodically and more.</label
+            >Sign up to get {{ page.category }} posts like this periodically and
+            more.</label
           >
           <input
             type="email"

_posts/2018-04-21-git-and-github.md

@@ -3,6 +3,7 @@ title: "What Is Github and Why Every Developer Needs It"
 permalink: "/git-and-github"
 description: "I strongly believe that every developer should know Git and Github. Here's why."
 keywords: ""
+category: technology
 image: "git-github"
 image-attrib: "Tim Gouw"
 image-attrib-url: "https://www.pexels.com/@punttim"
@@ -11,6 +12,7 @@ image-attrib-url: "https://www.pexels.com/@punttim"
 If you ask me for something that would greatly jumpstart your growth as a developer, I would place my bet on learning Git and exploring projects on [Github](https://github.com/explore).
 
 I say this because to be better in writing code, you must first read and use lots and lots of code by more experienced developers... and a good place to start with this is Github.
+
 <!--more-->
 
 ## Now, what exactly is Github?
@@ -23,7 +25,6 @@ Github hosts [all sorts of projects](https://github.com/explore) from Desktop ap
 
 There are other websites that serve this same purpose (like [Bitbucket](https://bitbucket.org) and [Gitlab](https://gitlab.com)) but Github is now the preferred home for most Open Source projects due to it being the oldest and its culture of openness.
 
-
 ## Learn How Others Do It
 
 Because of this "openness", Github is not just the best place to start or contribute to an existing project. It is also a good place to see and learn how other developers write their code. You can even observe how collaborators communicate with each other to resolve their issues.
@@ -38,7 +39,7 @@ In case you don't feel like joining others, you can always use Github to host yo
 
 You might even find that it's always a good practice to have a copy of all your code backed up in a Github repository for safekeeping.
 
-If you don't want to start from scratch, you can just "fork" any interesting project to get a copy in your own account... then you can practically do *anything* you want with it!
+If you don't want to start from scratch, you can just "fork" any interesting project to get a copy in your own account... then you can practically do _anything_ you want with it!
 
 ## Track Your Developer Journey
 

_posts/2018-06-13-ubuntu-quick-dev-setup.md

@@ -3,6 +3,7 @@ title: "3 Steps How To Quickly Setup Ubuntu for Development"
 permalink: "/ubuntu-dev-setup"
 description: "In this post I go through how I quickly setup an Ubuntu machine for development"
 keywords: ""
+category: technology
 image: "ubuntu-dev-setup"
 ---
 
@@ -14,24 +15,26 @@ If you need instructions on how to setup the technologies separately, this artic
 
 ## 3 Steps: Quickly Setup Node.js, Python, and Ruby on Your New Ubuntu Machine
 
-
-
 1. Go to NodeSource's [distribution page](https://github.com/nodesource/distributions/blob/master/README.md#debinstall) to get the command for the Node version you want. Open a terminal, and type the command. For example, the following command will download the .deb installer of Node.js 8
+
 ```bash
 curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
 ```
 
 1. Update your repositories. The terminal may have to ask your password before it proceeds.
+
 ```bash
 sudo apt-get update
 ```
 
 2. Install packages for development using nodejs, ruby, and python. This may take a while to finish (depending on your Internet connection speed).
+
 ```bash
 sudo apt-get install -y nodejs ruby ruby-dev build-essential dh-autoreconf make python3-pip libssl-dev libffi-dev python3-dev virtualenv python3-venv
 ```
 
 When the install finishes, you now have Node.js, Python, and Ruby installed. To verify if they are successfully installed and check for each of their versions, type the following on your terminal.
+
 ```bash
 # to check for Node.js version
 node --version
@@ -52,27 +55,33 @@ ruby --version
 Of course, this is not yet totally complete because I still have to setup Angular CLI next, or React.js, or other frameworks/tools. But after these 3 steps, I will have all the package management tools I need to proceed with all other setups.
 
 ## Bonus: Here's How You Can Setup Ubuntu for Jekyll Development
+
 [Jekyll](https://jekyllrb.com) is a technology that will "Transform your plain text into static websites and blogs." It's like **blogging for hackers**, and I use it for this very blog, hosted for free on Github Pages. When all you need is a quick way to put content online, you can never go wrong with it, believe me.
 
 I will write more about Jekyll and Github Pages later, but for now, here's how I set it up.
-1. Open a text editor, then add the following two lines at the end of the file ```~/.bashrc```:
+
+1. Open a text editor, then add the following two lines at the end of the file `~/.bashrc`:
+
 ```bash
 export GEM_HOME=$HOME/gems
 export PATH=$HOME/gems/bin:$PATH
 ```
 
 2. On your terminal, run the following to reflect the changes:
+
 ```bash
 source ~/.bashrc
 ```
 
 3. Then, proceed to install necessary Ruby Gems:
+
 ```bash
 sudo gem update
 gem install jekyll bundler
 ```
 
 4. Go to jekyll project directory (if you already have one) or generate a new Jekyll, then install the dependencies:
+
 ```bash
 # create new jekyll project
 jekyll new my-awesome-site
@@ -83,10 +92,9 @@ bundle install
 ```
 
 5. After installing the dependencies, you may now start the Jekyll server:
+
 ```bash
 bundle exec jekyll serve
 ```
 
-Your website will be accessible at ```http://localhost:4000``` by default.
+Your website will be accessible at `http://localhost:4000` by default.
-
-

_posts/2018-09-20-feels-fm.md

@@ -3,6 +3,7 @@ title: "Feels FM: An Emoji-Powered Jukebox for Your Mental Health"
 permalink: "/feels-fm"
 description: "There's nothing worse for your productivity than an anxiety or depression attack. What do you do when you don't want to do anything or talk to anyone?"
 keywords: ""
+category: productivity
 image: "feels-fm"
 ---
 
@@ -10,10 +11,10 @@ There's nothing worse for your productivity than an anxiety or depression attack
 
 Here's a tool that just might help when you don't feel like going out or doing anything at all.<!--more-->
 
-[Feels FM](https://feelsfm.co.uk/) is an emoji-powered radio. It's really simple to use, you can do it even on days when you have zero motivation. Just choose an emoji that best represents your feels, answer some really simple questions like your birth year, and BOOM: a personalized music playlist to brighten up your day! 
+[Feels FM](https://feelsfm.co.uk/) is an emoji-powered radio. It's really simple to use, you can do it even on days when you have zero motivation. Just choose an emoji that best represents your feels, answer some really simple questions like your birth year, and BOOM: a personalized music playlist to brighten up your day!
 
 I'm listening to a playlist now as I write this. I have to say the music selection is on-point! You can even save the playlist to your Spotify account. Neeeeeat!
 
 The web app was made in collaboration with mental health charity "See Me". It aims to create a playful, interactive space where young people can share how they are feeling without the pressure of having to have a ‘big conversation’.
 
-Check it out for yourself at [https://feelsfm.co.uk](https://feelsfm.co.uk/) 
+Check it out for yourself at [https://feelsfm.co.uk](https://feelsfm.co.uk/)

_posts/2019-10-04-google-firebase-overview.md

@@ -3,6 +3,7 @@ title: "Choosing Backend Tech in 2019 and Why I Like Google Firebase"
 permalink: "/google-firebase-overview"
 description: "Let's discuss what Google Firebase has to offer for app development in 2019."
 keywords: ""
+category: technology
 image: "drake_firebase"
 ---
 

_posts/2019-10-14-forcing-javascript-dom-types.md

@@ -3,10 +3,11 @@ title: "How to Force JavaScript Variables to use Specific DOM APIs"
 permalink: "/forcing-js-dom-types"
 description: "To take advantage of code completion for Javascript, here's a smart way to force JS DOM variables to use a specific DOM API interface"
 keywords: ""
+category: technology
 image: "javascript"
 ---
 
-To take advantage of JavaScript *intellisense* and code completion when using a certain *awesome* text editor *\*ehem\** [VS Code](https://code.visualstudio.com/) *\*ehem\**, you need to be able to declare the correct interfaces for variables containing DOM elements.
+To take advantage of JavaScript _intellisense_ and code completion when using a certain _awesome_ text editor \*\*ehem\*_ [VS Code](https://code.visualstudio.com/) _\*ehem\*\*, you need to be able to declare the correct interfaces for variables containing DOM elements.
 
 Yeah, I know this works like magic in TypeScript.
 
@@ -21,13 +22,13 @@ Here goes.
 For example, if you want to make a variable use a specific DOM interface like `HTMLTableElement` and not the generic `HTMLELement`, just do:
 
 ```javascript
-var x = document.createElement('table') // -> returns HTMLTableElement
+var x = document.createElement("table"); // -> returns HTMLTableElement
 ```
 
 before you assign it...
 
 ```javascript
-x = document.getElementById('table-id') // -> always returns HTMLELement
+x = document.getElementById("table-id"); // -> always returns HTMLELement
 ```
 
 If you go straight to doing `var x = document.getElementById('table-id')`, the variable will have the generic type `HTMLElement`... and you don't want that.
@@ -43,12 +44,11 @@ Well, this way, the variable `x` will have the type `HTMLTableElement` all the w
 Then, intellisense will work like magic and you will get more helpful code completion like, for our example...
 
 ```javascript
-x.insertRow() // -> will be detected if x is HTMLTableElement, NOT if x is HTMLElement
+x.insertRow(); // -> will be detected if x is HTMLTableElement, NOT if x is HTMLElement
 ```
 
 `x` will now get code completion for all the methods and other awesomeness that `HTMLTableElement` has and `HTMLElement` doesn't.
 
-
 You see, `HTMLElement` has a lot of great methods but when working on a specific HTML element, there are more options for you if you use the correct interface (which, most probably, extends `HTMLElement`, meaning they also get its methods and other awesomeness).
 
 ## Okay... Uh, I still don't know what you're talking about though...
@@ -60,6 +60,7 @@ What are you doing here then? This is for people who know what I'm talking about
 Anyway...
 
 Here's the full list of specific HTML Element APIs:
+
 - HTMLAnchorElement
 - HTMLAreaElement
 - HTMLAudioElement
@@ -137,4 +138,3 @@ Here's the full list of specific HTML Element APIs:
 Whoa, quite a lot, right?
 
 For more info, you start with the `HTMLELement` Documentation [found here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) then read up on specific APIs from there.
-

_posts/2020-02-26-start-writing.md

@@ -1,8 +1,10 @@
 ---
+published: false
 title: "Start"
 permalink: "/start-writing"
 description: "I'm going to start writing regularly. At first, I plan to do them quick and short just to establish the routine."
 keywords: "daily"
+category: motivational
 image: "random-1"
 ---
 
@@ -35,7 +37,7 @@ You may not even know about what I'm talking about. :)
 
 But more on that later, I guess?
 
-### One other thing, on Mental Health 
+### One other thing, on Mental Health
 
 Also, this morning, I realized that:
 
@@ -47,7 +49,7 @@ Keep this two things in mind, and hopefully it will help you keep moving forward
 I know it helps me.
 
 To add to these, I also noticed that strong feelings often have an effect on the physical body. Anxiety, to me, makes the muscles in my neck and shoulders tense.
- 
+
 Though it is important to note that emotions are neither bad or good. It's how we handle them that could determine their effect on our lives.
 
 But more on this later? :)

_posts/2020-02-27-routines.md

@@ -3,9 +3,11 @@ title: "Routines"
 permalink: "/routines"
 description: "Let's talk about routines. Today I will be sharing the routines I try to observe, and the benefits I find when I actually do them."
 keywords: ""
+category: productivity
 image: "batanes-boat"
 ---
-Today I will be sharing the routines I *try* to observe, and the benefits I find when I actually do them.
+
+Today I will be sharing the routines I _try_ to observe, and the benefits I find when I actually do them.
 
 Spoiler Alert: I am not talking about skin-care routines, so sorry if that's what you are looking for.<!--more-->
 
@@ -21,7 +23,7 @@ Worse, if you don't get on top of life soon, you may just find things you care f
 
 Most of the time, even just going through the day feels like sailing on a boat with strong waves crashing all around you.
 
-Because, we all know, there are things we *want* to do, and then there are things that we *need* to do.
+Because, we all know, there are things we _want_ to do, and then there are things that we _need_ to do.
 
 And sadly, not everything can fit the day.
 
@@ -31,7 +33,7 @@ It is never too late to start thinking about **routines**.
 
 Routines will be the anchor upon which we will establish our daily lives.
 
-If you have some routines established, you will give yourself some "quick wins" that will help give you the daily boost to *get the ball rolling*.
+If you have some routines established, you will give yourself some "quick wins" that will help give you the daily boost to _get the ball rolling_.
 
 And once you get that ball rolling, that is when you can expect to get some productivity kill streaks.
 
@@ -72,4 +74,4 @@ What positive change do you want to happen in your life and what activity do you
 
 Just remember, we are most productive when we feel positive about ourselves.
 
-And observing healthy routines consistently can most definitely help you get the motivational boost you need to face the rest of your day --your *life* even. :)
+And observing healthy routines consistently can most definitely help you get the motivational boost you need to face the rest of your day --your _life_ even. :)

_posts/2020-02-28-weakness.md

@@ -3,6 +3,7 @@ title: "Weakness"
 permalink: "/weakness"
 description: "We all have things that hold us back from reaching our goals."
 keywords: ""
+category: motivational
 image: "tokyo-temple"
 ---
 
@@ -12,7 +13,7 @@ What made me watch longer was that despite his difficulty and seeming pain, he w
 
 When he slightly calmed down from coughing, he lifted the cigarette up to his mouth and puffed twice, triggering his cough once again.
 
-*Why?* I wondered.
+_Why?_ I wondered.
 
 It's likely he knew that the thing in his hand is the very cause of his discomfort.
 
@@ -42,7 +43,7 @@ I have been fortunate enough to have friends who trust me with their stories. An
 
 We really cannot judge others based on our limited understanding of their personal battles.
 
-At the end of the day, we are all just fighting  our own weaknesses.
+At the end of the day, we are all just fighting our own weaknesses.
 
 What I can only do is share from my perspective.
 

_posts/2020-02-29-influence.md

@@ -3,6 +3,7 @@ title: "Influence"
 permalink: "/influence"
 description: "If it is outside your circle of influence, do not waste time and energy."
 keywords: ""
+category: motivational
 image: "team-lab"
 ---
 

_posts/2020-03-01-growth.md

@@ -3,6 +3,7 @@ title: "Growth"
 permalink: "/growth"
 description: "Healthy growth is always bi-directional."
 keywords: ""
+category: motivational
 image: "trees"
 ---
 

_posts/2020-04-07-hardships.md

@@ -3,6 +3,7 @@ title: "Hardships"
 permalink: "/hardships"
 description: "I hope that as we complain about our individual situation this also moves us to think about others."
 keywords: ""
+category: motivational
 image: "egg"
 ---
 

_posts/2020-04-09-reading.md

@@ -4,6 +4,7 @@ permalink: "/reading"
 description: "I have been striving to rekindle my love for reading books and it has felt so good."
 keywords: ""
 image: "reading"
+category: motivational
 image-attrib: Daria Shevtsova
 image-attrib-url: https://www.pexels.com/@daria
 ---

_posts/2021-03-17-simple-thoughts.md

@@ -3,6 +3,7 @@ title: "Simple Thoughts I Remind Myself"
 permalink: "/simple-thoughts"
 description: "This is now a typical set up for work, play, and everything in between."
 keywords: ""
+category: motivational
 image: "little-corner"
 image-attrib: "Instagram: @ayoayco"
 ---

assets/main.scss

@@ -41,6 +41,10 @@ body {
   }
 }
 
+.category-head {
+  text-transform: capitalize;
+}
+
 header.site-header {
   background: rgba(141, 191, 66, 0.97) !important;
   width: 100%;
@@ -531,6 +535,24 @@ table.image caption {
 
 .blog-post {
   &__header {
+    &__category {
+      span {
+        a:hover {
+          text-decoration: none;
+          color: #bb4a03;
+          border-bottom: solid 3px #bb4a03;
+        }
+        a {
+          text-transform: uppercase;
+          padding: 3px;
+          border-bottom: solid 3px #333;
+          width: auto;
+
+          font-size: small;
+          color: #333;
+        }
+      }
+    }
     &__title {
       --x-height-multiplier: 0.342;
       --baseline-multiplier: 0.22;
@@ -538,7 +560,7 @@ table.image caption {
       font-weight: 900;
       font-style: normal;
       font-size: 56px;
-      margin: 10px 0 10px -2.63px;
+      margin: 0 0 10px -2.63px;
       line-height: 1.04;
       padding-top: 5px !important;
     }

category.html

@@ -0,0 +1,23 @@
+---
+layout: page
+permalink: /categories/
+title: Categories
+---
+
+<div>
+  {% for category in site.categories %}
+  <div>
+    {% capture category_name %}{{ category | first }}{% endcapture %}
+    <div id="#{{ category_name | slugize }}"></div>
+
+    <h3 class="category-head">{{ category_name }}</h3>
+    <ul>
+      {% for post in site.categories[category_name] %}
+      <li>
+        <h4><a href="{{ post.url | relative_url }}">{{post.title}}</a></h4>
+      </li>
+      {% endfor %}
+    </ul>
+  </div>
+  {% endfor %}
+</div>

entertaining.html

@@ -0,0 +1,56 @@
+---
+layout: category
+category-name: entertaining
+---
+
+<h1>Entertaining Posts</h1>
+
+<div class="blog-home">
+  {% if site.categories.entertaining.size > 0 %}
+  <ul class="blog-home__list-items">
+    {% for post in site.categories.entertaining %}
+    <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.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>
+  {% else %}
+  <span>No posts to show.</span>
+  {% endif %}
+</div>

motivational.html

@@ -0,0 +1,56 @@
+---
+layout: category
+category-name: motivational
+---
+
+<h1>Motivational Posts</h1>
+
+<div class="blog-home">
+  {% if site.categories.motivational.size > 0 %}
+  <ul class="blog-home__list-items">
+    {% for post in site.categories.motivational %}
+    <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.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>
+  {% else %}
+  <span>No posts to show.</span>
+  {% endif %}
+</div>

productivity.html

@@ -0,0 +1,56 @@
+---
+layout: category
+category-name: productivity
+---
+
+<h1>Productivity Posts</h1>
+
+<div class="blog-home">
+  {% if site.categories.productivity.size > 0 %}
+  <ul class="blog-home__list-items">
+    {% for post in site.categories.productivity %}
+    <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.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>
+  {% else %}
+  <span>No posts to show.</span>
+  {% endif %}
+</div>

technology.html

@@ -0,0 +1,56 @@
+---
+layout: category
+category-name: technology
+---
+
+<h1>Technology Posts</h1>
+
+<div class="blog-home">
+  {% if site.categories.technology.size > 0 %}
+  <ul class="blog-home__list-items">
+    {% for post in site.categories.technology %}
+    <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.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>
+  {% else %}
+  <span>No posts to show.</span>
+  {% endif %}
+</div>