01 Joris VRR · Software developer and digital builder · Leiden, NL

Technology is the tool.
The business is the point.

I design and build websites, web applications and AI systems for small businesses. Every project starts with the problem the business actually has, not with the framework I feel like using.

View work Let's talk
Local time
--:-- CET
Base
Leiden, NL
Now building
CORTEX
Last shipped
Atelier
Status
Taking new projects
About

A business owner should not have to understand the technology. They should be able to say what they want to achieve.

My job is to understand the problem, pick the right technology, and turn the idea into something that works. Sometimes that is a website. Sometimes it is an automated workflow, a custom application, or an AI system that removes an hour of repetitive work every day.

I work with small businesses because that is where technology changes the most. A well built site makes a small company look established. Automation gives a small team back its week. A custom tool removes the spreadsheets nobody wants to maintain.

Work with me

The developer

How is this actually built, deployed and maintained without becoming someone else's problem later?

The problem solver

Should this be built at all, and what changes for the business once it exists?

Currently

Freelance work under jorisvrr/webdev, and starting HBO ICT at De Haagse Hogeschool in September 2026.

Selected work · 05 plates

Five things I built, and why they exist.

Screenshot slot · 1600 × 1000

ATS Valkenburg · Valkenburg ZH · 2026 · Client

Auto Technisch Specialisten

An independent garage that looked smaller online than it is in the workshop. Full rebrand and a new multi page site built around trust.

Role
Brand, design, build
Built
Brand system, sitemap, copy, multi page site, SEO, loading sequence
Stack
Static multi page build, custom design system
Live site Case study
Screenshot slot · 1600 × 1000

Halo · Product concept · 2026 · Own product

Halo, recognition at work

A recognition platform for companies of five to a hundred and fifty people, plus the twelve page flagship site that sells it. Product thinking first, pixels second.

Role
Product, design, development
Built
Product specification, brand system, 12 page marketing site
Stack
Static HTML build, Python build step, zero runtime dependencies
Live site Case study
Screenshot slot · 1600 × 1000

CORTEX · In development · 2026 · Own product

CORTEX, a second brain

Speak a thought, and it gets titled, tagged and connected to everything related to it. The home screen is the network itself, rendered in 3D.

Role
Product, design, development
Built
Capture to connection loop, 3D thought network, AI processing pipeline
Stack
Next.js, TypeScript, three.js, Supabase, OpenAI API, PWA
Case study
Screenshot slot · 1600 × 1000

Atelier · Personal system · 2026 · Own product

Atelier, a personal operating system

A single file web app on the iPhone home screen that holds the day, the study schedule, deep work and every project. It syncs two ways with Notion without leaking a token to the browser.

Role
Everything
Built
Five section PWA, offline storage, non destructive migrations, two way Notion sync
Stack
Single file HTML, Vercel serverless function, Notion API
Live app Case study
Screenshot slot · 1600 × 1000

BEBO Betonboren · Rotterdam region · 2026 · Client

BEBO, drilling through concrete

A specialist contractor with a working site and no structured way to receive a job request. Audit, SEO foundation, and a standalone intake form that asks the questions the office used to ask by phone.

Role
Audit, SEO, development
Built
Full site audit, SEO infrastructure, client intake form
Stack
Flask on Railway, static intake form on Vercel, Web3Forms
Intake form Case study
How I build

Six steps. The first one is not code.

01

Understand

What takes too long, where do customers get stuck, and what would make the biggest difference. The answer decides the technology, never the other way around.

02

Design

Map the experience and the architecture together. Screens, data model and edge cases on the same page before anything is built.

03

Build

Ship the smallest useful version. Real content, real data, no placeholder logic hiding an unsolved problem.

04

Test

Find what is broken on a slow phone, on a keyboard, at 320 pixels wide, and with the client using it in a way I did not predict.

05

Refine

Cut what nobody uses. Fix the two things that annoy the client every day. Performance and accessibility are part of this step, not a later project.

06

Ship

Deploy, hand over documentation the client can actually read, and stay reachable when the business changes.

What I build

Four ways this usually starts.

Websites

A site that represents the company as it actually is, answers the questions customers ask, and makes them act.

  • Business sites and landing pages
  • Portfolio and brand sites
  • E-commerce and booking flows
  • SEO foundation and analytics

Web applications

Software shaped around how the company works, instead of a company reshaped around generic software.

  • Dashboards and internal tools
  • Customer and booking systems
  • Admin and intake flows
  • Client portals

AI systems

AI where it removes friction, and nowhere else. The point is the hour it gives back, not the label on it.

  • Assistants and chatbots
  • Automated customer communication
  • Internal knowledge systems
  • Integrations with existing software

Digital products

