Portfolio-ervaring
Een filmische, scrollgestuurde webervaring die laat zien hoe we strategie, art-direction, illustratie, motion en techniek samenbrengen in high-end maatwerkwebsites.
- High-end webdesign
- Narratief design
- Art-direction
- Motion-development
Een website als eigen wereld: ontworpen om expertise voelbaar te maken.
Dit project bewijst hoe wij strategie, originele art-direction, illustratie en motion tot één premium webervaring bouwen—ver voorbij een standaard portfolio-raster.
- Format
- Scroll-storytelling
- Beeld
- Originele illustratie
- Techniek
- Motion + responsive
- Doel
- Expertise voelbaar maken
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.
Drie momenten waarop het systeem zijn waarde bewijst.
Het raam naar de stad
De ervaring begint als een scène en introduceert direct een eigen wereld.
Scroll als route
Beweging verbindt projecten, opleiding en visie zonder het gevoel van losse pagina’s.
Van straat tot regio
De interface laat stedenbouwkundig werk wisselen tussen menselijke en ruimtelijke schaal.
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
Raam, stad, projecthaltes en avond vormen een vaste verhaallijn in plaats van losse paginaovergangen.
Een eigen geïllustreerde stad
Gebouwen, straten en karakters zijn projectspecifieke vectorillustraties, niet een stock- of templatepakket.
De reis volgt de inhoud
Projecten, opleiding, gereedschap en contact komen uit één journey-model waarop de scènes reageren.
Performance en security meegebouwd
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.
- 01Journey dataStops + verhaal
- 02SketchOriginal SVG art
- 03ScenesWindow + city
- 04MotionScroll + easing
- 05DeliveryResponsive + CSP
Gecontroleerde uitkomstEen high-end website die expertise laat voelen en tegelijk als echt softwareproduct onderhoudbaar blijft.
Details die het verschil maken.
VerdiepingSpecifieke productdetails
React + Framer Motion + Lenis
Scrollprogress, sceneovergangen en smooth scrolling zijn bewust als één interactiesysteem gebouwd.
Geen externe generatie-API
De herkenbare beeldtaal leeft als originele SVG-bouwstenen direct in de codebase.
Motion met een uitweg
Responsieve compositie en reduced-motiongedrag horen bij dezelfde premium afwerking.
- 01Kaderen
Het inhoudelijke verhaal en publiek bepalen
- 02Storyboard
Projecten als stops in één reis ordenen
- 03Illustreren
Een eigen stad en beeldtaal maken
- 04Bouwen
Motion, responsiviteit en performance uitwerken
- Een reis, geen raster
- Getekend met karakter
- Iedere schaal vertelt een verhaal
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.
- 01
Bepaal het ene inhoudelijke perspectief dat alle projecten verbindt.
- 02
Maak een visuele metafoor die beweging en schaal ondersteunt.
- 03
Bouw ieder project als bewijs binnen die route.
- 04
Optimaliseer motion voor toegankelijkheid en mobiele performance.
Bekijk Portfolio-ervaring in de echte omgeving.
Ervaar het product, de website en de details die deze case in de praktijk laten werken.