NameForge

Namen zoeken is een van die klussen waar mensen structureel op vastlopen en dus structureel op zoeken. Een schrijver heeft een elfennaam nodig, een speler moet zijn D&D-personage nog benoemen, een streamer wil een handle die nog vrij is, iemand anders zoekt een naam voor een band of een net opgerichte zaak. Ons zoekwoordonderzoek, dat we in de README van het project hebben vastgelegd, wees vier ankers aan: username generator (191k, KD 41) als flagship, fantasy name generator (189k, KD 48), business name generator (159k, KD 80) en character name generator (25k, KD 32). Daaronder ligt een lange staart van kleinere varianten: elf, orc, dwarf, tavern, dragon, city, band.

Wat er mis is met het bestaande aanbod is geen mysterie. Veel sites in deze niche zijn oud, traag en volgeplakt met advertenties, en geven je een lijstje woorden zonder enige uitleg. Je ziet niet waarom een naam klinkt zoals hij klinkt, je kunt niets bewaren, en de pagina waar je op landt heeft zelden inhoud die je verder helpt. Voor een bezoeker die twijfelt tussen vijf opties is dat het verkeerde moment om alleen te worden gelaten.

Wij zagen daarin een niche waar je met vakwerk het verschil kunt maken, niet met budget. Eén merk, één engine, 47 generatoren met dezelfde kwaliteit en dezelfde bediening, en per generator echte inhoud: naamconventies, tips, gebruiksideeën en een FAQ. NameForge is daarmee eigen werk van begin tot eind, van het idee tot de laatste CSS-variabele.

Er zit geen template en geen CSS-framework onder deze site. We ontwierpen een eigen visuele taal die we Arcane Tome hebben genoemd: een warm perkamenten grimoire met inkt, diep smaragd en antiek goud. De keuzes liggen als CSS-variabelen op één plek vast, zodat kleur, typografische schaal en ritme vanaf één bron door de hele site lopen: parchment #f4ead6 als ondergrond, ink #2a211a als tekstkleur die naar bruin is gewarmd in plaats van dood grijs, emerald #1f6b4f en gold #c9a227 als juweelaccenten, en wax #8a2f2a voor de zegellak van de primaire knop.

De keuze past bij het onderwerp. Wie een naam zoekt voor een elf, een taveerne of een draak zit in een wereld van boeken en spelavonden, niet in een SaaS-dashboard. Daarom kozen we drie serif-fonts met een eigen rol: Cinzel voor display, Cormorant Garamond voor titels en EB Garamond voor de lopende tekst, alle drie via next/font vanaf ons eigen domein geserveerd in plaats van bij een derde partij opgehaald. Daarbij hoort de typografische afwerking van een boek: een drop cap op de openingsalinea van de tool- en tekstpagina's, gezet met een ::first-letter-regel, en ornamentele scheidingslijnen tussen secties. De perkamentkorrel is opgebouwd uit gelaagde gradients, dus daar komt geen achtergrondafbeelding aan te pas en er valt ook niets te laden.

Sfeer mag niet ten koste gaan van bruikbaarheid, en dat is in de code terug te zien. Het goud is voor tekst bewust verdiept naar #806014 omdat het anders geen 4,5:1 contrast haalt op perkament, met een comment in de CSS die die reden vasthoudt voor de volgende keer dat iemand aan de kleur wil draaien. Dat is het patroon door het hele project: waar een keuze niet vanzelf spreekt, staat de reden ernaast. Verder houden de pagina's zich aan de basis die je van een site mag verwachten en die in de praktijk vaak ontbreekt: één h1 per pagina, semantische landmarks, gelabelde bedieningselementen, zichtbare focus rings en een skip link naar de hoofdinhoud.

De kern van NameForge is klein. In lib/engine.ts staat een seedbare mulberry32-PRNG, een lettergreepbouwer en een paar combinators, en dat is het. Daarbovenop liggen elf lettergreepmodellen (elf, orc, dwarf, human, scifi, city, dragon, kingdom, goblin, demon en village) en 59 gecureerde woordbanken. Elk model beschrijft zijn eigen onsets, nuclei, codas en flavour-suffixen, plus hoeveel lettergrepen een naam mag hebben. Zo klinkt een orknaam kort en hard en een elfennaam vloeiend, zonder dat daar twee losse generatoren voor nodig zijn.

Op die basis draaien 47 generatoren, verdeeld over zes categorieën: Characters, Fantasy, Fantasy Races, Places & Realms, Creative & Music en Modern & Everyday. Een klik levert een batch van twaalf namen, die tijdens het rollen worden ontdubbeld zodat je niet twee keer hetzelfde in je lijstje krijgt. Die twaalf staan als constante op één plek in de code, en de paginatitel die in de zoekresultaten verschijnt leest hetzelfde getal daaruit. Wie de batch ooit aanpast, verandert dus het aanbod en de belofte in de zoekresultaten in dezelfde beweging. Namen kopieer je met één klik en favorieten blijven per generator bewaard in localStorage, onder een eigen sleutel per generator en met een try/catch eromheen voor het geval die opslag beschadigd raakt.

Ook de bestandsindeling volgt die logica. De redactionele inhoud is het zwaarste onderdeel van het project: intro's, lore, tips en drie FAQ-vragen per generator, samen 141 vragen. Die tekst staat in een server-only bestand, terwijl de generatielogica apart in een client-safe runtime leeft. Daardoor krijgt de browser alleen de code binnen die nodig is om namen te rollen, en niet de complete tekst van 47 pagina's. Boven die runtime staat een comment die uitlegt waarom de splitsing er is, zodat een latere import hem niet terloops ongedaan maakt.

