This week-end I was at the in-laws and had some free time, It's been a while since I wanted to create my personal portfolio site, so I decided to give it a try.

TL;DR
I used hugo to create my portfolio: https://lokile.dev/

Step 1: choice of the domain name.

I'm lucky because I can abbreviate my name "Loik Le Devehat" to "Loik Le Dev" which in French means I'm a developer!
Also my nickname is Loki. I wanted to use loki.dev which would have been super convenient but it was already taken recently by some German guy.

Hence I chose lokile.dev which I'm not entirely satisfied of, but that's ok I can change it later.

Step 2: Static site generation

I consider myself an experienced developer (in embedded systems) but I never learned html/css/js or how to make a website. Through reading articles on dev.to I learned about static site generation. I started looking at the list of generators, only to discover that there are thousands of them in many different languages, which started to scare me.
Seeing that the blog at loki.dev used hugo, I looked at the theme gallery and I was amazed at how cool the templates are!

My choice went to the creative theme because it's a beautiful one pager with a cool modal grid for the portfolio which is enough for my first site, you know: Keep It Simple.

Step 3: Wasting time

After reading the getting started guide and testing the theme, I wanted to write the different contents for the projects I wanted to show on the site.

The guide said that you generally write contents in markdown in the contents folder, but the theme only allows editing yaml files in the data folder.

That's not all, the description field is a one line string. And I thought I could edit rich markdown with new lines etc.
And also, really? You have to write markdown text in a yaml file which is parsed into an html template with some js and css to make it pretty, without forgetting that the project config file is config.toml...
That's a crazy number of languages for a simple website!

Please pick one markup language and stick to it, why the need of 3 different syntax ??

So here started the hurdle of trying to do what I wanted. I don't give up easily though.

Markdown in yaml

To avoid writing a big single line in the description field, I discovered the syntax for "Literal Block Scalar".

description: |
   # This is a markdown title
   **and also some bold text**

So yeah problem one solved!

Step 3: Icons and font-awesome

After that I wanted to change the default icons used for the services section. Normally you just replace the icon field in the project config.toml:

[[params.services.list]]
    icon = "fa-mortar-board"

I chose a new icon on font-awesome site, but it didn't show up on the generated site.

After some digging in the code of the theme I realized that it uses fontawesome v4.7 whereas the current version is v5.12. I tried to update the font of the theme by downloading the css, the .ttf files etc and editing head.html:

<link rel="stylesheet" href="{{ "font-awesome/css/font-awesome.min.css" | absURL }}" type="text/css">

but without success.

Finally I just picked icons from the working version.

Step 4: Gifs

Ok the theme is cool, it's responsive, there are modals and all, but it lacked some spice, so I decided to make gifs!
I spent really too much time trying to make the perfect gifs from videos. I needed to find the proper tool for the job.
Did you know you can use blender as a video sequence editor and the Bligify plugin to export them as gifs?

They were too heavy so I tried to make them smaller and changed the theme to display a picture in the popups instead of the gif.
The site is still slow to load, if anyone has suggestions that would be appreciated!

Step 5: Polish and upload

The text on the hero section was too thin and transparent, so I dug in the creative.css file to find the correct section to edit.

Then it was just a matter of hugo -D to generate the public folder and upload it to my hosting service.

Big shout out to hugo makers for creating such a powerful and simple to use tool!

What I learned

The lesson here is that even though I don't know these languages I wasn't afraid of reading the html and css files, try to understand a bit the structure and find where I needed to edit to obtain the desired behavior.

Don't be afraid to break things! I mean it's OK to edit the code and see the result through trial and errors. It was refreshing for me, it's less pressure to have a display bug in html than when you have a computation error in an exoskeleton which might harm the user!

What next?

Now I want to do more to improve the site, add more portfolio articles, try to embed youtube videos.
You probably noticed that the site is only in French for now, it would be nice to have an English translation. Probably add some blog section, the possibilities are endless! But another more complete theme might be required.

What to you think of the result? Are the gifs too much?