From the first conversation to a deployed product that can keep growing with the business.

  • Concept and product definition
  • Brand and interface design
  • Development and deployment
  • Maintenance and iteration
Tools

What I reach for, grouped by what it does.

Interface

  • HTML and CSS
  • JavaScript, TypeScript
  • React, Next.js
  • Tailwind
  • three.js

Server

  • Python, Flask
  • Node.js
  • Serverless functions
  • REST APIs

Data

  • PostgreSQL
  • SQLite
  • Supabase
  • Notion API

Infrastructure

  • Vercel
  • Railway
  • Git and GitHub
  • Static builds and CI

AI and automation

  • OpenAI API
  • Claude API
  • Speech to text
  • Workflow automation

Design

  • Design systems and tokens
  • Figma and Adobe CC
  • Motion and interaction
  • Accessibility, WCAG AA

Everything listed here appears in the work above or in the lab below. If a tool is not on this list, I have not shipped anything with it yet.

Lab

I do not only build when someone pays me.

Concepts, experiments and things that exist because I wanted to find out whether they would work. Some are live, some are unfinished on purpose.

Leiden Lions

Ice hockey club site with a canvas rink hero and a puck that obeys physics. Built to show Dutch clubs what they could have.

Live

Amsterdam Tigers

Bigger club build: match center, webshop scaffold, two languages, and a loading sequence that lands on the crest.

Live

Maple Leafs concept

A North American club site rebuilt to the standard I want Dutch clubs to aim at.

Live

Hurricanes redesign

A production NHL site taken apart and rebuilt. Zone entry page transitions, tactical type, no purple gradients anywhere.

In progress

AUREX

A private banking PWA on mock data. An exercise in restraint: gold on black, no chart junk, every state designed.

Concept

HQ

Single file business tool: invoices, subscriptions, clients and time tracking, with a print safe invoice view.

In use

MKB chatbot

A chatbot product built on Flask and sold to Dutch restaurants, salons, gyms and driving schools. My first real product.

Archived

Lead tracker

A standalone tracker for outreach: local storage, filtering and CSV export. Built because a spreadsheet kept losing the thread.

In use
Track

Short version.

2026 — present

HBO ICT student

De Haagse Hogeschool · Business & Data Management

  • Starting September 2026, after the shared ICT foundation programme
  • Focus on where software meets the business case, which is the same place my client work sits
2025 — present

Freelance developer

jorisvrr/webdev · Leiden, NL

  • Websites, web applications and AI systems for small businesses
  • Client work including a full garage rebrand and a contractor intake system
  • Built and sold a chatbot product to Dutch small businesses
Before

Videography and cinematography

Independent

  • Where the eye for framing, pacing and light came from, which is most of what design is
Contact

Let's build something.

Tell me what is not working yet. If I am the wrong person for it, I will say so and point you at the right one.

Email— GitHub— LinkedIn—
What are you looking to build?

Case 01 · ATS Valkenburg

Client · Valkenburg ZH, NL · 2026

A garage that deserved to look like the workshop it is.

Auto Technisch Specialisten is an independent garage competing with dealer workshops that have marketing departments. The brief was a complete rebrand and a new site, delivered to the standard a much larger company would expect.

Role
Brand, design, development
Stack
Static multi page build
Year
2026
Status
Live

Problem

The existing site did not carry the weight of the business behind it. For an independent garage, the website is the trust test: a customer decides whether to hand over a car worth thousands based on how the company presents itself. The old site was the weakest part of the company.

It arrived as forty nine phone screenshots and a written brief. The first job was turning that into an actual inventory of what existed, what mattered, and what could go.

Idea

Not a redesign of the pages, a rebrand of the company as it appears online. Brand strategy, design system, sitemap, copy, SEO and conversion treated as one deliverable instead of five separate ones.

Process

  • Audit the old site page by page from the supplied screenshots
  • Map every service the garage actually sells against what the site claimed
  • Rebuild the sitemap around what a customer is trying to find out
  • Write the copy first, design around the real words

Design

The navy and purple from the existing logo stayed. Replacing a colour scheme that customers already recognise from the building and the invoices would have thrown away the only brand equity the company had. The system was built to make those two colours look deliberate rather than inherited.

Everything else carries the upgrade: type scale, spacing rhythm, photography treatment and a loading sequence that sets the tone before the first section appears.

Development

A static multi page build. No CMS, because the content changes a few times a year and a database would have added a maintenance surface nobody at the garage wants to own. Full favicon set, metadata, semantic structure and an interactive layer that responds to the visitor without getting in the way.

Challenges

The brief asked for a rebrand at a scale usually delivered by an agency team. Scoping that into something one person could ship, without dropping the parts that actually move the business, was the real work. The second challenge was the palette: making an inherited navy and purple feel intentional rather than dated.