NameForge draait op Next.js 16 met de App Router, React 19 en TypeScript in strict mode. De runtime-dependencies zijn op de vingers van één hand te tellen: next, react en react-dom. Geen CSS-framework, geen UI-bibliotheek, geen analytics-SDK die je bundel opblaast. Daar staan vier devDependencies tegenover, TypeScript en drie @types-pakketten, die in de build blijven en de bezoeker niet bereiken. Wat er in de bundel zit, hebben we dus zelf geschreven, en dat is een bewuste ruil: meer eigen code in ruil voor minder afhankelijkheid van onderhoud van anderen.

De pagina's worden statisch voorgerenderd via generateStaticParams met dynamicParams uitgezet, en er is geen eigen backend en geen database. Tijdens het gebruik van de tool zelf gaat er niets naar een server: het genereren, het kopiëren en het opslaan van favorieten gebeuren in de browser. Dat is geen technisch detail maar de kern van het product, want de namen die je maakt, verwerpt en bewaart verlaten je apparaat niet. De favorietenlijst staat in je eigen localStorage, niet op onze server. Netwerkverkeer is er waar je het zelf in gang zet, namelijk op het contactformulier, dat je bericht naar een extern endpoint post.

Voor de bezoeker vertaalt dat zich in het enige dat telt bij dit soort tools: je klikt en het antwoord staat er. Geen laadindicator, geen wachttijd op een server, geen limiet op hoe vaak je opnieuw mag rollen. Wie twintig keer achter elkaar wil doorklikken tot er iets blijft hangen, kan dat gewoon doen. Dat de engine seedbaar is, betekent bovendien dat hetzelfde uitgangspunt dezelfde reeks oplevert, wat het gedrag testbaar en reproduceerbaar houdt in plaats van dat het per bezoek anders uitpakt.

Vindbaarheid is bij een site als deze geen laagje erbovenop, maar de reden dat de paginastructuur is zoals hij is. Iedere generator krijgt zijn eigen statisch voorgerenderde pagina, met een eigen titel, meta description en canonical waarin het doelzoekwoord zit. Daarnaast bouwden we zes categoriehubs die de generatoren groeperen en onderling verbinden. Bij elkaar staan er 59 URL's in de sitemap: zes vaste pagina's, zes categoriehubs en 47 generatorpagina's.

De metadata is met de hand geregeld in plaats van gegokt. De titles zijn per pagina uitgeschreven en kort gehouden. De descriptions lopen door een helper die ze op ongeveer 155 tekens afknipt, op een woordgrens en met een beletselteken, zodat er geen half woord in de zoekresultaten belandt. Op de generatorpagina's gaat dat een stap verder: daar blijft het keyword-dragende slot volledig staan en wordt alleen de sfeerzin ervoor ingekort, zodat de inkorting niet het deel raakt waar de pagina op gevonden moet worden. Gestructureerde data ligt er per paginatype overheen: een WebSite-object op de homepage, WebApplication met FAQPage, BreadcrumbList en een Offer met Organization op de generatorpagina's, en BreadcrumbList met ItemList op de index- en categoriepagina's. Dat WebSite-object heeft bewust geen SearchAction, want de site heeft geen zoekpagina waar zo'n action naartoe kan wijzen, en gestructureerde data beloven die je niet waarmaakt is het soort truc dat we niet willen.

Ook de kleine dingen zijn bewust gedaan. Het OpenGraph-beeld wordt gegenereerd met next/og op 1200 bij 630 in dezelfde perkamentkleuren. Omdat Next.js het openGraph-object van de layout in zijn geheel vervangt zodra een pagina zijn eigen versie zet, loopt elk pagina-eigen og-object door een helper die het beeld en het type terugzet: een valkuil die je pas ziet als de preview van een deelbare link ineens leeg is. De sitemap gebruikt vaste lastModified-datums in plaats van new Date(), want een site die bij elke deploy roept dat alles is veranderd, leert crawlers dat signaal te negeren. De tweede contentgolf kreeg daarom een eigen, latere datum: tien van de 59 URL's dragen die, namelijk de zes categoriehubs en de vier generatoren uit die golf. De rest bleef ongemoeid.

NameForge is niet in opdracht gemaakt. We hebben de niche gekozen, het merk bedacht, het designsysteem getekend, de engine geschreven en de site zelf gelanceerd en onderhouden. Daarom staat hij in dit portfolio: hij toont de hele keten in één project, van strategie en zoekwoordonderzoek tot branding, interface, code en technische SEO.

Het project laat ook zien hoe we naar techniek kijken. Drie runtime-dependencies, een compacte engine die 47 tools voedt, een bewuste splitsing tussen redactionele inhoud en clientcode, en één plek in de code waar het aantal namen per klik vastligt. Daar hoort een gewoonte bij die je door de hele repo terugziet: waar een keuze niet vanzelf spreekt, staat de reden ernaast in een comment, van het contrast van het goud tot de datums in de sitemap. Dat zijn geen esthetische voorkeuren, het zijn de keuzes die de site over twee jaar nog te onderhouden houden, ook door iemand die er nu niet aan gewerkt heeft.

De site is in juli 2026 gestart en groeit sindsdien in inhoud. De eerste versie ging live met 43 generatoren; een tweede golf voegde de categoriehubs en vier nieuwe generatoren toe, en daarnaast staan er inmiddels contact-, privacy- en voorwaardenpagina's. Dat groeipad is het punt. Een tool-site is geen oplevering maar een ding dat je blijft doorontwikkelen op basis van wat er in de zoekdata gebeurt.