loading...
Cover image for New personal site, who this?

New personal site, who this?

lakatos88 profile image Alex Lakatos πŸ₯‘ ・2 min read

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!

Posted on by:

lakatos88 profile

Alex Lakatos πŸ₯‘

@lakatos88

Made http://puns.dev. Half of @DevRelAvocados. Reformed #JavaScript person, #DevRel πŸ₯‘Manager at @fidelhq by day, @mozillareps & @moztechspeakers by night.

Discussion

markdown guide
 

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

 

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?

 

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.

 

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

 

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. πŸ€”

 

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!

 

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

 

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

 

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

 

I'm sure a Next/Gatsby/Nuxt site would take even longer!

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.

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

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.

What's your setting to implement Hugo incremental build?

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.

 

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

 
 

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

 

Looks amazing! Love the retro vibe!

 

Thanks, that's what I was going for!

 

I recently converted from Nuxt --> Eleventy and I'm also loving the considerably faster build time, simpler project structure, and smaller build files!

 

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

 

Thanks. That was mostly Hui Jing!

 

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. πŸ€”

 

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