<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) { %>
                <% var data = { post: page, size: 12, image: `/${page.slug}/hero.jpg` }%>
                <%- partial('_partial/content-card', data) %>
            <% } else if (i == 2 || i == 3) { %>
                <% var data = { post: page, size: 6, image: `/${page.slug}/cover.jpg` }%>
                <%- partial('_partial/content-card', data) %>
            <% } else { %>
            <% var data = {post: page, size: 4, image: `/${page.slug}/cover.jpg` }%>
                <%- partial('_partial/content-card', data) %>
            <% } %>
        <% }) %>
    </div>
</div>
<%- partial('_partial/about-author') %>
<%- partial('_partial/contact-form') %>