This portfolio

Every few years a new portfolio: what did I do differently this time?

Every few years, I take time to create a completely new portfolio website. Time flies by, taste changes and... it's just fun to do!

For this portfolio, I've had one big requirement: it should be extremely easy to maintain.

Content maintainability: Markdown & yaml

For my previous portfolio's, I'ved used a database to keep all contents in.

This time, I want to make it easier:

• no database
• a markdown folder, containing
  • an index.yml, which contains a reference to every project, lab, training and blogpost
  • for each project etc: a markdown file
• a resources folder, containing images, videos, etc.

I copy these folder on an easy-to-reach location on my server, mount these in a Docker image containing my site's code, and done!

This way, adding content is literally editing 2 files and uploading some images, which is awesome.

Rendering and extending markdown

We have markdown files, cool. How to render them in a nice way?

As basis, I use the Marked library. But I need something more. The marked framework is nicely extensible.

• videos => I "misuse" the image declaration in markdown, to also support videos. When the url of an image tag ends with a video extension, it will render a video html tag.
• slideshows => I've added a web component, containing a Splide slideshow. Since you can write html in markdown, I can use this web component directly
• code => I've replaced the default code rendering with a custom one, using Prism.

And of course, the necessary css to make things look neat.

Code maintainability: very light back-end with Sveltekit

I also want to maintain as less code as possible.

Sveltekit makes it really easy to combine Svelte with server-side rendering functionalities.

• The back-end should do nothing more than transforming Markdown into HTML. I can write it with no more than a few server.ts files.
• The front-end is composed of pages and components. Nothing too fancy. Ow yes, and that one custom web component for the slideshows.

I see one risk: javascript frameworks have the tendency to change, often and a lot. And yes, while writing this portfolio in Svelte 4, breaking version 5 came out. Hmm, something to pick up later, let's get this version out in the wild!