Hello, I'm Stanko, a software engineer in Belgrade, making digital products and generative art.

Jekyll "Read more" link


It is nice to use post.excerpt instead of post.content on your Jekyll home page, but then users can’t see if there is more to read until they open the whole post.

To add Read more link, you can use this simple snippet.

{% if post.excerpt != post.content %}
    <a href="{{ site.baseurl }}{{ post.url }}">Read more</a>
{% endif %}

Jekyll and Gulp workflow


Update, November 2017

I don’t use this setup anymore, it might be outdated, proceed with caution.

Original post

As you probably know this blog is powered by Jekyll. It is a really nice platform, but it lacks a few things I’m used to during development. First one is live reload on file changes (and injecting CSS), using SASS, autoprefixer, ES6…

Read more

3D Rotating cubes hover effect

Again, I’ve seen it somewhere on the internet and recreated it. This one uses jQuery, although I plan to rewrite it to vanilla JavaScript.

It switches between two sides of the cube, every time you hover. Depending from which side cursor entered the cube, it will rotate in opposite direction. It is fully responsive, and on touch devices, direction depends of where you tap.

Cube side is a regular div, and you can put any type of content in it.

Demo - 3D Rotating cubes hover effect

Read more

Custom Jekyll pagination

Jekyll comes with simple pagination which has only Newer and Older links. I wanted a little bit more, now pagination shows at least five pages, with current in the middle. On the larger screens there are also first and last page links. Newer and Older links are, of course, still there.

Check the gist with the code.

You can see it at the bottom of this website, or just check the screenshot below:

Custom Jekyll pagination

Animated login and signup forms

Well I saw pretty nice mockup on Dribbble and decided to make it for fun. It didn’t include mobile/responsive solution, so I came up with my own.

Animated onboarding demo

Check the demo.

This is pure CSS solution - it uses :target selector for changing states. Find more about :target on MDN. This is neat, as it also can be bookmarked on both states, and browser button work too.

Grab the code on GitHub.