DEV Community

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!

Discussion (25)

pic
Editor guide
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 πŸ₯‘ Author

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 πŸ₯‘ Author

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

Collapse
scrabill profile image
Shannon Crabill

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 πŸ₯‘ Author

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 πŸ₯‘ Author

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

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

Collapse
lakatos88 profile image
Alex Lakatos πŸ₯‘ Author

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

Collapse
mattwaler profile image
Matt Waler

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

Thread Thread
lakatos88 profile image
Alex Lakatos πŸ₯‘ Author

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

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

Thread Thread
lakatos88 profile image
Alex Lakatos πŸ₯‘ Author

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 πŸ₯‘ Author

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 πŸ₯‘ Author

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
gregfletcher profile image
Greg Fletcher

Looks amazing! Love the retro vibe!

Collapse
lakatos88 profile image
Alex Lakatos πŸ₯‘ Author

Thanks, that's what I was going for!

Collapse
mattwaler profile image
Matt Waler

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

Collapse
karanja_b4ha profile image
Baha_dev

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

Collapse
lakatos88 profile image
Alex Lakatos πŸ₯‘ Author

Thanks. That was mostly Hui Jing!

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 πŸ₯‘ Author

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