Building an AI-first personal website

Toen ik begon met het bouwen van mijn persoonlijke website, wist ik één ding zeker: ik wilde geen standaard portfolio. Geen scroll-through van projecten met stockfoto's en generieke beschrijvingen. Ik wilde iets dat laat zien hoe ik denk over technologie — en dat begint met interactie.

De kern van deze site is een chat-interface. In plaats van door pagina's te navigeren, praat je met een AI-versie van mij. Dit klinkt als een gimmick, maar het is een bewuste ontwerpkeuze. Een gesprek is de meest natuurlijke manier om iemand te leren kennen. Je stelt vragen, krijgt antwoorden, en ontdekt gaandeweg wat je interessant vindt.

De technische stack: Next.js 16 met App Router, React 19, TypeScript in strict mode, en Tailwind CSS 4. Waarom deze keuzes? Next.js geeft me server-side rendering voor SEO en snelle initiële load. React 19 biedt de nieuwste features zoals Server Components. TypeScript voorkomt een hele categorie bugs. En Tailwind maakt styling snel en consistent.

De AI-component wordt aangestuurd door Claude van Anthropic. Ik heb gekozen voor Claude vanwege de nuance in antwoorden en de mogelijkheid om een persoonlijke tone-of-voice te configureren. De AI kent mijn achtergrond, projecten en interesses, en kan daar natuurlijk over praten.

Een interessante uitdaging was het vinden van de balans tussen AI en statische content. Niet alles hoeft een chatgesprek te zijn. Projecten, artikelen en workshops hebben hun eigen secties met een traditionelere browse-ervaring. De chat is de verbindende factor — je kunt vanuit elk gesprek doorverwezen worden naar relevante content.

Performance was een prioriteit. De hele site laadt binnen 2 seconden op een gemiddelde verbinding. Animaties respecteren prefers-reduced-motion. De chat-interface is optimistisch gerenderd — je ziet direct je bericht verschijnen terwijl het AI-antwoord wordt gegenereerd.

Wat ik het meest heb geleerd: een AI-first interface dwingt je om na te denken over tone-of-voice op een manier die geen enkele andere website-architectuur doet. Elke prompt, elk antwoord, elke fallback moet aanvoelen als een echt gesprek. Dat is lastiger dan het klinkt — en veel leuker.