L.M. Douglas.Vue 3 author platform design & build for a fantasy saga
Solo: design & build · 2024 to present
A one-book promotional page grown into a saga's hub: a live catalogue, an interactive map of the realm, character's updates, book reveals, and a mailing list that pays readers in fiction.
L.M. Douglas is a Scottish fantasy author writing the Chronicles of the Endless War. She has a maintenance plan that allows for unlimited updates which suit her ever growing catalogue. From 2024 her catalogue have grown from one book to four and two novellas.
Outcomes
How it evolved
There was no bad site to rescue here. The 2024 build did its job: one page introducing a book first, expanded later to accommodate a second book. What changed was the work. A third and fourth title arrived, the world behind them kept growing, and a page that described a novel had to become somewhere a reader could spend time.
- Catalogue: two hand-written blurbs a status-tagged grid built from data
- The realm: a flat map you could open full size clickable lore over its gods, cities, ports and ruins
- Signup: a browser post to MailerLite's hosted form a serverless function that keeps the key off the page
The Vue 3 build
I designed the rebuild around the two things a reader actually wants: what to read next, and more of the world. The build is a Vue 3 single-page app where the books and the world live as data, with hand-written CSS over one set of custom properties. No CSS framework, no UI library: every component, animation and icon is bespoke, because an epic fantasy site that borrows its furniture from a SaaS template reads as exactly that.
One file, three views
The books and the map's lore points live in a single data file. The hero carousel, the Chronicles grid and the map all render from it, so adding a release or a location is a one-object change rather than an edit in three places.
A map that carries the lore
The realm is a hand-drawn map with clickable points over its gods, cities, duchies, ports and ruins, each opening its own lore and character artwork. It was my suggestion, and it turned out to be the thing readers come back for.
A mailing list with no backend
Readers get a free novella for signing up. The form is a honeypot-protected Netlify Form that also posts to a Netlify Function, which creates the subscriber in MailerLite, so a static site runs a real funnel.
Also in the build: self-hosted display and body fonts preloaded for a fast first paint, hand-built SVG icons, and a responsive WebP pipeline that detects support once and falls back cleanly to JPEG.
Results & the client's words
- A destination between releases: the map gives readers a reason to visit when there is no new book to buy.
- The catalogue keeps up with the writing: a new title is one object, and the carousel, the grid and the badges follow.
- The signup grew up: the same free-novella offer, now behind a serverless function with the API key off the page and a honeypot on the form.
“Working with Victor to update and maintain my author website has been a fantastic experience. He created a moving carousel to showcase all of my books and suggested adding an interactive map of my fictional world, an idea that has proved very popular with visitors. He's been professional, creative, and easy to work with throughout the process. I wouldn't hesitate to recommend him to other authors or any business looking for a high-quality website.”
Lorraine, L.M. Douglas
Reflection
What worked
- Modelling the world as data: one file drives the carousel, the catalogue and the map, and they cannot disagree.
- Proposing the map rather than waiting to be asked. It became the reason people come back.
What I'd improve
- Hand her the keys: adding a release is still a code change, so a small editing layer is the obvious next step.
- Bring the blog in: it is an embedded feed rather than part of the design system.
More work
A designer's portfolio built as a gallery
Three rooms instead of pages, a career archive walked one scroll per year, and a hero of canvas particles that scatter under the cursor.
Orders Made Simple · HubSpotA SaaS marketing site that got its identity back
A B2B site that had drifted into looking like everyone else, rebuilt as a 39-token design system in hand-written code inside HubSpot.
The Orchard Bar · React + TypeScriptA dated WordPress site rebuilt in React
Online booking, self-updating seasonal menus and a design that matches the venue, for a client retained since 2020.
Need something similar?
See the live site, read the code, or get in touch about a project.
← Back to all work