Works

Each project is one Markdown file in _projects/. It gets its own page, at /works/<file name>/, and appears on the home page and the Works page through the works section (see Sections).

Add a project

1. Copy _projects/kiko.md and rename it. The file name becomes the address: bakery.md gives /works/bakery/.
2. Change the front matter and write the story below it.
3. Add the screenshot to assets/img/work/ (see below).

Delete the six sample projects when you have your own.

Front matter

---
title: "Kiko"
summary: A recipe app that keeps you cooking, not scrolling.
description: "A recipe app with a checklist and a step timer, designed for sticky hands."
client: Kiko
year: 2020
role: Design, front-end
tags: [React Native, UI]
site_url: https://kiko.example
order: 5
featured: false
image:
  src: /assets/img/work/kiko
  path: /assets/img/work/kiko-710.webp
  widths: [360, 540, 710]
  width: 710
  height: 710
  alt: Three Kiko app screens in warm colours
gallery:
  - src: /assets/img/work/kiko-screen-2
    widths: [360, 540, 710]
    width: 710
    height: 710
    alt: The ingredients checklist
---

Field	What it does
title	The project’s name. It’s the page’s heading and the card’s title.
summary	One line under the title on the project page.
description	The sentence search engines and social sharing show.
client, year, role	Shown in the details row on the project page. Leave one out to hide it.
tags	Shown on the card, and as “Stack” on the project page.
site_url	Adds a “Visit site” link on the project page. Leave it out for private work.
order	The sort order, lowest first. It also sets which project comes next. Give every project one.
featured	true shows it in the home page’s Latest Works, which lists the featured projects.
image	The large picture, used on the card and at the top of the page.
gallery	A list of more pictures, shown under the write-up, one column on phones and two on wider screens. Each has the same fields as image.

Use site_url, not url. Jekyll keeps url for the page’s own address, so a project’s url would never be shown.

The text below the front matter is the write-up, in Markdown. ## headings are styled for you.

“Next project” at the bottom of every page is the next one by order. After the last one it goes back to the first.

Pictures

image and every gallery item use the same shape:

Field	What it does
src	The path without the width, such as /assets/img/work/kiko.
widths	The widths you’ve saved, such as [360, 540, 710].
width, height	The size in pixels of the largest file. They stop the page jumping while it loads.
alt	A sentence that says what’s in the picture.
path	image only: the full file shown when the page is shared, such as /assets/img/work/kiko-710.webp.

With widths, Izar looks for <src>-<width>.webp: here kiko-360.webp, kiko-540.webp and kiko-710.webp. The browser picks the smallest one that fits. The demo’s screenshots are saved at 360, 540 and 710 pixels wide. See Pictures for how to make them.

Without widths, src is the file itself, such as /assets/img/work/kiko.jpg.

Showing projects on a page

• Home page: the works section lists the projects with featured: true, by order. The first three show unless you set limit.
• Works page: works.md uses show: all to list every project by order.
• Your own list: use items: [lewis, finaco] (file names without .md) to choose and order the cards. If you list more than three on the staggered variant, or four on the grid, set limit too.

Showing more or fewer projects on the home page

The home page’s Latest Works shows 3 projects by default. To change that:

1. Open index.md and find the section that starts with - type: works.

2. Add a limit: line, or change it if it’s already there, to the number of projects you want:

     - type: works
       variant: staggered
       heading: Latest Works
       note: Perfect solutions for digital experience
       limit: 5
       link:
         label: All projects
         url: /works/

3. Give at least that many projects featured: true. Only featured projects show on the home page, sorted by order.

4. Save, and the page updates. Restart bundle exec jekyll serve if it doesn’t.

A few things to know:

• On the staggered layout, the first project sits on the left under the heading, and every other project stacks down the right-hand column, so that column grows with each one you add. Three looks most balanced. For five or more, variant: grid (three across on wide screens) looks tidier.
• To show fewer, set limit: 1 or limit: 2. To show none, add hidden: true to the section instead.
• If you hand-pick projects with items:, limit still applies. Picking five projects with the default limit shows only the first three, so set limit: 5 as well.
• The grid variant shows 4 by default, and the same limit: line changes it.
• The Works page (works.md) uses show: all, so it lists every project whatever you set here.