Ramon Hoffman

Finovent

A custom-built website with its own CMS for Finovent, a financial administration and advisory firm in Maastricht.

01

The Brief

Finovent is a financial administration and advisory firm at Maastricht Airport, run by Roel and Monique. They help small business owners and freelancers with their bookkeeping, annual accounts and VAT returns, and go further with KPI dashboards, cashflow analysis and financial advice. Studio Sijs created Finovent's branding and designed their website for both desktop and mobile. They then brought me in as a freelance developer to build it.

The site had to match Studio Sijs' design exactly. Once it was handed over, Finovent had to be able to change their own texts, photos and buttons without calling a developer. It also needed a working contact form, and somewhere to live: part of the job was setting up the hosting and moving the domain over.

02

My Approach

Studio Sijs handled the design and all contact with the client. I did everything technical: the setup, building every section, the content management system, the contact form, hosting and delivery.

I built the site from scratch, which is the kind of work I specialize in. Nothing had to bend to fit a template, there are no plugins to keep updated, and every part of the page is its own building block that can be changed without touching the rest. I used Next.js with Payload CMS running inside the same app, so the website and the place where Finovent edits it are one thing to host and maintain.

  • Editing: the editing screens follow the page itself, one section at a time, with every label in Dutch. Roel and Monique can change any headline, text, photo or button, and even how fast the photo carousel turns, without touching any code.
  • Holding the layout together: because the client can now change the texts, the layout had to survive text I'd never seen. The big headlines shrink themselves to stay within a set number of lines, so a longer title won't push the page out of shape.
  • Photos: every photo uploaded in the editor is automatically saved in several crops and sizes. Phones get a portrait crop, large screens get a sharp wide one, and nobody has to resize anything by hand.
  • Every screen size: Studio Sijs designed desktop and mobile, and the page also had to hold up on every width in between. The team section, for example, gets its own layout on phones, tablets and desktops.
  • Contact form: each message is saved in the editor and sent to Finovent by email right away, set up so hitting reply goes straight to the person who wrote in. The phone field has a country code in front of it.
  • Hosting: I set up the hosting on Railway with its own database, moved the domain over, and set up privacy-friendly visitor statistics with Umami on Finovent's own server.

03

The Result

A live, custom-built one-pager at finovent.nl. It opens with Finovent's promise and a button for a free intake, then covers how they work, the services they offer and who they are, and ends with a contact form. Everything on it can be edited by Finovent through their own editing screens.

04

Outcome

The site is live at finovent.nl, and both Finovent and Studio Sijs were happy with the result.

For me, the best part was building the whole thing myself, from the database and hosting to the last button, with nothing borrowed from a template. I built every part as its own piece from the start, which makes the site easy to maintain now and easy to extend later. If Finovent wants a new section or a second page, it slots in next to what's there instead of forcing a rebuild.

Stills

01 / 04
The "Hoe we werken" (how we work) section: a photo carousel that advances on its own, with arrows and dots to browse, next to a large statement and a contact button.
The "Wat we doen" (what we do) section: five services in outlined cards, with a photo filling the sixth spot and a call to ask for advice.
The "Wie wij zijn" (who we are) section: portraits of founders Roel and Monique, each with an email button, around a photo of a Finovent tote bag.
The contact section: an invitation to plan an introduction next to the contact form, which has a country code in front of the phone number.

The "Hoe we werken" (how we work) section: a photo carousel that advances on its own, with arrows and dots to browse, next to a large statement and a contact button.

Ramon Hoffman, Multimedia Designer / 3D Artist / Web Developer

03 / About

Concept first, medium second

I'm Ramon, a multimedia designer based in Eindhoven. Projects start with a problem: what the thing has to do, and how someone should move through it. The answer has been a 360 film, a VR walkthrough, an explainer animation, a configurator and an AI training platform.

My part is 3D, design and code: modelling and lighting in Blender, interface and motion in XD/Illustrator and After Effects, and the build in PlayCanvas or Next.js.