Why I created my personal website with pure HTML/CSS

My new personal website is now up and running (hopefully) and instead of relying on a 3rd-party website builder, this time it’s handcrafted – with just HTML and CSS. There are a few reasons why I chose to purposefully avoid JavaScript or PHP.

Probably the biggest is that it was summer and I was bored. It was kind of a challenge to myself to build a website with pure HTML/CSS. My website is of course static, so it wasn’t that big of a deal, but some things definitely would’ve been easier with JS, but more on that later.

Second, to improve performance. In my personal opinion, developers have gotten pretty sloppy with resource usage. We see more and more apps built with things like Electron, which definitely have their merits, but I think everyone agrees that they simply consume more resources than if it had been a native app. Similarly, web sites use massive libraries with massive functionality. Progressive apps might actually use them, but not my humble portfolio.

Third, ease of mind. No JS library vulnerabilities.

Fourth, complete control. Previously, I used Webflow, which is a great tool, but it didn’t support everything. For example, there was no native dark mode support. You could work around this by injecting some CSS to the global header, but it was pretty hacky. And while I’m sure that Webflow will eventually add native dark mode support and it’ll probably be great, now I don’t need to wait anymore. And whatever new technology comes out, I can adopt it straight away.

So, how did it work out? Well, building it wasn’t that big of a hassle (again, it’s a simple site). Still, there were some cases I really would’ve liked to sprinkle some JS on. One was the navigation bar. Right now, I need to manually set which nav bar item is the active item. Second was that HTML doesn’t have a robust reusable element paradigm, so to get the nav bar and footer to every page, the same HTML needs to be on every page. Hopefully in the future we get a good way to reuse HTML elements, because I’m not touching iframe.

Performance is excellent, though. Here’s Lighthouse Measure:

1.5s time to interactive? I’ll take it

Pretty good. Currently, the website is hosted with Firebase and proxied through Cloudflare. And yes, accessibility and SEO could use some work, but that’s another story. But for now, I’m happy with the results.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: