Alex Lakatos 🥑

Posted on May 6, 2020

New personal site, who this?

#showdev #discuss #webdev

This one has been long overdue, but my personal website finally got a makeover. https://alexlakatos.com/

It used to look like this:

I've set it up with Jekyll, a stock Material theme and GitHub Pages about 4 years ago. It was clunky, Material was already dated when I made it, and it was slow to build. You could say I didn't really love it, but I needed something in a pinch and it did the trick.

I've been putting off doing something with it for a while now, and the biggest mental blocker has been that I didn't want to go stock theme again. It is supposed to be an expression of myself in digital form, and I'm not exactly stock.

As luck would have it, Hui Jing was bored and offered to help me out, so I grabbed this opportunity to get to a state where I love my personal website.

Here's how it looks now:

Hui Jing wrote more about the process and the "Artisanal CSS" magic she's worked on it in a blog post:

The one in black and orange

Chen Hui Jing ・ May 6 '20 ・ 6 min read

#webdev #css

I've migrated it from Jekyll & GitHub Pages to Hugo & Netlify. The main reason for looking for a change was the build time. I don't have that many pages (under 100), but the build time was in minutes. Moving to Hugo and Netlify has shaved that down considerably, to 20 seconds.

I've also added a little pun in it, in the sense that as a JavaScript person I haven't written any JavaScript for my own website, it's just HTML & CSS. 😅

I love the way my personal site looks right now, and as Hui Jing put it, I love the fact that "this is not industrial mass-produced CSS. This is customised CSS that only works well for this particular site."

And because Hui Jing is still bored, stay tuned, it's getting a light mode on top of the dark mode. 😅 [Later edit: this already happened because Hui Jing and Wei got bored faster than expected. 😊]

I'm curious about what other people are using for their websites, from the stack, and hosting all the way to the look and feel. Please leave a comment with your personal website and something you really like about it. I'm sure other people around here are looking for inspiration, it's not just me!

Top comments (23)

Benjamin Raffetseder • May 6 '20

I really love the design! It kinda reminds me of the new design of the shoptalkshow, I bet you'd like the visuals their!:D

Btw I noticed that your picture under the about page isn't linked correctly.

Also here is my website/portfolio. I still need to add at least English language support. I'm also planning to add some little gimmicks. But so far this my most favorite iteration so far. I think I rebuilt my site around 8 times. 😅

Alex Lakatos 🥑 • May 6 '20

Thanks for spotting that, I forgot to add a conditional in the template to check for images being declared in the frontmatter 😅

Didn't know about shoptalkshow.com/, but wow, does it look pretty.

What's the current iteration of yours built on?

Benjamin Raffetseder • May 6 '20

You're welcome, mate!:D
The first iterations were built with just HTML and CSS. Then I switched to Drupal to be more flexible with my content. But I wanted something lighter than this "big" monolithic system. So I switched gears again. 😅

The current iteration is built with Cockpit CMS (a open source headless CMS) and Vue on the frontend.

Alex Lakatos 🥑 • May 6 '20

And I've just pushed a fix to that issue, along with a light mode switch, thanks again for spotting it.

Bayu Angora • May 6 '20 • Edited

A minutes build time with olny under 100 posts. That's really slow.

Alex Lakatos 🥑 • May 6 '20

yeah, and it was pretty inconsistent, ranging from 2 to 10 minutes.

Shannon Crabill • May 6 '20 • Edited

I like it! Very old, computer terminal vibe. And the dark mode by default is a nice visual break. ~~As a heads up, there may be a broken image at the top of the about page~~ Fixed!

My current site is HTML & CSS only, with the blog on Wordpress. I like the minimalness of the front-end and the low-key reference to my favorite.

My plan is to move everything to a static site set up, probably 11ty, but I haven't found the time to get deep into that yet. Maybe I'll stream the learn and build process. 🤔

Alex Lakatos 🥑 • May 6 '20

Yeah, that's what I went for, a terminal vibe. Thanks for spotting that issue, I forgot to add a conditional in the template to check for images being declared in the frontmatter 😅

I've seen a few mentions of 11ty lately, just in this post are a couple so far, I think I'm going to give it a try for the rebuild of developeravocados.net. It would be awesome if you streamed your process!

Alex Lakatos 🥑 • May 6 '20

And I've just pushed a fix to that issue, along with a light mode switch, thanks again for spotting it.

Alex Lakatos 🥑 • May 6 '20

I was looking at Gridsome as an alternative, I've given Nuxt & Vue a spin in the recent past. But the simplicity of Hugo, and the fact that Hui Jing had a nifty migration guide/gotchas, those were the main factors for going Hugo.

Bayu Angora • May 6 '20 • Edited

Gatsby is slower than Hugo. But latest Gatsby version can build faster with incremental build feature.

Alex Lakatos 🥑 • May 6 '20

That's interesting, I've seen an incremental mode on Hugo as well, but I don't think I turned that on in Netlify.

I didn't do a deep build speed research when I chose the static site generator, but that's just because most things out there are faster than Jekyll 3.x. And Github Pages wasn't going to support Jekyll 4.

Bayu Angora • May 6 '20

What's your setting to implement Hugo incremental build?

Alex Lakatos 🥑 • May 6 '20

It's more of a cache than an incremental build. Changing my partials to use partialCached instead decreased build time from 20 something seconds to 15.