jamesperet-website-2020/themes/james-theme/layout/blog.ejs

<div class="container bottom-spacer">
    <div class="row up-spacer bottom-spacer">
        <div class="col-12 text-center">
            <h1 class="display-3" style="margin-bottom: 0px;">
                <b>J1X</b> <span class="font-weight-lighter">BLOG</span>
            </h1>
            <h4><small class="text-muted">Technical writings by James Peret</small></h4>
        </div>
    </div>
    <div class="row blog-posts">
        <% var i = 0 %>
        <% order_posts(site.posts).forEach(function(page) { %>
            <% i += 1 %>
            <% if(i == 1) { %>
                <div class="col-12">           
                    <a href="<%= url_for(page.path) %>" class="text-decoration-none">
                        <div class="card">
                            <img class="img-fluid" src="<%= `/images/hero/blog/${page.image.feature}` %>">
                            <div class="card-body">
                                <h5 class="card-title"><%= page.title %></h5>
                                <p class="text-muted">
                                    <i><%= timeAgo(new Date(page.date)) %></i>
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
            <% } else if (i == 2 || i == 3) { %>
                <div class="col-6">           
                    <div class="card">
                        <a href="<%= url_for(page.path) %>" class="text-decoration-none">
                            <img class="img-fluid" src="<%= `/images/thumbnails/blog/${page.image.feature}` %>">
                            <div class="card-body">
                                <h5 class="card-title"><%= page.title %></h5>
                                <p class="text-muted">
                                    <i><%= timeAgo(new Date(page.date)) %></i>
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
            <% } else { %>
                <div class="col-4">           
                    <div class="card">
                        <a href="<%= url_for(page.path) %>" class="text-decoration-none">
                            <img class="img-fluid" src="<%= `/images/thumbnails/blog/${page.image.feature}` %>">
                            <div class="card-body">
                                <h5 class="card-title"><%= page.title %></h5>
                                <p class="text-muted">
                                    <i><%= timeAgo(new Date(page.date)) %></i>
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
            <% } %>
        <% }) %>
    </div>
</div>
<%- partial('_partial/about-author') %>
<%- partial('_partial/contact-form') %>