# Portfolio-ervaring — case van Accessible AI

> Een filmische, scrollgestuurde webervaring die laat zien hoe we strategie, art-direction, illustratie, motion en techniek samenbrengen in high-end maatwerkwebsites.

**Type:** Maatwerk webervaring

**Positionering:** High-end websites met een eigen wereld.

**Live website:** https://nancy-portfolio-203074218477.europe-west1.run.app

## De kans

Het werk van een stedenbouwkundige beweegt tussen één straat, een waterbewuste wijk en een hele regio. Een conventioneel projectraster kon die ruimtelijke schaal of haar warme beeldtaal niet uitdrukken.

## Wat we maakten

We maakten van het portfolio één doorlopende geïllustreerde stadsreis: het raam opent, Amsterdam verschijnt en iedere wijk wordt een halte voor haar werk, opleiding en visie op stedenbouw.

## Waarom het telt

Een maatwerk webervaring die bewijst hoe Accessible AI narratieve structuur, originele art-direction en motion engineering combineert om expertise onvergetelijk te maken.

## Kerngegevens

- **Format:** Scroll-storytelling
- **Beeld:** Originele illustratie
- **Techniek:** Motion + responsive
- **Doel:** Expertise voelbaar maken

## Momenten in het product

### Het raam naar de stad

De ervaring begint als een scène en introduceert direct een eigen wereld.

**Signaal:** Narratieve entree

### Scroll als route

Beweging verbindt projecten, opleiding en visie zonder het gevoel van losse pagina’s.

**Signaal:** Motion system

### Van straat tot regio

De interface laat stedenbouwkundig werk wisselen tussen menselijke en ruimtelijke schaal.

**Signaal:** Inhoud als ruimte

## Art-direction, inhoud en motion als één verhaal.

De echte site is geen verzameling kant-en-klare animaties: de illustraties zijn handgeschreven SVG, de route komt uit één contentmodel en de scrollgestuurde scènes zijn als een doorlopende stedelijke reis georkestreerd.

### Scroll als dramaturgie

**Narrative UX:** Raam, stad, projecthaltes en avond vormen een vaste verhaallijn in plaats van losse paginaovergangen.

### Een eigen geïllustreerde stad

**Original art:** Gebouwen, straten en karakters zijn projectspecifieke vectorillustraties, niet een stock- of templatepakket.

### De reis volgt de inhoud

**Content model:** Projecten, opleiding, gereedschap en contact komen uit één journey-model waarop de scènes reageren.

### Performance en security meegebouwd

**Delivery:** De React-ervaring wordt statisch gebundeld, met nginx, compressie, CSP en schaalbare Cloud Run-deployment.

## Een inhoudsroute bestuurt de hele visuele wereld.

Content en art-assets blijven gescheiden van de motionlogica, zodat de ervaring rijk aanvoelt zonder onbeheerbaar te worden.

1. **Journey data:** Stops + verhaal
2. **Sketch:** Original SVG art
3. **Scenes:** Window + city
4. **Motion:** Scroll + easing
5. **Delivery:** Responsive + CSP

**Gecontroleerde uitkomst:** Een high-end website die expertise laat voelen en tegelijk als echt softwareproduct onderhoudbaar blijft.

## Details uit de productlaag

### React + Framer Motion + Lenis

**Techniek:** Scrollprogress, sceneovergangen en smooth scrolling zijn bewust als één interactiesysteem gebouwd.

### Geen externe generatie-API

**Illustratie:** De herkenbare beeldtaal leeft als originele SVG-bouwstenen direct in de codebase.

### Motion met een uitweg

**Toegankelijkheid:** Responsieve compositie en reduced-motiongedrag horen bij dezelfde premium afwerking.

## Systeemflow

1. **Kaderen:** Het inhoudelijke verhaal en publiek bepalen
2. **Storyboard:** Projecten als stops in één reis ordenen
3. **Illustreren:** Een eigen stad en beeldtaal maken
4. **Bouwen:** Motion, responsiviteit en performance uitwerken

## Voorbeeld / expertise tonen

### Een specialist heeft sterk werk, maar een standaard projectraster maakt het inwisselbaar.

De uitdaging is niet meer projecten tonen; het is laten voelen hoe de specialist kijkt, kiest en verbanden legt.

1. Bepaal het ene inhoudelijke perspectief dat alle projecten verbindt.
2. Maak een visuele metafoor die beweging en schaal ondersteunt.
3. Bouw ieder project als bewijs binnen die route.
4. Optimaliseer motion voor toegankelijkheid en mobiele performance.

**Uitkomst:** Een website die vakmanschap demonstreert vóór de bezoeker één cv-regel heeft gelezen.

## Werkprincipes

- Een reis, geen raster
- Getekend met karakter
- Iedere schaal vertelt een verhaal

## Gerelateerde inzichten

- [Toegankelijke AI-interfaces ontwerpen: WCAG 2.2, de EAA en de interactiekloof ertussen](https://www.accessible-ai.nl/insights/accessible-ai-interfaces-wcag-eaa/index.md) — Een praktische gids voor toegankelijk AI-interactiedesign—met WCAG 2.2, de context van de European Accessibility Act en productpatronen voor probabilistische interfaces.
- [Vindbaar worden in Google AI Mode en ChatGPT Search: de nuchtere gids voor 2026](https://www.accessible-ai.nl/insights/generatieve-ai-vindbaarheid-2026/index.md) — Een actuele, bronvaste aanpak voor SEO, AEO en generatieve zoekvindbaarheid—van citeerbare inhoud en interne links tot OAI-SearchBot, structured data en IndexNow.
- [Een AI-product laten bouwen: scope, kostenlogica en de route naar productie](https://www.accessible-ai.nl/insights/ai-product-bouwen-kosten-aanpak/index.md) — Geen vage prijsrange, maar een beslismodel voor scope: welke productlagen bepalen werk, risico en doorlooptijd, en hoe start je met het kleinste complete bewijs?