[{"data":1,"prerenderedAt":396},["ShallowReactive",2],{"{\"version\":\"published\"}\u002Fabout":3,"article-overview":350},{"data":4,"headers":328},{"story":5,"cv":325,"rels":326,"links":327},{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":317,"full_slug":317,"sort_by_date":318,"position":319,"tag_list":320,"is_startpage":114,"parent_id":318,"meta_data":318,"group_id":321,"first_published_at":322,"release_id":318,"lang":323,"path":318,"alternates":324,"default_full_slug":318,"translated_slugs":318},"About","2024-02-07T14:43:44.619Z","2026-07-23T20:55:46.333Z","2026-07-23T20:55:46.352Z",439284339,"23d2cae0-4728-4eea-ab9e-13bdba845213",{"_uid":13,"body":14,"ogImage":310,"component":314,"pageTitle":315,"pageDescription":316},"adaba37f-cd51-4cde-8cc2-0892c14264e0",[15,46,90,283,287],{"_uid":16,"title":17,"textLeft":32,"component":39,"textRight":40},"88a49437-1f9d-4d8a-a175-c521c3b059b9",{"type":18,"content":19},"doc",[20],{"type":21,"attrs":22,"content":24},"heading",{"level":23},1,[25,28,30],{"text":26,"type":27},"Creative code, ","text",{"type":29},"hard_break",{"text":31,"type":27},"impactful design.",{"type":18,"content":33},[34],{"type":35,"content":36},"paragraph",[37],{"text":38,"type":27},"I specialize in UI\u002FUX design and front-end development, creating seamless and engaging user experiences that blend functionality with aesthetics.","BlokHero",{"type":18,"content":41},[42],{"type":35,"content":43},[44],{"text":45,"type":27},"From intuitive interfaces to visual design, I bring creativity and technical precision to every project, ensuring a flawless experience.",{"_uid":47,"items":48,"title":88,"component":89},"7e4f3470-d8cb-4eb0-96d7-2722561d61fb",[49,64,76],{"_uid":50,"icon":51,"title":52,"component":53,"description":54},"73f1e7cb-941e-4a74-97f1-ac4b1e041138","","UX Design","BlokUspItem",{"type":18,"content":55},[56],{"type":35,"content":57},[58],{"text":59,"type":27,"marks":60},"As a UX designer I help companies tailor their digital products towards their users. By using common methods such as: Personas, user-stories, wireframes & user-flows.",[61],{"type":62,"attrs":63},"textStyle",{"color":51},{"_uid":65,"icon":51,"title":66,"component":53,"description":67},"0e408910-c069-439d-9023-b27ee1f60e5c","UI Design",{"type":18,"content":68},[69],{"type":35,"content":70},[71],{"text":72,"type":27,"marks":73},"Are you in need some slick visual designs? I’m here to help. Always keeping up to date with modern design and working according current design standards.",[74],{"type":62,"attrs":75},{"color":51},{"_uid":77,"icon":51,"title":78,"component":53,"description":79},"f401a7da-6c70-43af-a6ff-3196b1146466","Front-end development",{"type":18,"content":80},[81],{"type":35,"content":82},[83],{"text":84,"type":27,"marks":85},"I do think designers benefit greatly from knowing how to code. This is why I can help you with front-end development. If things get too technical don’t worry, we call some developer friends.",[86],{"type":62,"attrs":87},{"color":51},"How can I help?","BlokUsps",{"_uid":91,"items":92,"title":281,"component":282},"74f7453f-e710-4d1e-8015-fc8a111c90ea",[93,117,133,149,165,181,201,217,233,249,265],{"_uid":94,"title":95,"content":96,"component":116},"155b27dc-c3c0-4d58-bf58-e245b17d8a3e","European Space Agency",[97],{"_uid":98,"text":99,"image":109,"component":115},"a3455f5b-8f11-43f5-a6a0-35da89bf854f",{"type":18,"content":100},[101,105],{"type":35,"content":102},[103],{"text":104,"type":27},"I worked as a freelance UI\u002FUX designer for the European Space Agency, where I contributed to the development of tools for review models based on system engineering MBSE (Model-Based Systems Engineering) software. My role involved crafting intuitive interfaces and enhancing the user experience to support the technical workflow within this highly specialized engineering environment.",{"type":35,"content":106},[107],{"text":108,"type":27},"Currently, I'm part of a new project where we're creating tooling around Earth observation.",{"id":110,"alt":51,"name":51,"focus":51,"title":51,"source":51,"filename":111,"copyright":51,"fieldtype":112,"meta_data":113,"is_external_url":114},17555833,"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F274734\u002F108x39\u002F82b853f5fd\u002Fesa-logo.svg","asset",{},false,"BlokTextImage","BlokAccordionItem",{"_uid":118,"title":119,"content":120,"component":116},"3c68216e-e6f2-4483-86f4-daa1def26478","DPG Media",[121],{"_uid":122,"text":123,"image":129,"component":115},"30f61d51-28c2-4081-be3e-01009dcc84ee",{"type":18,"content":124},[125],{"type":35,"content":126},[127],{"text":128,"type":27},"I am working as a freelance front-end developer at DPG Media, where I contribute to the development of marketing portals for selling subscriptions. My role involves utilising JavaScript, Vue.js, and Nuxt.js to build dynamic, responsive interfaces that improve user engagement and conversion rates.",{"id":130,"alt":51,"name":51,"focus":51,"title":51,"source":51,"filename":131,"copyright":51,"fieldtype":112,"meta_data":132,"is_external_url":114},17555869,"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F274734\u002F848x446\u002Fc96a3361fa\u002Fdpgmedia-logo.svg",{},{"_uid":134,"title":135,"content":136,"component":116},"7950e455-bc4b-4b6f-8b3c-044b50c0cd1c","EMBASSIES",[137],{"_uid":138,"text":139,"image":145,"component":115},"04a962d5-a589-4199-bd22-c91ebe1e4a41",{"type":18,"content":140},[141],{"type":35,"content":142},[143],{"text":144,"type":27},"I worked as a front-end developer for THE EMBASSIES in collaboration with the design agency Hello Monday. The website was built using Nuxt.js and features multiple GSAP animations. It utilizes Storyblok as the CMS and was awarded a Lovie Award.",{"id":146,"alt":51,"name":51,"focus":51,"title":51,"source":51,"filename":147,"copyright":51,"fieldtype":112,"meta_data":148,"is_external_url":114},17602653,"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F274734\u002F52x52\u002F5194ca441f\u002Fembassies-icon.svg",{},{"_uid":150,"title":151,"content":152,"component":116},"40147899-7d92-4231-b558-38dc1bca7f1c","Tommy Hilfiger",[153],{"_uid":154,"text":155,"image":161,"component":115},"255a6d91-254c-4c1f-822a-b4bd6788725d",{"type":18,"content":156},[157],{"type":35,"content":158},[159],{"text":160,"type":27},"I worked as a freelance front-end developer for Tommy Hilfiger, developing their campaign website for Zendaya & Lewis Hamilton. The project involved complex animations, including scroll animations, using Nuxt.js, GSAP, and Pixi.js to create an engaging and dynamic user experience.",{"id":162,"alt":51,"name":51,"focus":51,"title":51,"source":51,"filename":163,"copyright":51,"fieldtype":112,"meta_data":164,"is_external_url":114},17562312,"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F274734\u002F1018x58\u002F017bc72158\u002Ftommy-logo.svg",{},{"_uid":166,"title":167,"content":168,"component":116},"788f04ff-29db-4dc2-98ba-a836f2af14ee","MyParcel.com",[169],{"_uid":170,"text":171,"image":177,"component":115},"4892360d-a7b8-4325-a46d-d8b8f87293ad",{"type":18,"content":172},[173],{"type":35,"content":174},[175],{"text":176,"type":27},"I've been working with MyParcel.com for a long time, focusing on UI\u002FUX design and front-end development. I designed and built their marketing website using JavaScript & Nuxt.js with Storyblok, aligning with their branding to create a seamless user experience. While their internal team developed the return and shipping portals, I contributed to shaping the brand identity and supported the creation of pitch decks.",{"id":178,"alt":51,"name":51,"focus":51,"title":51,"source":51,"filename":179,"copyright":51,"fieldtype":112,"meta_data":180,"is_external_url":114},17562334,"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F274734\u002F175x27\u002F740afbefc1\u002Fmyparcel-logo.svg",{},{"_uid":182,"title":183,"content":184,"component":116},"d7081a22-9fa5-41bf-9372-cc5a63163516","MyFreight",[185],{"_uid":186,"text":187,"image":197,"component":115},"1ea390fb-32dc-44bb-8476-e8422246f9ec",{"type":18,"content":188},[189,193],{"type":35,"content":190},[191],{"text":192,"type":27},"I designed and developed the MyFeight.com website, creating a visually appealing and user-friendly interface. My approach combined aesthetics with functionality to elevate the brand's online presence.",{"type":35,"content":194},[195],{"text":196,"type":27},"I also designed the UX and UI for the user application, ensuring a smooth and intuitive experience. My focus was on making interactions simple and visually engaging for all types of users.",{"id":198,"alt":51,"name":51,"focus":51,"title":51,"source":51,"filename":199,"copyright":51,"fieldtype":112,"meta_data":200,"is_external_url":114},14064244,"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F274734\u002F88x16\u002F5737294190\u002Fmyfreight-logo.svg",{},{"_uid":202,"title":203,"content":204,"component":116},"c30ae98f-639c-4f57-9455-24cca93b3494","Secrid",[205],{"_uid":206,"text":207,"image":213,"component":115},"5e047250-08c4-4f33-b77d-2e3e889230f2",{"type":18,"content":208},[209],{"type":35,"content":210},[211],{"text":212,"type":27},"I worked as a freelance developer at Secrid, focusing on their global website, store-locator, and several campaign websites. These projects featured rich animations, including scroll effects, and were developed using Nuxt.js, Storyblok, and Shopify. I also integrated a seamless sync between the CMS and the inventory management system, delivering a easy CMS experience.",{"id":214,"alt":51,"name":51,"focus":51,"title":51,"source":51,"filename":215,"copyright":51,"fieldtype":112,"meta_data":216,"is_external_url":114},17562305,"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F274734\u002F619x102\u002F2c33be2229\u002Fsecrid-logo.svg",{},{"_uid":218,"title":219,"content":220,"component":116},"6001fd3c-7cac-4c4f-936e-0336a33af0c4","Parkline Aqua",[221],{"_uid":222,"text":223,"image":229,"component":115},"900807bd-62ac-43ce-9d96-29ed9c4df018",{"type":18,"content":224},[225],{"type":35,"content":226},[227],{"text":228,"type":27},"I worked as a UI & UX designer for ParkLine Aqua, focusing on creating intuitive, user-centered designs. My role involved crafting wireframes, prototypes, and ensuring a seamless user experience across devices. I collaborated closely with developers to align the design with business goals and user needs.",{"id":230,"alt":51,"name":51,"focus":51,"title":51,"source":51,"filename":231,"copyright":51,"fieldtype":112,"meta_data":232,"is_external_url":114},17602662,"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F274734\u002F270x58\u002F660f138891\u002Fparkline-logo.svg",{},{"_uid":234,"title":235,"content":236,"component":116},"7ce32999-3167-4f2e-9f6d-c90afc7f66da","Jordex",[237],{"_uid":238,"text":239,"image":245,"component":115},"80909a23-8c75-46b3-af0d-d541a33b24c4",{"type":18,"content":240},[241],{"type":35,"content":242},[243],{"text":244,"type":27},"I worked as a designer and website developer for Jordex, creating their new website while implementing their updated color scheme. The site was built with Nuxt.js and Storyblok on the back-end, with a strong focus on SEO performance optimization, tailored to support their news-heavy content.",{"id":246,"alt":51,"name":51,"focus":51,"title":51,"source":51,"filename":247,"copyright":51,"fieldtype":112,"meta_data":248,"is_external_url":114},17562321,"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F274734\u002F132x32\u002F7ebd4e7869\u002Fjorder-logo.svg",{},{"_uid":250,"title":251,"content":252,"component":116},"17de18f2-1b9a-46ca-8bf8-e70c924f60a1","QuandaGo",[253],{"_uid":254,"text":255,"image":261,"component":115},"2eb9fdee-f5bc-4921-918a-d9bbc3e2c4d4",{"type":18,"content":256},[257],{"type":35,"content":258},[259],{"text":260,"type":27},"I worked as a freelance developer on a Vue.js application focused on building an AI tool for customer service optimization. My responsibilities included training AI models to enhance service efficiency, implementing a REST API for seamless integration, and developing a comprehensive design system to ensure consistency and usability across the platform.",{"id":262,"alt":51,"name":51,"focus":51,"title":51,"source":51,"filename":263,"copyright":51,"fieldtype":112,"meta_data":264,"is_external_url":114},17556438,"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F274734\u002F140x24\u002F54ab54c297\u002Fquandago-logo.svg",{},{"_uid":266,"title":267,"content":268,"component":116},"7aa14527-2734-4ac8-a6f6-8ab9868f0e62","PPRDmed",[269],{"_uid":270,"text":271,"image":277,"component":115},"d51aa35a-a71b-4b45-b50d-38fbefb4374d",{"type":18,"content":272},[273],{"type":35,"content":274},[275],{"text":276,"type":27},"I worked as a freelance designer & developer on the PPRDMed.org website, designing the site in Figma and developing it using Nuxt.js. Additionally, I implemented a REST API provided by Starion Group to ensure seamless functionality.",{"id":278,"alt":51,"name":51,"focus":51,"title":51,"source":51,"filename":279,"copyright":51,"fieldtype":112,"meta_data":280,"is_external_url":114},17562319,"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F274734\u002F246x48\u002F2c398869ee\u002Fpprdmed-white.svg",{},"Over the years, I’ve had the privilege of working with a diverse range of clients. Below a glimpse of who I had the pleasure to work with.","BlokAccordion",{"_uid":284,"headline":285,"component":286},"d7a51837-96b1-4103-8402-79d7819414a1","Latest articles","ArticleOverview",{"_uid":288,"body":289,"component":309},"d827e5ea-5996-4be1-b489-ac54c2df37c9",[290,306],{"_uid":291,"text":292,"component":305},"154ace89-08ed-4e13-a922-2a88930301d6",{"type":18,"content":293},[294,300],{"type":21,"attrs":295,"content":297},{"level":296},2,[298],{"text":299,"type":27},"Designing & Developing",{"type":21,"attrs":301,"content":302},{"level":296},[303],{"text":304,"type":27},"Impactful products. Let's work together","TextSlide",{"_uid":307,"component":308},"bb47a224-22c6-4ed1-bd1c-c9a9c2e7df20","Contact","SlideContainerBlok",{"id":311,"alt":51,"name":51,"focus":51,"title":51,"source":51,"filename":312,"copyright":51,"fieldtype":112,"meta_data":313,"is_external_url":114},17619224,"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F274734\u002F1200x630\u002Fc168e2928f\u002Fhome-seo.jpg",{},"page","About | Martinr.nl","Specializing in UI\u002FUX design and front-end development, I create seamless, engaging user experiences that blend functionality with aesthetics","about",null,-10,[],"6ad084e3-4eab-427a-9a61-ee0d60c0c191","2024-09-29T19:32:47.824Z","default",[],1784867033,[],[],{"cache-control":329,"connection":330,"content-encoding":331,"content-type":332,"date":333,"etag":334,"referrer-policy":335,"sb-be-version":336,"server":337,"transfer-encoding":338,"vary":339,"via":340,"x-amz-cf-id":341,"x-amz-cf-pop":342,"x-cache":343,"x-content-type-options":344,"x-frame-options":345,"x-permitted-cross-domain-policies":346,"x-request-id":347,"x-runtime":348,"x-xss-protection":349},"max-age=0, public, s-maxage=604800, stale-if-error=3600","keep-alive","gzip","application\u002Fjson; charset=utf-8","Fri, 24 Jul 2026 04:25:44 GMT","W\u002F\"f8f2253225e7e945574b8925bb583c98\"","strict-origin-when-cross-origin","5.924.0","nginx\u002F1.29.1","chunked","Origin,Accept-Encoding","1.1 90a1c9bfae56eb9062f3a496d1877f0c.cloudfront.net (CloudFront)","dLkzzB5S7P4JpATqUWBACnkf02x6XXOsaSO88PqUDlbAbFLOGXOBoA==","FRA60-P12","Miss from cloudfront","nosniff","SAMEORIGIN","none","7a4b8cf8-6f28-4884-942a-ccef4459abda","0.024637","0",[351,379],{"name":352,"created_at":353,"published_at":354,"updated_at":355,"id":356,"uuid":357,"content":358,"slug":371,"full_slug":372,"sort_by_date":318,"position":373,"tag_list":374,"is_startpage":114,"parent_id":375,"meta_data":318,"group_id":376,"first_published_at":377,"release_id":318,"lang":323,"path":318,"alternates":378,"default_full_slug":318,"translated_slugs":318},"Design systems in Figma: bridging design and code","2026-07-23T17:08:01.156Z","2026-07-24T04:23:52.585Z","2026-07-24T04:23:52.597Z",201264665258733,"d1b98191-a92c-43cd-a20e-49ef043a33f6",{"_uid":359,"intro":360,"title":352,"ogImage":361,"component":363,"pageTitle":364,"cover_image":365,"publish_date":369,"pageDescription":370},"1102fdae-9aae-4a19-ba2e-249097541c27","As a freelance developer at DPG Media I work on marketing portals for selling newspaper subscriptions, and as a designer I build design systems in Figma. The most valuable lesson from combining both roles: a design system only works when the Figma library and the code components mirror each other exactly.",{"id":318,"alt":318,"name":51,"focus":318,"title":318,"source":318,"filename":51,"copyright":318,"fieldtype":112,"meta_data":362},{},"article","Design systems in Figma: bridging design and code | Martinr.nl",{"id":366,"alt":51,"name":51,"focus":51,"title":51,"source":51,"filename":367,"copyright":51,"fieldtype":112,"meta_data":368,"is_external_url":114},201353095084536,"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F274734\u002F4140x2800\u002F3b67eed852\u002Ftokens.jpg",{},"2026-07-23 12:00","How I build design systems in Figma that mirror the code 1:1 — design tokens, variants that match props, and lessons from marketing portals at DPG Media.","design-systems-in-figma-bridging-design-and-code","blog\u002Fdesign-systems-in-figma-bridging-design-and-code",-30,[],201260215228911,"138bb045-c62c-4c05-b810-b6f258a679a9","2026-07-23T20:55:46.107Z",[],{"name":380,"created_at":381,"published_at":377,"updated_at":382,"id":383,"uuid":384,"content":385,"slug":391,"full_slug":392,"sort_by_date":318,"position":319,"tag_list":393,"is_startpage":114,"parent_id":375,"meta_data":318,"group_id":394,"first_published_at":377,"release_id":318,"lang":323,"path":318,"alternates":395,"default_full_slug":318,"translated_slugs":318},"Building animated marketing sites with Nuxt and Storyblok","2026-07-23T16:53:45.836Z","2026-07-23T20:55:46.431Z",201261161859583,"0b04c2c5-0af4-492a-8b11-acb132a056ab",{"_uid":386,"intro":387,"title":380,"component":363,"pageTitle":388,"publish_date":389,"pageDescription":390},"db11dbd5-af9d-4e7b-8db4-1cb85234bd1b","After building marketing sites for Secrid, THE EMBASSIES and Tommy Hilfiger, this is the stack I keep coming back to: Nuxt for rendering, Storyblok as the headless CMS, and GSAP for animation. Here is why the combination works and how I structure these projects.","Building animated marketing sites with Nuxt and Storyblok | Martinr.nl","2026-07-23 09:00","How I combine Nuxt, Storyblok and GSAP to build fast, animated marketing sites for clients like Secrid and Tommy Hilfiger — and how I structure the blocks.","building-animated-marketing-sites-with-nuxt-and-storyblok","blog\u002Fbuilding-animated-marketing-sites-with-nuxt-and-storyblok",[],"637565d2-a400-4e9a-8613-dbedf97e02e5",[],1784867143796]