It’s funny how time flies. You blink once and suddenly progress 5 years having not touched your personal website at all. Oh well, that’s “agency life” for you 🤷‍♂️

Recently though, I’ve found the drive to experiment with new tech and for a front-end developer the perfect place to do that is your personal website. So behold: a completely new version of jochemkeller.nl!

Image showing a new version of my website, jochemkeller.nl

… that looks exactly the same?

Well, in a general sense. It’s like when Apple states they’ve built the best iPhone they’ve ever built; it’s more or less the same design, but a lot has changed under the hood.

Sorry for the cheap shot, Tim 🤗 Let’s digg in!

# The stack

I’d be lying if I didn’t state that I’ve tried working on my site throughout the last 5 inactive years. The drive wasn’t there. But recently if come across Vue.js and VuePress (in that order). Both the Vue.js and VuePress sites look mostly the same, but there’s a big difference.

Image showing the logo's for Vue.js and VuePress

# Vue.js

I’ve gotten my mileage in Vue.js in some projects during my work for Elephant. For instance, the veneer overview for Leeuwenburgh utilizes Vue to generate an overview of all available veneer swatches. The reactivity Vue introduces makes it very straightforward to perform complex lay-out related tasks.

For instance, one click on a sidebar filter triggers an API request, fades out old items to indicate “you should prepare for new results”, shows you a loading spinner to reinforce the “wait for a second” idea and when the API request finishes, automatically replace the old items with new results and hide the loading spinner. All this, in +/- 10 lines of code.

Vue.js has some serious power, and I love it for it. It’s never been easier to create complex applications thanks to the straightforward syntax and architecture. It feels like it’s the jQuery of front-end frameworks (in a very good way).

# VuePress

VuePress builds on the premise of Vue to generate static sites. Essentially, the blog you are reading now is a basic markdown document that is transformed by VuePress into a webpage you can visit.

Image showing the logo's for Vue.js and VuePress

I can patch in on the render engine of VuePress to transform the content to my liking. As a front-ender with a more graphical background design is very important to me so, for instance, I wrote a component for content images called ContentImage.vue. It allows me to conditionally:

Decorative image illustrating the available option to add a caption

and

Decorative image illustrating the available option to add a subtle drop shadow

# Automaticallify deployify the siteify on Netlify

I always keep an eye open for the newest tech, but similarly like to keep tabs on new and exciting ways to serve it. The old way of pushing new changes to my site had me feeling like I was living in 1990; hand copying generated HTML to my server using FTP. There had to be another way.

Enter Netlify.

Image showing the homepage of Netlify

Netlify allows me to serve my staticly generated blog by linking the .GIT repository in which I work on it. Whenever I want to deploy changes to the site, I make them in the master environment and Netlify does it’s thing. ± 2 minutes later I get an e-mail from Netlify telling me they’ve published the changes, along other optimisations. It builds all pages, minifies the content and distributes this via a CDN to deliver rock solid performance. Switching to it has been one of the best decisions I’ve made for my personal website, and I look forward to utilizing it for other projects in the future.

One of the coolest features is that Netlify enables you to transform basic HTML inputs to dynamic forms, complete with e-mail notifications. Read more about it here, or head over to the contact page to see it in action (and let me know what you think)!

# It’s the little things…

Moving the site to VuePress isn’t the only thing I’ve done. I’ve also updated the site visually, for instance by introducing new typography into my personal visual ᴋeller identity.
The font I’ve chosen is Inter, by the talented Rasmus Andersson. I got to experiment with exciting new font features like font-feature-settings, to allow for stuff like:

  • Ligatures
    => ==> <==
  • Fractions
    1/2, 1/4, 1/8, 2/3
  • Contextual Glyphs (a.k.a. characters in boxes or circles):
    1⃝ 2⃝ 3⃝ A⃝ B⃝ C⃞ !⃞
  • Superscript & subscript:
    I float! baseline I sink!

One of the coolest things—in my opinion—are the new graphics on the top or side bar (depending on what device you view the site; topbar on smaller screens and sidebar on larger screens).

The idea of randomly generated art is very cool to me, so I’ve done a initial set-up that generates a colorful visual using Trianglify and string to HEX generation using Color Hash. It does this based on the title of the current page, so for every page title we have a unique graphic:

Image depicting 3 visual renders of the words Howdy, there and partner

This way, every page has a unique graphic and color and all I have to do to generate it is to think of a title for the page. This page had a draft title of “A fresher start”, which generated a blue graphic. Now, based on the current title, it’s pink-ish.

The ultimate goal is to make something like the Jetbrains Code2Art generator, which they use to generate destinctive art for every software productline. So. Fricking. Cool.

# Next steps

A personal site is never finished, but this blog is, for now. I’m really happy with the development so far and I look really forward to working on it some more.

As a reminder to myself and to people that are curious as to what my roadmap is:

  • More content
    Main focus point for now. I want to create a showcase of my work and an personal alternative to Instagram for sharing pictures / life events
  • Responsive images
    Recently figured the best practices out for this at my work, so this should be pretty straightforward to implement
  • Dark mode support
    To make Frank happy… 😏