Jekyll Portfolio Generator

Getting Started

Installation

Install portfolio_generator.rb in your plugins directory (_plugins).

Configuration

Set your config options:

• portfolio_dir - The directory in which the projects will be generated. Defaultsto portfolio.

• skip_related_projects - If true, it will not generate related projects foreach project. Defaults to false.

• related_project_keys - An array of project keys that will be used to computerelated projects. This is required if you want to generate related projects.There is no default.

• related_min_common - As a decimal, the minimum percentage of keys that shouldbe common for a project to be considered related. Defaults to 0.6.

Sample _config.yml:

# ...

portfolio_dir: "projects"

related_project_keys: ["category", "technology"]

related_min_common: 0.7

# ...

Layout

Create a layout file named project.html in your _layouts folder that will be usedfor the project pages.

Sample project.html:

<h2>{{ page.title }} <span>{{ page.category }}</span></h2>

<p>{{ page.description }}</p>

<ul>
    {% for technology in page.technology %}
    <li><a>{{ technology }}</a></li>
    {% endfor %}
</ul>

The project page will have access to any keys you use in your project data files,so to access them you just need to use the page variable (e.g. {{ page.KEY }}).

Data Files

This plugin assumes that the project data files will be inside a projects directoryinside of the _data directory. Each project must have its own file, and eachproject must have a key named title.

Sample Project Data File

Tokyo Drift Cats.yml:

title: Tokyo Drift Cats
description: An illegal street racing game but with cats.
category: game development
technology:
    - C++
    - Git

Using Projects in Templates

If you want to include your projects in your index.html or portfolio.html,you can access your projects like this:

{% assign projects = site.data.projects | get_projects_from_files | sort:'date' %}
{% for project in projects reversed %}
    <!-- portfolio-item -->
    <h2>{{ project.title }} <span>{{ project.category | slugify }}</h2>

    <a href="/{{ project.dir }}">
        <img src="{{ project.image.url }}" alt="{{ project.image.alt }}" title="{{ project.image.title }}">
    </a>
    <!-- portfolio-item -->
{% endfor %}

This will show your projects with the most-recent being first (if you include the datein your project files). I recommend always using the get_projects_from_files filter.Without it, you'll have to do this, and the projects won't be in reverse chronologicalorder:

{% for project_file in site.data.projects %}
    {% assign project = project_file[1] %}
    <!-- portfolio-item -->
    <h2>{{ project.title }} <span>{{ project.category | slugify }}</h2>

    <a href="/{{ project.dir }}">
        <img src="{{ project.image.url }}" alt="{{ project.image.alt }}" title="{{ project.image.title }}">
    </a>
    <!-- portfolio-item -->
{% endfor %}

Related Projects

Related projects are generated for each project by computing the number of matchesbetween the projects and adding the projects as related if they are greater thanor equal to the minimum required. They are sorted such that the most relatedappear first.

Using Related Projects in Templates

Assuming this is in the project.html layout file:

{% if page.related_projects.size > 0 %}
<h3>Related Projects</h3>
{% for project in page.related_projects %}
<a href="/{{ project.dir }} ">
    <img src="{{ project.image.url }}" alt="{{ project.image.alt }}" title="{{ project.image.title }}">
</a>
{% endfor %}
{% endif %}

The plugin adds all related projects, so if a project has a lot of related projects,you might have to add a limit, like so:

{% if page.related_projects.size > 0 %}
<h3>Related Projects</h3>
{% for project in page.related_projects limit:3 %}
<a href="/{{ project.dir }} ">
    <img src="{{ project.image.url }}" alt="{{ project.image.alt }}" title="{{ project.image.title }}">
</a>
{% endfor %}
{% endif %}

More Examples

For more examples, check out the repofor codeinpink.github.io! The source code is inthe source branch and the generated content is in the master branch.