DEV Community

Cover image for New personal site, who this?
Alex Lakatos πŸ₯‘
Alex Lakatos πŸ₯‘

Posted on

New personal site, who this?

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

It used to look like this:

old alexlakatos.com

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:

new alexlakatos.com

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

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)

Collapse
 
benjaminraffetseder profile image
Benjamin Raffetseder

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. πŸ˜…

Collapse
 
lakatos88 profile image
Alex Lakatos πŸ₯‘

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?

Collapse
 
benjaminraffetseder profile image
Benjamin Raffetseder

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.

Collapse
 
lakatos88 profile image
Alex Lakatos πŸ₯‘

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

Collapse
 
bayuangora profile image
Bayu Angora • Edited

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

Collapse
 
lakatos88 profile image
Alex Lakatos πŸ₯‘

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

Collapse
 
scrabill profile image
Shannon Crabill • 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. πŸ€”

Collapse
 
lakatos88 profile image
Alex Lakatos πŸ₯‘

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!

Collapse
 
lakatos88 profile image
Alex Lakatos πŸ₯‘

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

 
lakatos88 profile image
Alex Lakatos πŸ₯‘

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.

Thread Thread
 
bayuangora profile image
Bayu Angora • Edited

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

Thread Thread
 
lakatos88 profile image
Alex Lakatos πŸ₯‘

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.

Thread Thread
 
bayuangora profile image
Bayu Angora

What's your setting to implement Hugo incremental build?

Thread Thread
 
lakatos88 profile image
Alex Lakatos πŸ₯‘

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.

Collapse
 
corentinbettiol profile image
Corentin Bettiol

I did mine with vanilla PHP/HTML/css :)

Collapse
 
lakatos88 profile image
Alex Lakatos πŸ₯‘

Your logo looks really good!

Collapse
 
corentinbettiol profile image
Corentin Bettiol

Thanks! Its an old drawing I made a few years ago, I was trying to draw a manatee :D

Collapse
 
karanja_b4ha profile image
Baha_dev

I love the designπŸ”₯πŸ”₯

Collapse
 
lakatos88 profile image
Alex Lakatos πŸ₯‘

Thanks. That was mostly Hui Jing!

Collapse
 
gregfletcher profile image
Greg Fletcher

Looks amazing! Love the retro vibe!

Collapse
 
lakatos88 profile image
Alex Lakatos πŸ₯‘

Thanks, that's what I was going for!

Collapse
 
simulieren profile image
Simon Halimonov

A minute build time is really nice! Does HUGO also do image optimisations?

My new GatsbyJS sites takes minutes, but it also generates a huge amount of optimised images. πŸ€”

Collapse
 
lakatos88 profile image
Alex Lakatos πŸ₯‘

Hugo has a image processing pipeline, I haven't gotten around to turning it on in my website yet.
gohugo.io/content-management/image...