How Can Beginners Build a Portfolio Grid in Jekyll Using Markdown and Data Files

Why Use a Portfolio Grid in Jekyll?

A portfolio grid helps showcase your work in a clean and visual format. Whether you're a designer, developer, writer, or creative, it’s a simple way to turn static content into a dynamic display—all hosted for free using Jekyll and GitHub Pages.

What Will You Build?

A responsive grid that displays portfolio items using only:

Markdown files (for detailed pages)
YAML data (for the grid)
A simple HTML layout

Step-by-Step: Creating a Portfolio Grid with Jekyll

Step 1: Add a Collection for Portfolio


_config.yml


collections:
  portfolio:
    output: true
    permalink: /portfolio/:name/

Step 2: Create Markdown Files for Each Project

Create this folder:


/_portfolio/

Then add files like:


/_portfolio/landing-page.md


---
title: "Landing Page Design"
image: "/assets/portfolio/landing.jpg"
description: "Modern landing page built with HTML and CSS"
date: 2024-03-10
---

Each file becomes a full project page. You can write details below the front matter using Markdown.

Step 3: Create the Portfolio Grid Page


/portfolio.html


---
layout: page
title: "My Work"
permalink: /portfolio/
description: "A showcase of selected projects"
---

Step 4: Build the Grid Layout with Liquid


<style>
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.portfolio-item {
  border: 1px solid #ddd;
  padding: 1rem;
  text-align: center;
}
.portfolio-item img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
</style>


<div class="portfolio-grid">
  {% for item in site.portfolio %}
    <div class="portfolio-item">
      <a href="{{ item.url }}">
        <img src="{{ item.image }}" alt="{{ item.title }}">
        <h3>{{ item.title }}</h3>
      </a>
      <p>{{ item.description }}</p>
    </div>
  {% endfor %}
</div>

Step 5: Add Images to Your Portfolio

Place your images in:


/assets/portfolio/

Use consistent sizes for a clean look. Try 640x400 or similar.

How to Link This Page from Your Site


<a href="/portfolio/">Portfolio</a>

Optional: Add Tags or Categories to Projects


---
title: "Landing Page"
tags: [html,css,design]
---

You can later filter by tag or create tag-specific grids if needed.

Optional: Add a Button to View Each Project


<a href="{{ item.url }}" class="btn">View Project</a>

Bonus: Use YAML Data Instead of Markdown (Alternative)

If you prefer not to create Markdown files, use _data/portfolio.yml:


- title: "Landing Page"
  image: "/assets/portfolio/landing.jpg"
  description: "Modern responsive layout"
  url: "/portfolio/landing/"

Then loop like this:


{% for item in site.data.portfolio %}
  <div class="portfolio-item">
    <a href="{{ item.url }}">
      <img src="{{ item.image }}">
      <h3>{{ item.title }}</h3>
    </a>
    <p>{{ item.description }}</p>
  </div>
{% endfor %}

Conclusion: Showcase Your Work Easily with Jekyll

With just Markdown and data files, you can build a clean, responsive portfolio page without learning JavaScript. It's simple, scalable, and works perfectly with GitHub Pages.

FlickLeakedFlow🕒📗