If you've visited my personal website before, you can see that it looks completely different now.
After leaving oVice at Feb 2023 – which I'm thinking of maybe writing about the learnings in the near future –, I've been taking some time off, working on some side projects, including redoing this very website you're looking at right now.
For people who have never visited, and for the sake of my own memory plus historical references, here's a before and after comparison.
For the longest time, I was never really interested in building or maintaining a personal website. If I remember correctly, the first version was pretty much based on a homework back in college, and I don't think I ever published it.
Even after started working, I've always viewed personal websites as more of something that designers will do for showcasing their portfolios. As an engineer, I always felt there wasn't really much I have to show the world , especially when working more on backend related systems that are mostly proprietary.
As time passes, there were periods that I felt like I want to write something but didn't really have a platform to do so. And every time I'll try out some services of that's popular then like Wordpress, Medium and a couple more that I'm blanking on. However, every time it felt like I didn't really have control over the content, and the writing experience is honestly not something I liked.
At some point, keeping a personal website started growing on me again but it wasn't enough to spend the effort to actually try to build
something – also for various other reasons with life and work. That urge slowly continued to grow as I start using Emacs' org-mode
more for keeping notes, and enjoying the comfort of doing so in my editor. Making writing and expressing thoughts feel less…, cumbersome.
Also having a couple of side projects I have in mind and want to work on, and wanted a place to be able to share and showcase them became
a good reasoning too.
So roughly a few weeks ago, the thought came to me.
Since I'm taking a little break anyways, why not actually sit down and spend some time to build out something that I'll be satisfied of? 🤔
And that's the beginning for a week long rabbit hole.
Composition
Foundation
The site is built on top of Hugo. The main reason for Hugo is that it has native support for using org-mode for writing content. I
honestly don't mind using Markdown too but if something can support org-mode better, I'd rather use that. Markdown is more of a
fallback in case certain custom syntax doesn't get parsed well – e.g. shortcodes.
The choice of a theme is really more of a personal preference. I'm using the Zenburn theme for my editor so I was looking for something
that's similar or close to it when it comes to color scheme. While skimming over some available themes online, Gruvbox caught my eye.
It looks pretty close to what Zenburn is and I like the designs in general. Kudos to Michael Schnerring for creating something so nice
looking.
The default Gruvbox theme came with the following:
- FlexSearch: Indexing and searching through contents in the website
- Simple Icons: Free icons for well known brands and logos
- Tabler Icons: Great wide range of icons perfect for most needs
- Prism: JavaScript library for code syntax highlighting
- Hugo JSON resume module: A module for rendering JSON resume in Hugo – made by Michael
- Hugo GitHub README stats: A module for rendering GitHub repository statistics in Hugo – made by Michael
It's pretty impressive the amount of stuff Michael has made to be honest.
Customization
The majority of the changes were re-organizing the theme to my liking. Here's the list of PRs if anyone is interested.
Mainly the work can be categorized into
- Changing the layouts for certain types of content
- Replacing CSS files with Tailwind CSS
- Removing unused modules and libraries:
Prism,JSON resume module,GH README stats
Layout changes
This website has 3 types of contents,
- Blog posts
- Personal notes
- Project pages
Since each of them is used in a slightly different context, I've created a layout for each of the content types. For example,
Blog post types have a Table of Contents sidebar that doesn't exist in other content layouts. That kind of small things here
and there.
CSS file replacements
I'm not very good at front end development and creating nice looking UIs – something I'm working on. That's because CSS has always been something that I can't fully get my head around. I know enough to be able to get things look like how I want them to look, but why sometimes something don't align well – e.g. vertically, it always doesn't look obvious without understanding the DOM in depth.
Tailwind CSS has changed my life in this regard. Being able to compose classes and shape things up with a simple approach has been an amazing developer experience. While there's nothing wrong with the CSS that came with the theme, in order to fully own it and be able to customize the theme as I see fit, converting it over to use Tailwind was essential.
Making a tweak here and there is so much more simple now…, personally.
Cleaning up unused stuff
While there are a lots of nice things that came with the theme, the majority of them I'm not utilizing. For example, JSON resume is nice
but I rather control how I want to render the data. Also Prism seems kinda unnecessary when Hugo already comes with syntax highlighting
built-in.
It always felt good to see thousands of lines removed from package-lock.json. 🎉 🎉 🎉
Enhancements
There were some improvements – personal preferences – made as well.
- All
JavaScriptwere converted toTypeScriptfor easier maintenance - Added Alpine.js for UI simple interactions
There aren't a lot of JS in the original version, basically just a file for changing the site's theme from dark to light and vice versa,
and another one that implements FlexSearch onto the website.
The conversion over to TS was fairly straightforward. The more interesting one is converting the FlexSearch implementation to use Alpine.
By using Alpine, I was able to simplified a lot of the dance happening between JS and the DOM, and I was able to contain all search
related logic in this search.html partial file now. The only functions I needed to declare in a script tag were,
- Initialization/indexing of the content –
createIndex - Search and return the results –
searchItems
Over engineering
With Alpine simplifying the UI interaction logic, I decided to go one step further and reimplment the search bar as a command palette.
I'm actually a big fan of it ever since seeing it in Slack and Linear. But obviously, not a lot of people will need to do search on other
people's personal website.
The excuse is, it's a good practice for me since I have a couple side projects I have in mind that might make use of a command palette for search or simply just executing commands.
This is what it looks like when you type Ctrl K on this website now.
Honestly I think it looks pretty neat. 😁
The command palette was a pretty fun implementation so I'll probably do a separate blog post for it.
Conclusion?
None really, except maybe diving into rabbit holes every once in a while is actually pretty fun. Enjoying being in that rabbit hole is one of the reasons why I became an engineer in the first place.
I was also able to learn about some interesting libraries like FlexSearch, and icon
libraries like Tabler Icons and Simple Icons, all are good things to use when working on other projects in the future.
As for this website, there are still some tweaks I'm planning to make but overall I'm pretty satisfied with what I have right now. I expect I'll be doing more writing with the shiny new site, but let's see how that goes. 😛