Monaghan is an open-source website template made using Bulma for use with Nuxt.js. Believe it or not, it contains much of the code used to build OverScore's first website back in 2019!

Monaghan was formed from the ashes of OverScore's first website. You can see a live demo of the theme atmonaghan.overscore.media.

Monaghan incorporates a lot of the ideas we had that got us started into web development in the first place. It can be used as a stand-alone template from which you can build your own website.

The template usesNuxt.jsunder the hood andBulmafor styles, among other things, and it's been open-sourced onits GitHub page.


Highlights:

Monaghan was a lot of fun to create, and we're proud of several things we got to make while working on it. Below are a couple examples.


Accessibutton

The Accessibutton, based onVue Accessibility ToolbarbyHendrixfanon GitHub, provides users with a number of helpful options in increasing the accessibility of the site.

Options include colour inversion, high-contrast mode, larger links, link highlighting, and switching text to theOpenDyslexic Font.


Particles.js Background

We usedParticles.jsto create an animated hero for our site. This JavaScript library allows for the creation of animateable geometric patterns.

We choose to go for a "falling constellations" or "evolving pointcloud" look. Sure, it is abstract, but it is certainly interesting to look at and adds a sense of depth to the first thing you see on the site.


More than anything else, Monaghan was a test of our capabilities, and a great learning experience. However, be warned, if you go look at the code - we've learned a lot since writing it. Maybe someday it will get an update, but until then it is a showcase of the minimum bound of our web prowess, and hopefully something pretty to look at and fun to use.

Posts: