Introduction

This is a quick tutorial to create a showcase of your skills to add to your Jekyll website, as an addition to your resume or to auto-assess you skills. They are expressed in a scale from 0 to 5, with partial scores.

This solution is entirely static and uses no JavaScript, only the liquid template language and produces pure CSS and HTML code.

HTML Code

The idea is to have a list of “skills” (in this case programming languages), each with a name, an ID (for example to get an icon) and a level (0 to 5 with an increment of 0.5) and the values tabulated for display.

The skill level is represented by 5 squares, each colored or not. The color is based on the level, from dark yellow to dark green, to gray if not colored.

Each square has a base class, .skill-notch, for the general styling and the default Gray color (lightgray). Cycling through the levels, a check is made and assigns the .skill-x class to the squares that represent a full level, and .skill-half-x to the half levels.

The code is reported below. Adapt it to your own needs.

<table>
    {% for item in site.data.skills.items %}
        <tr>
            <!-- "no-border" class needed if you must override a setting from another stylesheet -->
            <td class="no-border"><img class="skill-icon" src="/media/2024/programming-{{ item.id }}.png" alt="{{ item.id }} logo"></td>
            <td class="no-border">{{ item.name }}</td>
            <td class="no-border">
                {% for i in (1..5) %}
                    {% assign rounded_level = item.level | ceil %}
                    <!-- equivalent to rounded_level >= i and isInteger(item.level) -->
                    {% if rounded_level > i or rounded_level == i and rounded_level == item.level %}
                        <div class="skill-notch skill-{{ rounded_level }}"></div> <!-- full notch -->
                    <!-- if rounded_level != item.level, that means item.level is not integer -->
                    {% elsif rounded_level == i and rounded_level != item.level %}
                        <div class="skill-notch skill-half-{{ rounded_level }}"></div> <!-- half notch -->
                    {% else %}
                        <div class="skill-notch"></div> <!-- empty notch -->
                    {% endif %}
                {% endfor %}
                <!-- added for debugging -->
                ({{ item.level }})
            </td>
        </tr>
    {% endfor %}
</table>

Styling

The style-sheet is relatively straight-forward: there are five classes, one for each level; full squares have a solid color, half squares have a 50% gradient, with sudden transition from the color to background.

.skill-notch
{
    width: 1em;
    height: 1em;
    border-radius: 3px;
    background-color: lightgray;
    margin: 0.2em;
    float: left;
}

.skill-icon
{
    width: 1.5em;
    height: 1.5em;
}

.no-border
{
    border: 0;
}

.skill-1 { background-color: #d0a02d; }
.skill-2 { background-color: #d9c452; }
.skill-3 { background-color: #a6ea2c; }
.skill-4 { background-color: #36ce16; }
.skill-5 { background-color: #1a9500; }

.skill-half-1 { background: linear-gradient(to right, #d0a02d 50%, lightgrey 50%); }
.skill-half-2 { background: linear-gradient(to right, #d9c452 50%, lightgrey 50%); }
.skill-half-3 { background: linear-gradient(to right, #a6ea2c 50%, lightgrey 50%); }
.skill-half-4 { background: linear-gradient(to right, #36ce16 50%, lightgrey 50%); }
.skill-half-5 { background: linear-gradient(to right, #1a9500 50%, lightgrey 50%); }

Practical demo

Below is an example of this code using some programming languages. The data is taken from a file called skills.yml in the folder _data, like the standard Jekyll structure. The content of the file is as such:

items:
  - name: C#
    id: cs
    level: 4

  - name: Python
    id: py
    level: 4
    
    # ...

	C#	(4)
	Python	(4)
	UNIX shell scripting	(3.5)
	C/C++	(3)
	LaTeX	(3.5)
	VHDL	(4.5)
	Matlab/simulink	(3.5)
	PHP	(3)
	HTML-5	(3)
	CSS	(3)
	JavaScript	(2.5)
	PowerShell	(0)
	LUA	(0.5)