Solution

A complete multi page site with a documented design system, rewritten service pages, an SEO foundation, accessibility built in rather than retrofitted, and a loading and motion layer that makes the site feel considered from the first second.

Result

Live at atsvalkenburg.nl. Measured outcome to be added once the first period of analytics is in: enquiries before and after, organic traffic, page speed. I would rather leave this empty than publish a number I cannot show you.

Visit the site Start something similar
Case 02 · Halo

Own product · Product and marketing site · 2026

Recognition at work, without turning it into HR software.

Halo is a private workspace where colleagues send each other recognition cards. It is deliberately not performance management, not a social network, and not another dashboard nobody opens.

Role
Product, brand, development
Stack
Static HTML, Python build step
Scope
12 page flagship site
Status
Live, in development

Problem

Companies of five to a hundred and fifty people have no tool for appreciation that does not immediately feel corporate. The existing category solves it with points dashboards and leaderboards, which turns a human moment into a performance metric and kills the thing it was supposed to encourage.

Idea

A company owned private workspace. You join with your work email, you send one recognition card a week, and cards are private by default unless the sender chooses otherwise. The scarcity is the feature: one card a week makes each one mean something.

Process

Product before pixels. A full planning document covering positioning, the recognition economy, permissions, pricing and roadmap came first, with an explicit rule of no code and no folder structure during planning.

  • Define what the product refuses to be, before defining what it is
  • Model the economy: who earns points, who is exempt, what points unlock
  • Decide where AI is allowed: assistive only, it never sends anything by itself
  • Only then design the site that sells it

Design

The interface is cool and recessive, the card is the warm, lit object. That single thesis resolved most design decisions: the product surface stays near neutral so the recognition card is always the brightest thing on screen.

A surface gets a hairline or a shadow, never both. Accent is capped at roughly five percent of any view. Motion uses exponential ease out only.

Development

Twelve pages built as static HTML with a Python build step and no runtime dependencies. Section transitions are hard edges with a small radius rather than gradient fades, and dark bands run full bleed into each other so there is never a light seam between them.

Challenges

The written brief asked for Next.js, React, Framer Motion and an installed component package. None of those existed in the project, which was static HTML with zero dependencies. I flagged the mismatch instead of quietly pretending the stack matched, because a client who thinks they are getting React and receives static HTML has a problem six months later.

The second challenge was the pricing and add-on content. It came from a reference mockup rather than a decision, so it ships as a clearly marked placeholder rather than as fact.

Solution

A twelve page flagship site with a custom loading system, page transitions, a full favicon package, no stock photography, and a product specification detailed enough to build against.

Result

Live at haloflagshipstore.vercel.app. Whether Halo becomes a real business, stays a portfolio product, or turns into a client project is still an open decision. What it already proves is the part that is hard to fake: product definition, brand system and execution held together across twelve pages.

Visit the site Talk about a product
Case 03 · CORTEX

Own product · In development · 2026

Capture a thought in four seconds. Never file it.

CORTEX is a mobile first second brain. You speak, and the system titles, summarises, tags and connects the thought to everything related to it. The user never organises anything by hand.

Role
Product, design, development
Stack
Next.js, TypeScript, three.js, Supabase, OpenAI
Platform
iOS PWA
Status
In development

Problem

Note apps fail at the moment of capture. By the time you have picked a notebook, a folder and three tags, the thought is gone or the app is closed. Every system that requires filing eventually becomes a graveyard.

Idea

Move all the organising work to the machine. Capture, understand, connect, explore. The user does one thing: speak. Everything after that is automatic, and the reward for capturing is watching your own network grow.

Process

The riskiest part was the home screen: a real interactive 3D network of thought nodes, not a static image of one. So that got built first, as a single file prototype on seeded data, before any repository scaffold existed. If the network had not felt good to touch, the whole product concept was wrong.

Design

Near black with deep navy, purple and magenta, closer to deep space than to a SaaS dashboard. Node colour encodes type, ideas, knowledge, goals, inspiration, personal, problems, and node size encodes importance, so the network is readable before you tap anything.

Navigation floats on the right rather than sitting in a bottom bar, because the network needs the full screen and a thumb needs to reach it. The brand has no icon: the network is the identity.

Development

Next.js and TypeScript, three.js for the network, Supabase for auth and storage, MediaRecorder plus speech to text for capture, and an AI pass that returns title, summary, tags, category and connections in one structured response. Installed to the iPhone home screen as a PWA.

Challenges

Two hard problems. Making WebGL feel native on a phone, including drag, pinch and a slow idle float that never turns into motion sickness. And connection quality: an automatic link that is wrong is worse than no link, so the connection step has to be conservative enough to stay trustworthy.

