roboleary.net - new design and refactor

by Rob O'Leary on
A screenshot of the home page of my website. It has a main navigation that resembles a skyline with a cloud as icon and links in white. A name tag is in the center which says my name is rob. Rob is drawn in a street art style. The backgound features an orange duct-tapped to a green surface.

I did a quiet launch of a new design of my website recently. The big ticket items have been done for a while now. I wanted to observe the real-world performance and tweak things before drawing attention to it. What do you think?

I will include some screenshots here to record the general look and feel. I will discuss the stack and performance briefly. I will keep it light, I don’t want to be a blow-hard!

I still consider this a work-in-progress. There is more to come!

Screenshots

Screenshot of site header of roboleary.net. The header has deep blue background and a cloud logo in the left corner. A series of links are on the right-hand side.
Site header: I wanted the site header to be distinctive. I was interested in using curved lines and asymmetry. The new logo is the home link.
screenshot of site footer of roboleary.net.It has a background with a paper texture and a drawing of orange, curved bridge.
Site footer: It has a background with a paper texture and features a drawing of a vermilion curved bridge. I am likely to add to this drawing.
Screenshot of secondary nav of roboleary.net. The Demos page has a secondary nav under the site header. It has a title of Demos. Underneath it has 3 links of: home, collections, and RSS feed. The home link has a line underneath to indicate it is the current page.
Sections now have a consistent secondary nav. The shape is complementary to the site header.
Home page: It has a fun scroll-based introduction animation. I have ideas to expand this.
screenshot of blog page of roboleary.net. It has a vertical list of posts organised as a simple card with a title and description.
Blog: I have pared this back. The post cards no longer have cover images.
screenshot of the feed page from roboleary.net.
RSS Feed (Blog): The RSS feeds on my website no longer display as an XML file when you navigate to them. They now look and behave like a regular page courtesy of some XSLT magic. You subscribe to the feed like you do with any other RSS feed. I may change the style of the feed preview and make it interactive - it can become a mini RSS reader.
screenshot of demo from roboleary.net. The title bar has a logo that looks like an eye, and the title of: Photocopy code animaton. It has the name Rob OLeary underneath. There is a tabbed pane with 3 tabs: result (selected), code, and details. Below it is the actual demo of a code block with a copy button.
Demo: This has been stripped down. The UI is now consistent with the rest of the website. It is leaner and faster.
screenshot of a blockquote from roboleary.net. It is a handdrawn speech bubble with a dark thick outline.
Styled elements: This is a blockquote. I drew the speech bubble that encapsulates the quotation. It is onging effort to style more elements across my website like this. I want to give things more personality.
Screenshot of a demo embed. It has a tabbed pane with the code, it has 2 tabs: HTML and CSS. Below it is a result pane with the actual demo. It has a dark grey color with white text.
Interactive components: This is a custom demo embed. Demos can be written separately and included on other pages. I am working on more interactive components that augment posts like this.

Why am I making this website?

It is a good idea to ask yourself why you are doing something before you do it! Especially if you are hurling yourself headlong into a big redesign or a new tech stack. The time it takes is often underestimated.

In the past, my website did not have a design or a clear raison d’être! I made my own website because I like to make things. I wanted to develop more front-end skills and I thought that having some evidence of that competence may be benefical to my career some time!

This website became a playground for me to experiment with web features and frameworks. It became a first cousin of frankenstein’s monster in a hiccup. I learned a lot more about front-end along the way but it wasn’t much of a website. I wanted to make it more of a website.

Now, I see the purpose of this website as a notebook to record and share things that I learn, make, and that shape me. I share in the hope that something will be helpful to someone some time.

It is important to me to be able to publish things without the influence of corporate interests. To make things that matter to me, to make things that are not designed for appeasing an algorithm, or finding an audience. To have a digital (mental) space free of those concerns.

Websites in the AI age – I am trying to make sense of that.

The design ethos

I wanted to make something joyful. Something that feels fresh and fun. I want this website to be a home to things that are interesting and inspiring. I want it to feel hand-made.

Generally, I like a minimalist aesthetic. I favour simplicity. Imperfections are welcome.

I’m not a designer, the design is based more on intuition than design principles. I picked some real world things that possess the qualities I like, and I tried to extrapolate from them to produce my own thing.

The tech stack

I stuck with Eleventy. The simpler static site generator!

I upgraded from version 2.x to version 3. The dev mode performance is better. I was able to make changes that lean into the Eleventy’s new capabilities to do less work.

I stuck with Nunjucks as the template engine. I found that with the improvement of plugins such as bundle and render, I could simplify my approach to templates and styles. I am using vanilla CSS and merging files with the bundle plugin when necessary.

I did a major refactor. I moved from Common JS to ESM. This takes time when you have a large configuration set like I do! I refactored my configuration into local plugins. I came up with a different scheme for my files, mostly everything that is related to a page is co-located now. This makes life a lot easier.

Perhaps, I will discuss this further on another occasion.

Performance

I was able to improve the performance of the website considerably.

Based on Cloudflare’s analytics of my website for the last 30 days (ending 11/11/25), the core web vitals:

Cloudflare analytics for roboleary.net on 11/11/25 for 30 days. The page load time is 835ms. Number of visitors and page views is 6.15k.

Overall, the performance is at a very high level. I can switch off analytics now to give perf a further nudge!

If you have any feedback, I would be happy to hear from you!

Tags