A New Face

foundations © Juan B. Rodriguez

Introduction

Following on the steps of consolidating my online presence into jbrio.net, I’ve decided to also revamp the look of my site.

Background

Since my site is powered by hugo, I started with a simple existing theme, hello-friend-ng.

image 1
image 2
image 3

It looked pretty good to me, it was based on the Inter font, which is really pleasing to the eye.

Although the default font size was a reasonable 16px, i wanted to push it to 20px.

I tried to change it via the hook points the theme provides, but it didn’t work the way i expected.

At about the same time, I found out about gatsby theme minimal blog and really liked the look of it.

The New Theme

I decided to switch, however a Gatsby theme is very different from a Hugo theme, so at first I looked for a port and that was nowhere to be found.

In the end, I decided to just replicate it in Hugo and that gave way to the new theme you see here today.

I used tailwindcss in the process, which made it easier.

It’s pretty similar, although it still needs some tweaking.

Conclusion

I’m pretty happy with the result, I think it looks a lot better than the previous one.

Note: I may eventually open source my hugo theme, when I figure out how to do it (since it uses tailwind, thus a node environment and all)

Sharing is caring!

If you got value from this article, please consider sharing it with your friends and colleagues.