Solution

A working prototype of the 3D brain and home interface on seed data, validated before committing to the full stack, now being built out into the real application with capture, thought detail, intent based search, knowledge hubs and objectives.

Result

In development. Public prototype link and screenshots go here once the build is stable enough to show: prototype URL, screens, first usage notes.

Ask me about this one
Case 04 · Atelier

Own product · Personal system · 2026

One file, on the home screen, syncing both ways with Notion.

Atelier is the system I actually run my day on. Five sections, installed on the iPhone home screen, with a serverless backend that talks to Notion without ever handing a token to the browser.

Role
Everything
Stack
Single file HTML, Vercel functions, Notion API
Platform
iOS PWA
Status
Live, in daily use

Problem

A calendar, a notes app and a habit tracker each hold a third of the picture, and the picture only exists in your head. The failure mode of every personal dashboard is the opposite one: it becomes so full that opening it is work.

Idea

Design systems, not motivation. Optimise for consistency, low friction and things that compound. Five sections and nothing else: Daily, Academy, Schedule, Deep Work, Projects. If a feature does not survive a week of real use, it gets cut.

Process

Built, used, cut, rebuilt. The dashboard got too cluttered to use, so the next pass removed rather than added. Wellbeing tracking was dropped entirely because it was never going to be filled in honestly. The vision board became a Projects tab because that was the thing I actually opened.

Design

Quiet luxury: warm neutrals, ivory on espresso, a brass hairline, editorial serif, no gamification and no bright colour anywhere. A cypress green accent carries now and next semantics, brass carries live and done, so status is readable without a legend.

The identity is a serif A monogram in ivory with a brass rule under it, generated into a full icon set, favicon through maskable PWA icons. A film grain overlay gives the interface material texture.

Development

One HTML file, local storage with an in memory fallback so it never dies in a sandboxed browser, and a splash gated on font readiness rather than on a fake timer. The Notion bridge is a Vercel serverless function that keeps the integration token server side and auto discovers the child database from a page id.

  • Two way sync with last edit wins
  • Deletes archive the Notion row, tombstones stop it resurrecting on the next pull
  • Offline safe with a dirty retry queue
  • Today's focus writes to one backing note and updates in place instead of creating duplicates

Challenges

Sync is where personal apps quietly break. Deleting a note locally used to bring it straight back on the next pull, which is the classic distributed systems bug in miniature. Tombstones fixed it. Migrations were the other risk: every schema change ships as a non destructive versioned migration, so an existing install upgrades without losing anything a user typed.

Solution

A native feeling five section PWA with onboarding, weekly review, export, offline support, a passcode gate on cold start, and a Notion database that stays in step with it in both directions.

Result

In daily use since it shipped, which is the only metric a personal tool has. The passcode is a soft gate against someone finding the URL, not real security, and it is documented as such rather than sold as a feature.

Open the app Want one for your team
Case 05 · BEBO Betonboren

Client · Rotterdam region, NL · 2026

A specialist trade, and a request form that asks the right questions.

BEBO drills and saws through concrete. Every job needs the same handful of facts before it can be quoted, and every one of them used to be collected by phone.

Role
Audit, SEO, development
Stack
Flask on Railway, Vercel, Web3Forms
Year
2026
Status
Live

Problem

The site worked but it was not earning anything. It ranked poorly against the other concrete drilling firms in the region, and it gave a potential customer no structured way to describe a job. Confirm with the client: how requests arrived before, and roughly how many per month.

Idea

Two separate problems, two separate fixes. Make the existing site findable and technically sound, and give the company a dedicated intake form that collects a complete job description in one pass instead of three phone calls.

Process

  • Full audit of the existing Flask application
  • Competitive research on concrete drilling firms in the Rotterdam region
  • SEO infrastructure: structure, metadata, indexing
  • Intake form designed around what the office needs to quote

Design

Trade sites are used on a phone, in a van, with one hand, sometimes in gloves. Large targets, short fields, no decoration competing with the form. The site also carries a reusable maker ident, a small signature element I can reuse across builds without it looking like a template.

Development

The main site runs on Flask, deployed to Railway. The intake form ships separately as a static page on Vercel with Web3Forms handling delivery, so it has no server to maintain, no database to secure and nothing that can go down independently of the main site.

Challenges

Deciding what not to build. A full quotation system was possible, but a company that quotes on site does not need one, and it would have added a maintenance burden for a workflow that already works. The form stops exactly where the human takes over.

Solution

An audited and SEO ready main site, plus a standalone intake form live at bebointake.vercel.app that arrives in the inbox as a complete, structured request.

Result

To be filled once the client reports back: requests received through the form, time saved per request, ranking change. The form is live and in use.

Open the intake form Fix an intake process