[{"data":1,"prerenderedAt":2149},["Reactive",2],{"author":3,"content-query-1DxZ1vYQk5":113,"projects":428,"navigation":1941,"content-query-hXZ0aIugG4":2006,"content-query-Lc4lY14zQj":2096},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":5,"title":7,"description":8,"navigation":9,"firstname":12,"lastname":13,"image":14,"body":16,"_type":108,"_id":109,"_source":110,"_file":111,"_extension":112},"/about","",false,"About Stef","As a developer and designer, I create apps and websites, guiding them seamlessly from idea through delivery.",{"order":10,"title":11},3,"About","Stef","Tervelde",{"src":15},"/media/about/portrait3.jpg",{"type":17,"children":18,"toc":104},"root",[19,26,31,36,43,48,53,65,75,84,94],{"type":20,"tag":21,"props":22,"children":23},"element","p",{},[24],{"type":25,"value":8},"text",{"type":20,"tag":21,"props":27,"children":28},{},[29],{"type":25,"value":30},"My expertise in development, complemented by my design training, empowers me to create solutions that not only offer excellent user experience but also facilitate ease of development.",{"type":20,"tag":21,"props":32,"children":33},{},[34],{"type":25,"value":35},"I have a passion for writing elegant and efficient code. Even though the end-users might not see the underlying code, I believe that well-structured and clean code leads to better performance, easier maintenance, and scalability. It's like an artist taking pride in their tools and materials - the quality of the code reflects the quality of the final product. This dedication to code quality is a fundamental part of my work ethic as a developer.",{"type":20,"tag":37,"props":38,"children":40},"h2",{"id":39},"my-process",[41],{"type":25,"value":42},"My Process",{"type":20,"tag":21,"props":44,"children":45},{},[46],{"type":25,"value":47},"I believe that a lot of ideas become a lot more real with a tangible prototype. This allows for better understanding, testing, and refining of the concept. Building functional prototypes early in the process not only helps in visualizing the idea but also in identifying potential issues that might arise in the later stages of development. It provides an opportunity to test the functionality, usability, and feasibility of the design. This hands-on approach allows me to iterate and improve the design rapidly, ensuring a robust and user-friendly final product.",{"type":20,"tag":21,"props":49,"children":50},{},[51],{"type":25,"value":52},"After the prototyping stage, I work iteratively towards a polished end product, working this way is a crucial part of my process. This involves refining the design, incorporating feedback, and continuously testing. Each iteration brings me closer to a solution that not only fulfills the functional requirements but also provides an intuitive and engaging user experience. This iterative process allows me to deliver high-quality, user-centric designs.",{"type":20,"tag":21,"props":54,"children":55},{},[56],{"type":20,"tag":57,"props":58,"children":62},"a",{"href":59,"rel":60},"https://github.com/Stefterv",[61],"nofollow",[63],{"type":25,"value":64},"Github",{"type":20,"tag":21,"props":66,"children":67},{},[68],{"type":20,"tag":57,"props":69,"children":72},{"href":70,"rel":71},"https://www.instagram.com/stefterv/",[61],[73],{"type":25,"value":74},"Instagram",{"type":20,"tag":21,"props":76,"children":77},{},[78],{"type":20,"tag":57,"props":79,"children":81},{"href":80},"mailto:stef@steftervel.de",[82],{"type":25,"value":83},"E-Mail",{"type":20,"tag":21,"props":85,"children":86},{},[87],{"type":20,"tag":57,"props":88,"children":91},{"href":89,"rel":90},"https://www.linkedin.com/in/stefterv/",[61],[92],{"type":25,"value":93},"LinkedIn",{"type":20,"tag":21,"props":95,"children":96},{},[97],{"type":20,"tag":57,"props":98,"children":101},{"href":99,"rel":100},"https://creativecode.berlin",[61],[102],{"type":25,"value":103},"Creative Code Berlin",{"title":5,"searchDepth":105,"depth":105,"links":106},2,[107],{"id":39,"depth":105,"text":42},"markdown","content:about.md","content","about.md","md",{"_path":114,"_dir":5,"_draft":6,"_partial":6,"_locale":5,"title":115,"description":116,"navigation":117,"skipintro":120,"class":121,"body":122,"_type":108,"_id":426,"_source":110,"_file":427,"_extension":112},"/","Developer / Designer","I am creating apps and websites",{"title":118,"order":119},"Home",1,true,"intro-page",{"type":17,"children":123,"toc":421},[124,177,235,317,350],{"type":20,"tag":125,"props":126,"children":128},"section",{"class":127},"intro",[129],{"type":20,"tag":130,"props":131,"children":133},"h1",{"id":132},"i-am-a-developer-anddesigner-creatingapps-websites-from-concepttolaunch",[134,136,142,144,149,151,156,158,163,165,170,172],{"type":25,"value":135},"I am a ",{"type":20,"tag":137,"props":138,"children":139},"strong",{},[140],{"type":25,"value":141},"developer",{"type":25,"value":143}," and ",{"type":20,"tag":137,"props":145,"children":146},{},[147],{"type":25,"value":148},"designer",{"type":25,"value":150},", creating ",{"type":20,"tag":137,"props":152,"children":153},{},[154],{"type":25,"value":155},"apps",{"type":25,"value":157}," & ",{"type":20,"tag":137,"props":159,"children":160},{},[161],{"type":25,"value":162},"websites",{"type":25,"value":164},", from ",{"type":20,"tag":137,"props":166,"children":167},{},[168],{"type":25,"value":169},"concept",{"type":25,"value":171}," to ",{"type":20,"tag":137,"props":173,"children":174},{},[175],{"type":25,"value":176},"launch",{"type":20,"tag":125,"props":178,"children":180},{"class":179},"about-me",[181,195,200,205,210,215],{"type":20,"tag":182,"props":183,"children":185},"div",{"class":184},"about-me-portrait-container",[186],{"type":20,"tag":21,"props":187,"children":188},{},[189],{"type":20,"tag":190,"props":191,"children":194},"img",{"alt":192,"class":193,"src":15},"Stef Tervelde","about-me-portrait",[],{"type":20,"tag":21,"props":196,"children":197},{},[198],{"type":25,"value":199},"My name is Stef Tervelde. I'm an interaction designer and developer, a human who thinks about the liminal space between a person and their computer.",{"type":20,"tag":21,"props":201,"children":202},{},[203],{"type":25,"value":204},"Discovering new applications for both the tools I already use and exploring new tools. My work is primarily focused on whether new technologies can be effectively applied to solve specific problems, even if they were not originally intended for such purposes.",{"type":20,"tag":21,"props":206,"children":207},{},[208],{"type":25,"value":209},"In my work, I thrive on delving deeply into technology, acquiring a thorough understanding of it, and then eagerly sharing that knowledge through my role as an educator.",{"type":20,"tag":21,"props":211,"children":212},{},[213],{"type":25,"value":214},"Sounds exiting?",{"type":20,"tag":21,"props":216,"children":217},{},[218,225,230],{"type":20,"tag":57,"props":219,"children":222},{"href":220,"class":221},"/contact","button",[223],{"type":25,"value":224},"Contact",{"type":20,"tag":57,"props":226,"children":228},{"href":59,"class":221,"rel":227},[61],[229],{"type":25,"value":64},{"type":20,"tag":57,"props":231,"children":233},{"href":89,"class":221,"rel":232},[61],[234],{"type":25,"value":93},{"type":20,"tag":125,"props":236,"children":238},{"class":237},"dark",[239,245,250,310,315],{"type":20,"tag":37,"props":240,"children":242},{"id":241},"what-do-i-do",[243],{"type":25,"value":244},"What do I do?",{"type":20,"tag":21,"props":246,"children":247},{},[248],{"type":25,"value":249},"Here’s a quick list of the things I am best at. Plus my favourite tools for each skill.",{"type":20,"tag":182,"props":251,"children":253},{"class":252},"services",[254],{"type":20,"tag":255,"props":256,"children":257},"ul",{},[258,270,280,290,300,305],{"type":20,"tag":259,"props":260,"children":261},"li",{},[262,264],{"type":25,"value":263},"Web development ",{"type":20,"tag":265,"props":266,"children":267},"span",{},[268],{"type":25,"value":269},"React, Next.js, Directus",{"type":20,"tag":259,"props":271,"children":272},{},[273,275],{"type":25,"value":274},"App development ",{"type":20,"tag":265,"props":276,"children":277},{},[278],{"type":25,"value":279},"Swift, Kotlin",{"type":20,"tag":259,"props":281,"children":282},{},[283,285],{"type":25,"value":284},"User Experience design ",{"type":20,"tag":265,"props":286,"children":287},{},[288],{"type":25,"value":289},"Figma, Notebook",{"type":20,"tag":259,"props":291,"children":292},{},[293,295],{"type":25,"value":294},"Unity development ",{"type":20,"tag":265,"props":296,"children":297},{},[298],{"type":25,"value":299},"C#",{"type":20,"tag":259,"props":301,"children":302},{},[303],{"type":25,"value":304},"AR & VR product development",{"type":20,"tag":259,"props":306,"children":307},{},[308],{"type":25,"value":309},"Experimental technology consulting",{"type":20,"tag":21,"props":311,"children":312},{},[313],{"type":25,"value":314},"I thrive on tackling challenging projects that push the boundaries of what's possible. Whether you're facing a task that seems impossible or a complex issue, I am excited to discover creative and innovative solutions!",{"type":25,"value":316},"  ",{"type":20,"tag":125,"props":318,"children":320},{"class":319},"projects",[321,326,340],{"type":20,"tag":37,"props":322,"children":323},{"id":319},[324],{"type":25,"value":325},"Projects",{"type":20,"tag":182,"props":327,"children":329},{"class":328},"list",[330,336],{"type":20,"tag":331,"props":332,"children":335},"project",{"class":333,"slug":334},"large","projects/licht-erlebnisse",[],{"type":20,"tag":331,"props":337,"children":339},{"class":333,"slug":338},"projects/syncreality",[],{"type":20,"tag":21,"props":341,"children":342},{},[343],{"type":20,"tag":57,"props":344,"children":347},{"href":345,"class":346},"/projects/","button large",[348],{"type":25,"value":349},"More Projects",{"type":20,"tag":125,"props":351,"children":353},{"class":352},"dark qa",[354,360],{"type":20,"tag":37,"props":355,"children":357},{"id":356},"any-more-questions",[358],{"type":25,"value":359},"Any more questions?",{"type":20,"tag":255,"props":361,"children":362},{},[363,377,390,403],{"type":20,"tag":259,"props":364,"children":365},{},[366,371,375],{"type":20,"tag":137,"props":367,"children":368},{},[369],{"type":25,"value":370},"Q: Where are you located?",{"type":20,"tag":372,"props":373,"children":374},"br",{},[],{"type":25,"value":376},"A: I live and work in Berlin, Germany.",{"type":20,"tag":259,"props":378,"children":379},{},[380,385,388],{"type":20,"tag":137,"props":381,"children":382},{},[383],{"type":25,"value":384},"Q: Do you work remotely?",{"type":20,"tag":372,"props":386,"children":387},{},[],{"type":25,"value":389},"A: Yes I am available for remote work.",{"type":20,"tag":259,"props":391,"children":392},{},[393,398,401],{"type":20,"tag":137,"props":394,"children":395},{},[396],{"type":25,"value":397},"Q: Why choose a single freelancer over an agency?",{"type":20,"tag":372,"props":399,"children":400},{},[],{"type":25,"value":402},"A: Hiring me combines the benefits of both design and development expertise in one person. This integrated approach often leads to more unique and creative solutions than when these skills are distributed among several individuals in an agency.",{"type":20,"tag":259,"props":404,"children":405},{},[406,411,414,416],{"type":20,"tag":137,"props":407,"children":408},{},[409],{"type":25,"value":410},"Q: I have a project that has already been developed in another language, can you still help?",{"type":20,"tag":372,"props":412,"children":413},{},[],{"type":25,"value":415},"A: I'm proficient in a large variety of languages and feel comfortable learning new ones, feel free to ",{"type":20,"tag":57,"props":417,"children":418},{"href":220},[419],{"type":25,"value":420},"ask me",{"title":5,"searchDepth":105,"depth":105,"links":422},[423,424,425],{"id":241,"depth":105,"text":244},{"id":319,"depth":105,"text":325},{"id":356,"depth":105,"text":359},"content:index.md","index.md",[429,468,566,648,709,921,955,996,1195,1326,1372,1448,1538,1607,1700,1817,1900],{"_path":430,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":431,"description":432,"project":433,"visible":120,"image":444,"body":447,"_type":108,"_id":466,"_source":110,"_file":467,"_extension":112},"/projects/axifigma","AxiDraw + Figma","Easily control an AxiDraw drawing machine from Figma. Prepare your vector art and send it to the plotter in one click.",{"client":434,"time":436,"stack":437,"link":442},[435],"AxiDraw users","Oktober 2020",[438,439,440,441],"Electron","Nuxt.js","Vue.js","EBB",{"href":443,"title":431},"https://axifigma.steftervel.de/",{"src":445,"type":446},"/media/axifigma/plugincover.png","image",{"type":17,"children":448,"toc":464},[449,454,459],{"type":20,"tag":21,"props":450,"children":451},{},[452],{"type":25,"value":453},"An axidraw figma driver",{"type":20,"tag":21,"props":455,"children":456},{},[457],{"type":25,"value":458},"The existing stack for using a axidraw pen plotter was not a great experience\nWanted to streamline this experience",{"type":20,"tag":21,"props":460,"children":461},{},[462],{"type":25,"value":463},"Don't have an axidraw because of this reason, now I could buy one and start developing the plugin further",{"title":5,"searchDepth":105,"depth":105,"links":465},[],"content:projects:axifigma.md","projects/axifigma.md",{"_path":469,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":470,"description":471,"image":472,"project":474,"after":486,"order":487,"visible":120,"tags":488,"todos":492,"body":494,"_type":108,"_id":564,"_source":110,"_file":565,"_extension":112},"/projects/beastsofbalance","Beasts of Balance: AR","Adding an augmented reality layer on top of an interactive physical board game without interfering in the existing game",{"type":446,"src":473,"published":120},"/media/bob/hero-bob-2.png",{"time":475,"stack":476,"client":480,"role":483},2018,[477,299,478,479],"Unity","ARKit","Objective-C",[481,482],"NEEEU Spaces","Sensible Object",[484,485],"Designer","Developer","nrc-aivd",4,[489,490,491],"unity","app","augmented reality",[493],"add credits",{"type":17,"children":495,"toc":562},[496,501,505,514,526,529,534,539,552,557],{"type":20,"tag":21,"props":497,"children":498},{},[499],{"type":25,"value":500},"Tabletop games are as old as time, so how would we extend this idea with modern technology, that is the question that Beasts of Balance tries to answer and they asked us to help develop an Augmented Reality extension to their already digitally augmented game.",{"type":20,"tag":502,"props":503,"children":504},"hr",{},[],{"type":20,"tag":506,"props":507,"children":508},"blockquote",{},[509],{"type":20,"tag":21,"props":510,"children":511},{},[512],{"type":25,"value":513},"How can Augmented Reality improve the experience of an existing game without altering its core gameplay? Beasts of Balance is one of the most acclaimed connected games of 2018, so when NEEEU was invited to research and develop an augmented reality layer for the game, we jumped at the chance.\nThrough agile prototyping, we found that augmented reality elements could make recording and sharing the important moments of gameplay fun, without distracting from the game itself. We developed an AR extension to the app that lets players record and share videos of their game that show a vibrant, alternative world appearing out of their physical creations.",{"type":20,"tag":21,"props":515,"children":516},{},[517,519],{"type":25,"value":518},"- Original article from ",{"type":20,"tag":57,"props":520,"children":523},{"href":521,"rel":522},"https://neu.io/projects/adding-an-augmented-reality-layer-to-the-beasts-of-balance",[61],[524],{"type":25,"value":525},"NEEEU.io",{"type":20,"tag":502,"props":527,"children":528},{},[],{"type":20,"tag":21,"props":530,"children":531},{},[532],{"type":25,"value":533},"My role within this project was to develop the AR extension within the codebase of the existing game.",{"type":20,"tag":21,"props":535,"children":536},{},[537],{"type":25,"value":538},"The initial testing phase was testing if the existing product could be used as a digital marker for aligning the game world and real world. It turned out it could be used although because it was rotationally symmetric the world would sometimes align up-side down. This was easily fixed by looking at the down vector of gravity and thus it was possible to align.",{"type":20,"tag":21,"props":540,"children":541},{},[542],{"type":20,"tag":543,"props":544,"children":551},"iframe",{"src":545,"frameBorder":546,"allow":547,"style":548,"title":549,"dataReady":550},"https://player.vimeo.com/video/698160339?title=0&byline=0&portrait=0&color=ffc1c1&muted=1&autoplay=1&dnt=1&loop=1&app_id=122963","0","autoplay; fullscreen; picture-in-picture","width:100%;height:100%; aspect-ratio: 16 / 9","BoBProm.mp4","true",[],{"type":20,"tag":21,"props":553,"children":554},{},[555],{"type":25,"value":556},"Another nice challenge within this project was to find a way to translate the 2D drawings of the beasts into 3D. Luckily the beasts were already vector drawings and could be extended into 3D space with minimal interventions from the artist.",{"type":20,"tag":21,"props":558,"children":559},{},[560],{"type":25,"value":561},"The final challenge was to engineer and design the extension in such a way that it would not break the game for people with devices that didn't have support for AR. This was a little tricky as of the time of development AR was still in early stages and documentation and features were a lot less fleshed out.",{"title":5,"searchDepth":105,"depth":105,"links":563},[],"content:projects:beastsofbalance.md","projects/beastsofbalance.md",{"_path":567,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":568,"description":569,"image":570,"project":572,"time":583,"order":584,"visible":120,"tags":585,"body":587,"_type":108,"_id":646,"_source":110,"_file":647,"_extension":112},"/projects/consimity","Consimity","Applying interactive design and development to a theatre performance",{"type":446,"src":571,"published":120},"/media/consimity/show4-7.jpg",{"stack":573,"client":578,"time":580,"role":582},[574,575,576,577],"Vue","Nuxt","Objective C","Swift",[579],"Minna Partanen",[581],2019,[485],"Fall 2019",8.5,[586],"performance",{"type":17,"children":588,"toc":644},[589,594,601,608,612,617,630,635,640],{"type":20,"tag":21,"props":590,"children":591},{},[592],{"type":25,"value":593},"I was invited by Minna Partanen to participate in the development and perfomance of her theatre show, with the question of how we could integrate modern tech into the show.",{"type":20,"tag":21,"props":595,"children":596},{},[597],{"type":20,"tag":190,"props":598,"children":600},{"alt":5,"src":599},"/media/consimity/show4-4.jpg",[],{"type":20,"tag":21,"props":602,"children":603},{},[604],{"type":20,"tag":190,"props":605,"children":607},{"alt":5,"src":606},"/media/consimity/show4-23.jpg",[],{"type":20,"tag":609,"props":610,"children":611},"stats",{},[],{"type":20,"tag":21,"props":613,"children":614},{},[615],{"type":25,"value":616},"Early on in our talks we came up with the idea of having an avatar for her to react to within the performance. Because the budget is quite limited I had to come up with a quick way of creating a digital avatar that also looked good and had enough expressiveness.",{"type":20,"tag":21,"props":618,"children":619},{},[620,622,628],{"type":25,"value":621},"I realised in that moment that my iPhone has this kind of system build in, I let Minna create the avatar right then and there and thus ",{"type":20,"tag":623,"props":624,"children":625},"em",{},[626],{"type":25,"value":627},"stefanie",{"type":25,"value":629}," was born.",{"type":20,"tag":21,"props":631,"children":632},{},[633],{"type":25,"value":634},"In the next few weeks I managed to use Apple's private framework to isolate the Memoji into a seperate app that could be displayed during the performance.",{"type":20,"tag":21,"props":636,"children":637},{},[638],{"type":25,"value":639},"Furthermore I helped during the development of the project with various technical things such as, setting up a network for all the technical support to communicate on, and also helping manage the digital chatter.",{"type":20,"tag":446,"props":641,"children":643},{":alt":550,"src":642},"/media/consimity/show4-39.jpg",[],{"title":5,"searchDepth":105,"depth":105,"links":645},[],"content:projects:consimity.md","projects/consimity.md",{"_path":649,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":103,"description":650,"order":651,"visible":120,"todos":652,"image":654,"project":656,"tags":665,"body":668,"_type":108,"_id":707,"_source":110,"_file":708,"_extension":112},"/projects/creative-code-berlin","Unquestionably, the best tech meetup in Berlin, no bias",8.6,[653],"Screenshot test",{"src":655},"/media/creative-code-berlin/logo.png",{"type":657,"role":660,"duration":661,"stack":663},[658,659],"Website","Branding",[484,485],[662],"2020 — 2023",[664],"Nuxtjs",[666,667],"website","branding",{"type":17,"children":669,"toc":705},[670,675,680,688,691,696,701],{"type":20,"tag":21,"props":671,"children":672},{},[673],{"type":25,"value":674},"I am part of a team of people that organises the Creative Code Berlin meetups.",{"type":20,"tag":21,"props":676,"children":677},{},[678],{"type":25,"value":679},"As part of this I took on the task of creating the website for Creative Code Berlin. The primary feature of this website is that it serves as a collection of various links. These links provide valuable resources and information to our community.",{"type":20,"tag":21,"props":681,"children":682},{},[683],{"type":20,"tag":190,"props":684,"children":687},{"alt":5,"src":685,"style":686},"/media/creative-code-berlin/Large.png","aspect-ratio: 1; border-radius: 20%",[],{"type":20,"tag":609,"props":689,"children":690},{},[],{"type":20,"tag":21,"props":692,"children":693},{},[694],{"type":25,"value":695},"In addition to this, I also undertook the responsibility of updating the branding of Creative Code Berlin. This involved designing and implementing a new logo to better represent our brand identity.",{"type":20,"tag":21,"props":697,"children":698},{},[699],{"type":25,"value":700},"I also developed a generator for social media posts. This tool streamlines the process of creating posts for the various social media platforms.",{"type":20,"tag":446,"props":702,"children":704},{"src":703},"/media/creative-code-berlin/generator.png",[],{"title":5,"searchDepth":105,"depth":105,"links":706},[],"content:projects:creative-code-berlin.md","projects/creative-code-berlin.md",{"_path":710,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":711,"description":712,"order":119,"visible":120,"project":713,"image":726,"todos":728,"tags":731,"body":734,"_type":108,"_id":919,"_source":110,"_file":920,"_extension":112},"/projects/immersive-computing","Immersive Computing","Examining the inner workings of an active processor is normally impossible. This custom designed, simulated processor gives an insight into the process of  computation.",{"type":714,"role":717,"duration":719,"stack":721,"exhibits":723},[715,716],"Installation","Augment Reality Installation",[484,485,718],"Researcher",[720],"2016 — 2020",[477,299,722],"HTC Vive",[724,725],"Arnhemse Nieuwe 2017","Gogbot Enschede 2017",{"src":727},"/media/imc/ImmersiveComputing0.jpg",[729,730],"media search","add videos",[489,732,733],"game","installation",{"type":17,"children":735,"toc":915},[736,741,746,751,771,775,791,794,799,804,811,819,824,827,832,837,842,847,852,857,861],{"type":20,"tag":21,"props":737,"children":738},{},[739],{"type":25,"value":740},"General purpose computing has taken the world by storm in the last three decades, turning our planet into a enormous network of computers. All of this computing is powered by extremely tiny micro devices. These processors are the main hub for all these computational processes. They power a wide range of different activities and have become very important to daily life. Because of their tiny scale, taking a look inside a running processor is difficult to say the least. Leading to a disconnect between the very physical process that takes place to perform the computing and our understanding and experiences of these processors.",{"type":20,"tag":21,"props":742,"children":743},{},[744],{"type":25,"value":745},"To give more insight into the computational process, I have built a processor within my own custom simulation software. Freed of the limitations of the physical world, this processor can be examined during operation.",{"type":20,"tag":446,"props":747,"children":750},{"alt":748,"src":749},"Close up","/media/imc/closeup1.png",[],{"type":20,"tag":21,"props":752,"children":753},{},[754,756,769],{"type":25,"value":755},"This project is my personal research / artistic work that I have been working since / for graduating. It was heavily inspired by a two week workshop by Ralf Baecker ",{"type":20,"tag":757,"props":758,"children":759},"sup",{},[760],{"type":20,"tag":57,"props":761,"children":766},{"href":762,"ariaDescribedBy":763,"dataFootnoteRef":120,"id":765},"#user-content-fn-ralfbaecker",[764],"footnote-label","user-content-fnref-ralfbaecker",[767],{"type":25,"value":768},"1",{"type":25,"value":770}," and the result of that workshop is the Minecraft computer",{"type":20,"tag":331,"props":772,"children":774},{"slug":773,"small":550},"projects/minecraft",[],{"type":20,"tag":21,"props":776,"children":777},{},[778,780],{"type":25,"value":779},"The following text describes the first version of the installation. I have recently started a second version of the project. Motivated by the fact that a physical installation has a very limited reach, and something called the pandemic happened, I have decided to try and create a gamified version of concept. Updates of my progress are available on my Instagram ",{"type":20,"tag":757,"props":781,"children":782},{},[783],{"type":20,"tag":57,"props":784,"children":788},{"href":785,"ariaDescribedBy":786,"dataFootnoteRef":120,"id":787},"#user-content-fn-instagram",[764],"user-content-fnref-instagram",[789],{"type":25,"value":790},"2",{"type":20,"tag":502,"props":792,"children":793},{},[],{"type":20,"tag":21,"props":795,"children":796},{},[797],{"type":25,"value":798},"Immersive computing practically is a fully transparent computer or processor. It shows the visitor the inner working of the most central part of the computer. Aside from that it uses storytelling elements to give more insight into the functionality of a processor and how this relates to people's everyday experience with computers.",{"type":20,"tag":21,"props":800,"children":801},{},[802],{"type":25,"value":803},"The processor is presented in Virtual Reality in order to create\na feeling of presence and physicality. Visitors are able to get a physical experience of the computational processes that are happening in front of them.",{"type":20,"tag":805,"props":806,"children":808},"h3",{"id":807},"what-is-it",[809],{"type":25,"value":810},"What is it?",{"type":20,"tag":21,"props":812,"children":813},{},[814],{"type":20,"tag":190,"props":815,"children":818},{"alt":816,"src":817},"The installation in use","/media/imc/4.jpg",[],{"type":20,"tag":21,"props":820,"children":821},{},[822],{"type":25,"value":823},"The installation consists of a 50cm x 50cm x 200cm frame with sides that could be held which would can be used to interact with the computer and surrounding installation. On the top the computer was housed and displayed in the rawest form it could be whilst still operational.",{"type":20,"tag":609,"props":825,"children":826},{},[],{"type":20,"tag":446,"props":828,"children":831},{"alt":829,"src":830},"Closeup of the physical computer","/media/imc/1.jpg",[],{"type":20,"tag":21,"props":833,"children":834},{},[835],{"type":25,"value":836},"People could walk up to the installation and pick up the headset. Putting on the headset revealed a simplified version of the space around them. They are then presented with the computer first, followed by a series of interactive steps explaining how the different building blocks of the computer operate. They walk around and if they finished a chapter they switch sides.",{"type":20,"tag":446,"props":838,"children":841},{"alt":839,"src":840},"Comparison between reality and virtuality","/media/imc/5.gif",[],{"type":20,"tag":21,"props":843,"children":844},{},[845],{"type":25,"value":846},"The installation consisted of the frame and was accompanied by two ceiling-mountable stands that would carry the lighthouse stations for tracking. Alignment between the digital computer and the physical installation was done manually.",{"type":20,"tag":21,"props":848,"children":849},{},[850],{"type":25,"value":851},"The concept I think is still delightfully simple to explain even though the work goes quite in-depth:",{"type":20,"tag":21,"props":853,"children":854},{},[855],{"type":25,"value":856},"In the last 25 years the computer has taken over everyday life. Computers have given us a lot of new possibilities, especially combined with the internet.\nBut every computer that you will run into is a black box, or rather, a tiny microchip somewhere in the housing packed in between a screen, keyboard, and other extensions. This means that most people have a very abstract relationship to computing. Which is weird because in its essence it is a very physical process. Immersive computing tries to expose this physicality by being a completely transparent computer. It is manipulatable in real time and every part of the computing logic is exposed. Hopefully the work can give people some insight into how computing happens and why it sometimes differs from our non-digital experiences.",{"type":20,"tag":446,"props":858,"children":860},{"alt":816,"src":859},"/media/imc/6.jpg",[],{"type":20,"tag":125,"props":862,"children":865},{"className":863,"dataFootnotes":120},[864],"footnotes",[866,873],{"type":20,"tag":37,"props":867,"children":870},{"className":868,"id":764},[869],"sr-only",[871],{"type":25,"value":872},"Footnotes",{"type":20,"tag":874,"props":875,"children":876},"ol",{},[877,899],{"type":20,"tag":259,"props":878,"children":880},{"id":879},"user-content-fn-ralfbaecker",[881,888,890],{"type":20,"tag":57,"props":882,"children":885},{"href":883,"rel":884},"https://rlfbckr.io",[61],[886],{"type":25,"value":887},"Ralf Baecker's Website",{"type":25,"value":889}," ",{"type":20,"tag":57,"props":891,"children":896},{"href":892,"ariaLabel":893,"className":894,"dataFootnoteBackref":120},"#user-content-fnref-ralfbaecker","Back to content",[895],"data-footnote-backref",[897],{"type":25,"value":898},"↩",{"type":20,"tag":259,"props":900,"children":902},{"id":901},"user-content-fn-instagram",[903,908,909],{"type":20,"tag":57,"props":904,"children":906},{"href":70,"rel":905},[61],[907],{"type":25,"value":74},{"type":25,"value":889},{"type":20,"tag":57,"props":910,"children":913},{"href":911,"ariaLabel":893,"className":912,"dataFootnoteBackref":120},"#user-content-fnref-instagram",[895],[914],{"type":25,"value":898},{"title":5,"searchDepth":105,"depth":105,"links":916},[917,918],{"id":807,"depth":10,"text":810},{"id":764,"depth":105,"text":872},"content:projects:immersive-computing.md","projects/immersive-computing.md",{"_path":922,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":923,"description":924,"order":925,"visible":120,"image":926,"tags":928,"body":931,"_type":108,"_id":953,"_source":110,"_file":954,"_extension":112},"/projects/k67","K67","Creating a digital replica of a timeless classic",9,{"src":927},"/media/k67/white.png",[929,930],"3dprinting","modelling",{"type":17,"children":932,"toc":951},[933,938,943,947],{"type":20,"tag":21,"props":934,"children":935},{},[936],{"type":25,"value":937},"This project was created using Autodesk Fusion 360. The design is completely parametric, meaning that the dimensions and properties can be adjusted based on parameters and equations, providing a high level of flexibility and control.",{"type":20,"tag":21,"props":939,"children":940},{},[941],{"type":25,"value":942},"The design was based on measurements taken from a real-world example, ensuring a high degree of accuracy and realism. After the design phase, the model was brought to life through 3D printing.",{"type":20,"tag":446,"props":944,"children":946},{"src":945},"/media/k67/3dprint.jpeg",[],{"type":20,"tag":446,"props":948,"children":950},{"src":949},"/media/k67/3dprints.jpeg",[],{"title":5,"searchDepth":105,"depth":105,"links":952},[],"content:projects:k67.md","projects/k67.md",{"_path":956,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":957,"description":958,"visible":120,"image":959,"project":961,"order":970,"todos":971,"tags":973,"body":975,"_type":108,"_id":994,"_source":110,"_file":995,"_extension":112},"/projects/karlshorst","Polling museum visitors","An interactive module for an exploration into new digital methods for museums",{"src":960,"type":446},"/media/karlshorst/map.png",{"client":962,"stack":964,"time":966,"link":967},[963],"Musuem Karlshorst",[439,440,965],"Strapi","Spring 2020",{"href":968,"title":969},"https://opinion.museum-karlshorst.de/results","What does May 8th 1945 mean to you?",7,[972],"archived version",[974],"web",{"type":17,"children":976,"toc":992},[977,982,987],{"type":20,"tag":21,"props":978,"children":979},{},[980],{"type":25,"value":981},"A module that asks visitors to vote for how they experienced the 8th of May 1945, liberation day.",{"type":20,"tag":21,"props":983,"children":984},{},[985],{"type":25,"value":986},"We wanted to show how different parts of the world are likely to have experienced it a certain way.",{"type":20,"tag":21,"props":988,"children":989},{},[990],{"type":25,"value":991},"This module had a physical analogue, but the reach of that is of course limited and gives no insight in people's background.\nHere we could use the public ip-address to geo-locate people, and we also asked them where they were from.",{"title":5,"searchDepth":105,"depth":105,"links":993},[],"content:projects:karlshorst.md","projects/karlshorst.md",{"_path":997,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":998,"description":999,"order":105,"image":1000,"todos":1002,"visible":120,"project":1004,"tags":1012,"body":1014,"_type":108,"_id":1193,"_source":110,"_file":1194,"_extension":112},"/projects/kiez","Kiez: Explore Berlin","An app / game which invites the user to collect all the neighbourhoods within Berlin. Shining a new light on the city",{"src":1001},"/media/kiez/map2.png",[1003],"record video",{"type":1005,"role":1007,"duration":1008,"stack":1010},[1006],"Application",[484,485],[1009],2023,[577,1011],"SwiftUI",[490,1013],"iOS",{"type":17,"children":1015,"toc":1188},[1016,1021,1029,1046,1051,1056,1061,1066,1076,1098,1104,1109,1114,1120,1125,1130,1133,1138,1143,1154,1159],{"type":20,"tag":21,"props":1017,"children":1018},{},[1019],{"type":25,"value":1020},"This project started with the curiosity of a good friend of mine, they were always very interested in the borders between the different neighbourhoods in Berlin.",{"type":20,"tag":21,"props":1022,"children":1023},{},[1024],{"type":20,"tag":190,"props":1025,"children":1028},{"alt":1026,"src":1027,"style":686},"The logo / icon","/media/kiez/icon.png",[],{"type":20,"tag":21,"props":1030,"children":1031},{},[1032,1034,1044],{"type":25,"value":1033},"That made me start wondering about those borders myself. Luckily I found a dataset on the bureau of statistics of Berlin website. ",{"type":20,"tag":757,"props":1035,"children":1036},{},[1037],{"type":20,"tag":57,"props":1038,"children":1042},{"href":1039,"ariaDescribedBy":1040,"dataFootnoteRef":120,"id":1041},"#user-content-fn-berlinstatistic",[764],"user-content-fnref-berlinstatistic",[1043],{"type":25,"value":768},{"type":25,"value":1045}," I decided to create an app to help keep track of which neighbourhood you are located in right now.",{"type":20,"tag":21,"props":1047,"children":1048},{},[1049],{"type":25,"value":1050},"Kiez is designed to enhance your city exploration experience. As you roam around, the app keeps you informed about the specific neighborhood you're currently in. But it's not just about awareness - Kiez has gamified the experience. It challenges you to 'collect' all the neighborhoods in the city, turning your urban exploration into an engaging and fun activity. Each neighborhood you visit is marked and added to your collection, encouraging you to discover new areas and learn more about the city's diverse districts. It's a unique blend of discovery, learning, and gaming.",{"type":20,"tag":21,"props":1052,"children":1053},{},[1054],{"type":25,"value":1055},"A significant portion of the development was dedicated to devising a method for notifying users upon entering a new Kiez. This task was challenging due to Apple's restrictions on the amount of background processing time allocated to apps.",{"type":20,"tag":21,"props":1057,"children":1058},{},[1059],{"type":25,"value":1060},"Did I mention there are achievements?",{"type":20,"tag":21,"props":1062,"children":1063},{},[1064],{"type":25,"value":1065},"The app's design adheres to Apple's native iOS styling. This approach was chosen to expedite the development process and to ensure an enhanced user experience right from the start.",{"type":20,"tag":21,"props":1067,"children":1068},{},[1069],{"type":20,"tag":57,"props":1070,"children":1073},{"href":1071,"rel":1072},"https://apps.apple.com/de/app/kiez/id6469036647",[61],[1074],{"type":25,"value":1075},"Download on the App Store now",{"type":20,"tag":1077,"props":1078,"children":1079},"row",{},[1080,1086,1090,1094],{"type":20,"tag":446,"props":1081,"children":1085},{"alt":1082,"src":1083,"class":1084},"Mobile phone with screenshot","/media/kiez/front.png","mobile",[],{"type":20,"tag":446,"props":1087,"children":1089},{"alt":1082,"src":1088,"class":1084},"/media/kiez/front2.png",[],{"type":20,"tag":446,"props":1091,"children":1093},{"alt":1082,"src":1092,"class":1084},"/media/kiez/front3.png",[],{"type":20,"tag":446,"props":1095,"children":1097},{"alt":1082,"src":1096,"class":1084},"/media/kiez/front4.png",[],{"type":20,"tag":805,"props":1099,"children":1101},{"id":1100},"augmented-reality",[1102],{"type":25,"value":1103},"Augmented Reality",{"type":20,"tag":21,"props":1105,"children":1106},{},[1107],{"type":25,"value":1108},"Given my keen interest in Augmented Reality (AR), I dedicated an entire day to work on the AR feature of the app. This feature is designed to enhance the user experience by providing an immersive, interactive view of the city. By overlaying digital information onto the real world, users can gain a deeper understanding of their surroundings. This work involved understanding the ARKit framework, designing the AR experience, and integrating it seamlessly with the rest of the app's functionality.",{"type":20,"tag":1110,"props":1111,"children":1113},"video",{":autoplay":550,":controls":550,":loop":550,":muted":550,":playsinline":550,"class":1084,"src":1112},"/media/kiez/videotest.mov",[],{"type":20,"tag":805,"props":1115,"children":1117},{"id":1116},"development",[1118],{"type":25,"value":1119},"Development",{"type":20,"tag":21,"props":1121,"children":1122},{},[1123],{"type":25,"value":1124},"The apps development started off with a prototype / proof of concept which I created within the span of two weeks. This proved for me the fun and also do ability of creating the App. Polish and getting the app through app review took another month after that.",{"type":20,"tag":21,"props":1126,"children":1127},{},[1128],{"type":25,"value":1129},"The most challenging part of creating an app that kind of interacts with the real world is the Quality Assurance (QA) process, it's very hard to simulate a device's day to day interactions and seeing where the app potentially fails. During development every errant simultaneously became a QA session.",{"type":20,"tag":609,"props":1131,"children":1132},{},[],{"type":20,"tag":21,"props":1134,"children":1135},{},[1136],{"type":25,"value":1137},"The app is written completely in native Swift and SwiftUI code with only one external library to do the processing of GeoJSON. The database and persistent storage makes heavy use of Apple's SwiftData framework and AppStorage protocol.",{"type":20,"tag":21,"props":1139,"children":1140},{},[1141],{"type":25,"value":1142},"With the help of some friends, I also managed to translate the app into German, Dutch & Polish with hopefully more translations to come in the next year.",{"type":20,"tag":21,"props":1144,"children":1145},{},[1146,1148],{"type":25,"value":1147},"The Android version is planned but waiting for some potential funding opportunities. If you know of any others ",{"type":20,"tag":57,"props":1149,"children":1151},{"href":1150},"mailto:stef@steftervel.de?subject=Kiez%20Android%20Funding",[1152],{"type":25,"value":1153},"let me know",{"type":20,"tag":446,"props":1155,"children":1158},{"alt":1156,"src":1157},"Close up of the interface","/media/kiez/map5.png",[],{"type":20,"tag":125,"props":1160,"children":1162},{"className":1161,"dataFootnotes":120},[864],[1163,1168],{"type":20,"tag":37,"props":1164,"children":1166},{"className":1165,"id":764},[869],[1167],{"type":25,"value":872},{"type":20,"tag":874,"props":1169,"children":1170},{},[1171],{"type":20,"tag":259,"props":1172,"children":1174},{"id":1173},"user-content-fn-berlinstatistic",[1175,1181,1182],{"type":20,"tag":57,"props":1176,"children":1179},{"href":1177,"rel":1178},"https://fbinter.stadt-berlin.de/fb/index.jsp",[61],[1180],{"type":25,"value":1177},{"type":25,"value":889},{"type":20,"tag":57,"props":1183,"children":1186},{"href":1184,"ariaLabel":893,"className":1185,"dataFootnoteBackref":120},"#user-content-fnref-berlinstatistic",[895],[1187],{"type":25,"value":898},{"title":5,"searchDepth":105,"depth":105,"links":1189},[1190,1191,1192],{"id":1100,"depth":10,"text":1103},{"id":1116,"depth":10,"text":1119},{"id":764,"depth":105,"text":872},"content:projects:kiez.md","projects/kiez.md",{"_path":1196,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":1197,"description":1198,"order":10,"todos":1199,"visible":120,"image":1203,"tags":1205,"project":1207,"body":1221,"_type":108,"_id":1324,"_source":110,"_file":1325,"_extension":112},"/projects/licht-erlebnisse","Lamps in Augmented Reality","What if you could determine whether the object you're considering is a suitable fit for your house without having to leave your home?",[1200,1201,1202],"video examples","screenshot ideation","android screenshots",{"src":1204},"/media/licht-erlebnisse/main2-nobg.png",[490,1013,1206,491],"android",{"type":1208,"role":1210,"duration":1212,"stack":1214,"credits":1218},[1209],"App Development",[484,485,1211],"Technical Direction",[1213],"2021 — 2023",[477,1215,1216,1217],"Swift, SwiftUI","Google Filament","Kotlin, Android Compose",[1219,1220],"Stef Tervelde - Developement, Design, Technical Direction","Ronny Krüger - Producer",{"type":17,"children":1222,"toc":1322},[1223,1228,1233,1238,1250,1255,1260,1279,1282,1287,1292,1297,1302,1307,1314,1318],{"type":20,"tag":21,"props":1224,"children":1225},{},[1226],{"type":25,"value":1227},"A simple premise: What if, you didn't need to leave the house to see if the object you are considering is the right fit for your house.\nWith the introduction of Augmented Reality this is no longer an unimaginable future.",{"type":20,"tag":21,"props":1229,"children":1230},{},[1231],{"type":25,"value":1232},"This application was designed to help customers by enabling them to preview various lamp fixtures within the comfort of their own homes, directly from our website. By integrating augmented reality, we aimed to provide a seamless user experience that would allow for more confident purchasing decisions.",{"type":20,"tag":21,"props":1234,"children":1235},{},[1236],{"type":25,"value":1237},"Even though the premise was quite simple, getting all the technical details in order was a different beast. During the project we did a lot of user testing, pivoting and other technical hurdling that had to be overcome by clever design and engineering.",{"type":20,"tag":1077,"props":1239,"children":1240},{},[1241,1246],{"type":20,"tag":446,"props":1242,"children":1245},{"alt":1243,"class":1084,"src":1244},"Screenshot of the application","/media/licht-erlebnisse/screenshot1.png",[],{"type":20,"tag":446,"props":1247,"children":1249},{"alt":1243,"class":1084,"src":1248},"/media/licht-erlebnisse/screenshot2.png",[],{"type":20,"tag":21,"props":1251,"children":1252},{},[1253],{"type":25,"value":1254},"The project was a collaboration with the University of Chemnitz, who did research on the feasibility of projecting light digitally into the user's space.",{"type":20,"tag":21,"props":1256,"children":1257},{},[1258],{"type":25,"value":1259},"The primary goal of the project is to showcase lamps in an augmented reality. This involved creating a virtual environment where users can visualize how different lamps would look in their own space. Along with lighting visualizations based on the research the university was doing.",{"type":20,"tag":21,"props":1261,"children":1262},{},[1263,1270,1272],{"type":20,"tag":57,"props":1264,"children":1267},{"href":1265,"rel":1266},"https://apps.apple.com/de/app/ar-lampenplaner/id6444670089",[61],[1268],{"type":25,"value":1269},"Download on the App Store",{"type":25,"value":1271}," or ",{"type":20,"tag":57,"props":1273,"children":1276},{"href":1274,"rel":1275},"https://play.google.com/store/apps/details?id=com.lieron.lichtar.introduction.LichtAR&hl=de",[61],[1277],{"type":25,"value":1278},"Download on the Google Play Store",{"type":20,"tag":609,"props":1280,"children":1281},{},[],{"type":20,"tag":21,"props":1283,"children":1284},{},[1285],{"type":25,"value":1286},"A the start of the project, Unity was utilized to develop a prototype. Unity is a widely-used platform, particularly favored when creating augmented reality prototypes. The prototype played a crucial role as a tangible proof of concept, laying a solid foundation for subsequent development stages. It not only clarified the technical feasibility of the project but also aligned the vision between me and the client. By having a working model early in the process, we were able to establish a common understanding of the project's direction and objectives, ensuring that we were working in sync towards the same goals.",{"type":20,"tag":21,"props":1288,"children":1289},{},[1290],{"type":25,"value":1291},"After creating the prototype it was time to create the application, this time not using Unity as it had a couple of downsides to it, the main ones being: Even an empty Unity project quickly becomes a 25MB download, something our users weren't going to wait for and another thing is that AR is still a developing platform and having a layer inbetween was not a great solution going forward into the future.",{"type":20,"tag":21,"props":1293,"children":1294},{},[1295],{"type":25,"value":1296},"In the end, the application's code base is written twice, once for iOS and once for Android. This allowed for optimization on each platform and the use of the already built in UI components, creating a an app that looks consistent within its operating system.",{"type":20,"tag":21,"props":1298,"children":1299},{},[1300],{"type":25,"value":1301},"To have consistent rendering across both platform we had to choose a non-native rendering engine for the project. We ended up choosing Google's Filament, a toolset for realistic 3D model and environment rendering, which serves as the rendering engine. This cross-platform engine is crucial for delivering a convincing augmented reality experience, ensuring consistent appearance of 3D models on both iOS and Android.",{"type":20,"tag":21,"props":1303,"children":1304},{},[1305],{"type":25,"value":1306},"The biggest challenge in this project ended up being the User Experience design, three dimensions are hard for people to understand naturally and to combine that with the fact that the current iteration of Augmented Reality is still very finicky and somewhat buggy, I had to design a lot of contingencies to make it work.",{"type":20,"tag":1308,"props":1309,"children":1311},"h4",{"id":1310},"more-ar-projects",[1312],{"type":25,"value":1313},"More AR Projects",{"type":20,"tag":331,"props":1315,"children":1317},{"slug":1316},"projects/kiez",[],{"type":20,"tag":331,"props":1319,"children":1321},{"slug":1320},"projects/beastsofbalance",[],{"title":5,"searchDepth":105,"depth":105,"links":1323},[],"content:projects:licht-erlebnisse.md","projects/licht-erlebnisse.md",{"_path":1327,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":1328,"description":1329,"project":1330,"image":1336,"order":1338,"visible":120,"tags":1339,"body":1340,"_type":108,"_id":1370,"_source":110,"_file":1371,"_extension":112},"/projects/minecraft","Simulating a computer in Minecraft","An exploration into self repeating concepts",{"context":1331,"time":1332,"stack":1333,"role":718},"ArtEZ Arnhem","Fall 2015",[1334,1335],"Minecraft","Processing",{"src":1337,"type":446,"published":120},"/media/mincecraftpc/minecraft_computer4.jpg",8.4,null,{"type":17,"children":1341,"toc":1368},[1342,1347,1352,1356,1360,1364],{"type":20,"tag":21,"props":1343,"children":1344},{},[1345],{"type":25,"value":1346},"Since the dawn of the computer, people are using it's capabilities to run simulations. Simulations are an important tool in research, they allow a researcher to create an isolated test environment modelled after the real world. Simulations fascinate me as a reality that pops in and out of existence with the press of a button. To be able to run a simulation, an abstract layer of maths is required before a new reality can be created by the computer.",{"type":20,"tag":21,"props":1348,"children":1349},{},[1350],{"type":25,"value":1351},"Simulations are often associated with supercomputers because they require an enormous amount of processing power to be computed. This doesn't always have to be the case. Minecraft is a computationally simple simulation that can run on any computer.\nMinecraft simulates, beside the gameplay, it's own kind of electrical system, called redstone. Redstone can be used to create basic electronic component, like transistors and diodes.\nTo explore the relation between this mathematical layer of the computer and the simulation I created another simulation within Minecraft, to run this simulation I first needed a mathematical layer, I had to build a computer. As a programmer building a computer with redstone it was challenging to try and create the most basic functions like memory and computation.",{"type":20,"tag":446,"props":1353,"children":1355},{"src":1354},"/media/mincecraftpc/minecraft_computer1.jpg",[],{"type":20,"tag":446,"props":1357,"children":1359},{"src":1358},"/media/mincecraftpc/minecraft_computer2.jpg",[],{"type":20,"tag":446,"props":1361,"children":1363},{"src":1362},"/media/mincecraftpc/minecraft_computer3.jpg",[],{"type":20,"tag":446,"props":1365,"children":1367},{"src":1366},"/media/mincecraftpc/minecraft_computer5.jpg",[],{"title":5,"searchDepth":105,"depth":105,"links":1369},[],"content:projects:minecraft.md","projects/minecraft.md",{"_path":1373,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":481,"description":1374,"image":1375,"project":1377,"visible":120,"tags":1384,"body":1385,"_type":108,"_id":1446,"_source":110,"_file":1447,"_extension":112},"/projects/neeeu-io","Designing and building a website that attempts to give insight in a diverse portfolio and a team with a broad skillset",{"type":446,"src":1376,"published":120},"/media/neeeu/header2.png",{"role":1378,"time":1379,"stack":1380,"visit":1381,"client":1383},[1211,485],"2018 - 2019",[574,575],{"href":1382,"title":525},"https://neeeu.io",[481],[974],{"type":17,"children":1386,"toc":1444},[1387,1392,1399,1404,1411,1416,1423,1430,1437],{"type":20,"tag":21,"props":1388,"children":1389},{},[1390],{"type":25,"value":1391},"During my time at NEEEU Spaces I was responsible for developing the main website, which is used for explaining the core strengths and values of the company.",{"type":20,"tag":21,"props":1393,"children":1394},{},[1395],{"type":20,"tag":190,"props":1396,"children":1398},{"alt":5,"src":1397},"/media/neeeu/IMG_3510.jpg",[],{"type":20,"tag":21,"props":1400,"children":1401},{},[1402],{"type":25,"value":1403},"The site needed to reflect the wide skill-set of the NEEEU team\nIt includes 3 sections for the different focal points within the company.",{"type":20,"tag":21,"props":1405,"children":1406},{},[1407],{"type":20,"tag":190,"props":1408,"children":1410},{"alt":5,"src":1409},"/media/neeeu/1.png",[],{"type":20,"tag":21,"props":1412,"children":1413},{},[1414],{"type":25,"value":1415},"It was developed in Nuxt/Vue for fast iterative development",{"type":20,"tag":21,"props":1417,"children":1418},{},[1419],{"type":20,"tag":190,"props":1420,"children":1422},{"alt":5,"src":1421},"/media/neeeu/IMG_3514.jpg",[],{"type":20,"tag":21,"props":1424,"children":1425},{},[1426],{"type":20,"tag":190,"props":1427,"children":1429},{"alt":5,"src":1428},"/media/neeeu/2.png",[],{"type":20,"tag":21,"props":1431,"children":1432},{},[1433],{"type":20,"tag":190,"props":1434,"children":1436},{"alt":5,"src":1435},"/media/neeeu/IMG_3518.jpg",[],{"type":20,"tag":21,"props":1438,"children":1439},{},[1440],{"type":20,"tag":190,"props":1441,"children":1443},{"alt":5,"src":1442},"/media/neeeu/3.png",[],{"title":5,"searchDepth":105,"depth":105,"links":1445},[],"content:projects:neeeu-io.md","projects/neeeu-io.md",{"_path":1449,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":1450,"description":1451,"image":1452,"project":1454,"order":1464,"todos":1465,"visible":120,"tags":1466,"body":1467,"_type":108,"_id":1536,"_source":110,"_file":1537,"_extension":112},"/projects/nrc-aivd","Spying machinery","An in-depth interactive visualized story about the inner workings of the dutch spy agency.",{"type":446,"src":1453,"published":120},"/media/aivd/overview.png",{"role":1455,"time":1456,"stack":1457,"client":1460,"link":1461},[484,485],2016,[1458,1459],"Javascript","PHP","NRC Media",{"href":1462,"title":1463},"https://www.nrc.nl/nieuws/2017/02/07/zo-werkt-de-aivd-a1544411","Zo Werkt De AVID",10,[1200],[974],{"type":17,"children":1468,"toc":1534},[1469,1474,1479,1483,1488,1493,1498,1502,1507,1512,1530],{"type":20,"tag":21,"props":1470,"children":1471},{},[1472],{"type":25,"value":1473},"NRC journalist Kees Versteegh researched the inner workings of the AIVD, the Dutch intelligence agency. He learned the myriad of ways that the agency handles different kinds of scenario's and situations. In his research he focussed on the myriad of ways how the agency responds to different scenario’s and situations.",{"type":20,"tag":21,"props":1475,"children":1476},{},[1477],{"type":25,"value":1478},"The vast array of different cases made for a complicated story.\nThe large amount of ways the agency handled cases made the story a complicated one to tell. My challenge was to present this enormous amount of information in a visually compelling way.",{"type":20,"tag":446,"props":1480,"children":1482},{"src":1481},"/media/aivd/photo1.jpg",[],{"type":20,"tag":21,"props":1484,"children":1485},{},[1486],{"type":25,"value":1487},"Early on we determined that every process had three main steps. First information was gathered, then processed and finally action might be taken or the file would be archived.",{"type":20,"tag":21,"props":1489,"children":1490},{},[1491],{"type":25,"value":1492},"To illustrate this process we decided to recreate the AIVD headquarters. Every floor illustrates one of the three steps. We populated every floor with each of the desks a file might be going to and added explanations of their function to the desks.",{"type":20,"tag":21,"props":1494,"children":1495},{},[1496],{"type":25,"value":1497},"To help people understand the agency's inner workings we added four scenarios on top of the main graphic with the desks. Visitors start out choosing one of the four scenarios – all of which are imaginary but grounded in reality – these scenarios take the visitor on a route throughout the piece.",{"type":20,"tag":446,"props":1499,"children":1501},{"src":1500},"/media/aivd/intro.png",[],{"type":20,"tag":21,"props":1503,"children":1504},{},[1505],{"type":25,"value":1506},"The interactive infographic is built out of SVG files and programmed in Javascript (ES6), with some use of PHP and Sass. The entire visualisation is 400 kilobytes due to the extensive use of vector graphics.",{"type":20,"tag":21,"props":1508,"children":1509},{},[1510],{"type":25,"value":1511},"For this work I did the interaction design and production.\nOther credits include:",{"type":20,"tag":255,"props":1513,"children":1514},{},[1515,1520,1525],{"type":20,"tag":259,"props":1516,"children":1517},{},[1518],{"type":25,"value":1519},"Kees Versteeg: research and text",{"type":20,"tag":259,"props":1521,"children":1522},{},[1523],{"type":25,"value":1524},"Pepijn Barnard: illustrations",{"type":20,"tag":259,"props":1526,"children":1527},{},[1528],{"type":25,"value":1529},"Harrison van der Vliet: editing",{"type":20,"tag":446,"props":1531,"children":1533},{"src":1532},"/media/aivd/start.png",[],{"title":5,"searchDepth":105,"depth":105,"links":1535},[],"content:projects:nrc-aivd.md","projects/nrc-aivd.md",{"_path":1539,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":1540,"description":1541,"image":1542,"project":1544,"order":1551,"visible":120,"todos":1552,"comments":1554,"tags":1555,"body":1556,"_type":108,"_id":1605,"_source":110,"_file":1606,"_extension":112},"/projects/nrc-distance","Living with distance","Visualizing different ways proposed methods for fighting COVID-19 may impact daily life",{"src":1543,"type":446,"published":120},"/media/nrc-distance/main.png",{"client":1545,"time":1546,"stack":1548,"role":1550},[1460],[1547],2020,[439,1549],"Wordpress",[484,485],8,[1200,1553],"feature image","show the screenshots within the context of the nrc website",[974],{"type":17,"children":1557,"toc":1603},[1558,1563,1567,1572,1575,1579,1584,1589,1594,1598],{"type":20,"tag":21,"props":1559,"children":1560},{},[1561],{"type":25,"value":1562},"As the COVID-19 epidemic developed in early spring 2020, at NRC we started discussing how we could visualize some of the impacts of the new way of living that we all had to get accustomed to.",{"type":20,"tag":446,"props":1564,"children":1566},{"src":1565},"/media/nrc-distance/office-desktop.png",[],{"type":20,"tag":21,"props":1568,"children":1569},{},[1570],{"type":25,"value":1571},"The dutch government was proposing new rules regarding safety but at the same time giving the impression that everybody could continue life as normal. The team decided to research this from the perspective of a normal day. Which aspects of the day would be impacted by the new rules and how?",{"type":20,"tag":609,"props":1573,"children":1574},{},[],{"type":20,"tag":446,"props":1576,"children":1578},{"src":1577,"class":1084},"/media/nrc-distance/crossing-mobile.png",[],{"type":20,"tag":21,"props":1580,"children":1581},{},[1582],{"type":25,"value":1583},"In our project, we decided to design an interactive scrolling narrative. This narrative would display a variety of simulations, each one representing a different scenario. The purpose of these simulations was to illustrate the differences that would arise when implementing the new rules.",{"type":20,"tag":21,"props":1585,"children":1586},{},[1587],{"type":25,"value":1588},"The process of creating these simulations was a fascinating journey. During this process, I discovered that there are essentially two distinct methods to create such simulations.",{"type":20,"tag":21,"props":1590,"children":1591},{},[1592],{"type":25,"value":1593},"Each method has its own unique approach and application, offering different advantages depending on the specific requirements of the scenario being simulated. Understanding these methods and their applications can greatly enhance the effectiveness and accuracy of the simulations we create.",{"type":20,"tag":446,"props":1595,"children":1597},{"src":1596,"class":1084},"/media/nrc-distance/office-mobile.png",[],{"type":20,"tag":21,"props":1599,"children":1600},{},[1601],{"type":25,"value":1602},"The first method is to create a simulation by simulating all the different operating parts of the simulation. This turned out to be a very difficult approach as it is easy to build the parts, but if you want to tell a story with them, it becomes difficult as you have to tweak the starting parameters in such a way that the end result is as you want. The second technique is to generate the result based on a rule-set, then use those results to approximate the way to get there. This was much faster and less cpu-intensive and allowed us to tell the story better.",{"title":5,"searchDepth":105,"depth":105,"links":1604},[],"content:projects:nrc-distance.md","projects/nrc-distance.md",{"_path":1608,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":1609,"description":1610,"slug":1611,"image":1612,"project":1614,"order":1626,"visible":120,"tags":1627,"body":1629,"_type":108,"_id":1698,"_source":110,"_file":1699,"_extension":112},"/projects/outrospectre","Outrospectre","The out-of-body experience simulated by Outrospectre could provide therapy for dying people, by gently acclimatising them to the sensation of death.","outrospectre",{"type":446,"src":1613,"published":120},"/media/outrospectre/outrospectre-frank-kolkman-dutch-design-week-virtual-reality-technology_dezeen_2364_col_8-1704x1161.jpg",{"stack":1615,"role":1618,"time":1620,"client":1621,"exhibitions":1623},[477,1616,1617],"Oculus SDK","Arduino",[1619],"Technical Execution","Summer 2017",[1622],"Frank Kolkman",[1624,1625],"Dutch Design Week","V&A London",6,[733,1628],"virtual reality",{"type":17,"children":1630,"toc":1696},[1631,1636,1641,1646,1650,1655,1667,1671,1676,1681,1686,1691],{"type":20,"tag":21,"props":1632,"children":1633},{},[1634],{"type":25,"value":1635},"--",{"type":20,"tag":21,"props":1637,"children":1638},{},[1639],{"type":25,"value":1640},"To tackle \"death anxiety\" among terminally ill hospital patients, designer Frank Kolkman has created a device that simulates a near-death experience using virtual reality.",{"type":20,"tag":21,"props":1642,"children":1643},{},[1644],{"type":25,"value":1645},"Visitors to Dutch Design Week were invited to try out the experimental device, which explores how new computer technologies can address psychological issues, such as fear of mortality.",{"type":20,"tag":21,"props":1647,"children":1648},{},[1649],{"type":25,"value":1610},{"type":20,"tag":21,"props":1651,"children":1652},{},[1653],{"type":25,"value":1654},"Kolkman's device relies on video footage of the real environment instead of computer-generated visuals.",{"type":20,"tag":21,"props":1656,"children":1657},{},[1658,1660],{"type":25,"value":1659},"Full article on ",{"type":20,"tag":57,"props":1661,"children":1664},{"href":1662,"rel":1663},"https://www.dezeen.com/2017/11/23/frank-kolkman-outrospectre-near-death-experience-virtual-reality-technology-robots-health/",[61],[1665],{"type":25,"value":1666},"Dezeen",{"type":20,"tag":21,"props":1668,"children":1669},{},[1670],{"type":25,"value":1635},{"type":20,"tag":21,"props":1672,"children":1673},{},[1674],{"type":25,"value":1675},"My role within this fascinating project was to create the software running Kolkman's excellent physical design. The installation consists of two camera's mounted in a head which has 3 degrees of freedom. The visitor of the installation is asked to wear a VR headset, my task was to get the positional data from the headset to the camera mount, and as the camera mount moved into the same orientation as the user's head, I had to transport the images of the camera's into the user's headset. Giving the illusion that the person was standing behind themselves.",{"type":20,"tag":446,"props":1677,"children":1680},{"alt":1678,"src":1679},"Closeup of the mask","/media/outrospectre/outrospectre-frank-kolkman-dutch-design-week-virtual-reality-technology_dezeen_2364_col_22-1704x1174.jpg",[],{"type":20,"tag":21,"props":1682,"children":1683},{},[1684],{"type":25,"value":1685},"I ended up getting the latency from the headset to the motors down to around 30ms, which was already pretty low, but the experience was also further strengthen by utilizing the positional warp function of the headset, which meant that if the user moved their head, the image would be re-projected by the computer before the updated imagery of the cameras arrived to the headset.",{"type":20,"tag":446,"props":1687,"children":1690},{"alt":1688,"src":1689},"A diagram of the installation","/media/outrospectre/outrospectre-frank-kolkman-dutch-design-week-virtual-reality-technology_dezeen_diagram-1704x1329.jpg",[],{"type":20,"tag":446,"props":1692,"children":1695},{"alt":1693,"src":1694},"A photo of the installation","/media/outrospectre/outrospectre-frank-kolkman-dutch-design-week-virtual-reality-technology_dezeen_2364_col_20-1704x1925.jpg",[],{"title":5,"searchDepth":105,"depth":105,"links":1697},[],"content:projects:outrospectre.md","projects/outrospectre.md",{"_path":1701,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":1702,"description":1703,"featured":6,"visible":120,"published":120,"image":1704,"project":1706,"order":925,"todos":1715,"tags":1717,"body":1718,"_type":108,"_id":1815,"_source":110,"_file":1816,"_extension":112},"/projects/rnd-spotify","(RND) Spotify","Get your saved spotify albums in a randomized order",{"type":446,"src":1705,"published":120},"/media/rndspotify/IMG_3486.jpg",{"stack":1707,"link":1710,"time":1713,"role":1714,"duration":581},[574,575,1708,1709],"Spotify API","Typescript",{"href":1711,"title":1712},"https://rndspotify.stream","(Rnd)Spotify","November 2019",[484,485],[1716,1200],"update screenshots",[974],{"type":17,"children":1719,"toc":1812},[1720,1725,1730,1747,1751,1756,1761,1765,1770,1774,1778,1783],{"type":20,"tag":21,"props":1721,"children":1722},{},[1723],{"type":25,"value":1724},"I listen to a lot of Spotify, in the last five years I have listened to a total of a full year of Spotify, an average almost of 5 hours a day.",{"type":20,"tag":21,"props":1726,"children":1727},{},[1728],{"type":25,"value":1729},"All this listening and the limited user experience of Spotify meant that I kept listing to the same albums over and over again. Even though my virtual collection has grown a lot over the years, lots of albums in my collection were still gathering dust.",{"type":20,"tag":21,"props":1731,"children":1732},{},[1733,1735,1745],{"type":25,"value":1734},"This is were (RND)Spotify ",{"type":20,"tag":757,"props":1736,"children":1737},{},[1738],{"type":20,"tag":57,"props":1739,"children":1743},{"href":1740,"ariaDescribedBy":1741,"dataFootnoteRef":120,"id":1742},"#user-content-fn-link",[764],"user-content-fnref-link",[1744],{"type":25,"value":768},{"type":25,"value":1746}," comes in, the webapp presents my collection in a randomized order, giving me a fresh look at it, compared to Spotify's offering of just showing them alphabetically, on order of adding, or artist's name",{"type":20,"tag":446,"props":1748,"children":1750},{"src":1749},"/media/rndspotify/screenshot1.png",[],{"type":20,"tag":21,"props":1752,"children":1753},{},[1754],{"type":25,"value":1755},"The application is designed and developed for both desktop and mobile use. Even though it is a web app, it behaves like a native app on both iOS and Android.",{"type":20,"tag":182,"props":1757,"children":1760},{"className":1758},[1759],"mobile-image",[],{"type":20,"tag":446,"props":1762,"children":1764},{"src":1763,"class":1084},"/media/rndspotify/IMG_B9369C422D42-1.jpeg",[],{"type":20,"tag":21,"props":1766,"children":1767},{},[1768],{"type":25,"value":1769},"The app has been living on my main home-screen ever since I produced it. It uses the Spotify Web API for seamless integration with Spotify connect and all the other services.",{"type":20,"tag":182,"props":1771,"children":1773},{"className":1772},[1759],[],{"type":20,"tag":446,"props":1775,"children":1777},{"src":1776,"class":1084},"/media/rndspotify/IMG_AFE2682463CA-1.jpeg",[],{"type":20,"tag":21,"props":1779,"children":1780},{},[1781],{"type":25,"value":1782},"The algorithm is pretty straightforward, it just grabs a random album from the stack. But of course everything today has to be an AI powered algorithm. If you want to believe the app interprets your current mood to choose a fitting album, be my guest, that’s what I like to believe too.",{"type":20,"tag":125,"props":1784,"children":1786},{"className":1785,"dataFootnotes":120},[864],[1787,1792],{"type":20,"tag":37,"props":1788,"children":1790},{"className":1789,"id":764},[869],[1791],{"type":25,"value":872},{"type":20,"tag":874,"props":1793,"children":1794},{},[1795],{"type":20,"tag":259,"props":1796,"children":1798},{"id":1797},"user-content-fn-link",[1799,1805,1806],{"type":20,"tag":57,"props":1800,"children":1803},{"href":1801,"rel":1802},"https://rndspotify.netlify.app",[61],[1804],{"type":25,"value":1801},{"type":25,"value":889},{"type":20,"tag":57,"props":1807,"children":1810},{"href":1808,"ariaLabel":893,"className":1809,"dataFootnoteBackref":120},"#user-content-fnref-link",[895],[1811],{"type":25,"value":898},{"title":5,"searchDepth":105,"depth":105,"links":1813},[1814],{"id":764,"depth":105,"text":872},"content:projects:rnd-spotify.md","projects/rnd-spotify.md",{"_path":1818,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":1819,"description":1820,"order":10,"image":1821,"visible":120,"tags":1823,"project":1824,"body":1838,"_type":108,"_id":1898,"_source":110,"_file":1899,"_extension":112},"/projects/syncreality","SyncReality","Developing a website for an XR startup, SyncReality, and explaining their added value through an interactive experience within the website.",{"src":1822},"/media/syncreality/landingpage6.png",[974,489],{"type":1825,"role":1827,"duration":1828,"stack":1830,"credits":1833},[658,1826],"Interactive Experience",[484,485],[1829],2022,[439,1831,1832],"Directus","Unity WebGL",[1834,1835,1836,1837],"Stef Tervelde - Developement","Bruno Hansen - 3D Modelling","Malwin Béla Hürkey - Design","Cyril Tuschi - Producer",{"type":17,"children":1839,"toc":1896},[1840,1845,1851,1856,1860,1863,1877,1882,1888,1892],{"type":20,"tag":21,"props":1841,"children":1842},{},[1843],{"type":25,"value":1844},"I was responsible for developing a website for an Extended Reality (XR) startup, SyncReality. They create a unique software package that enables responsive design for 3D environments.",{"type":20,"tag":446,"props":1846,"children":1850},{"alt":1847,"class":1848,"src":1849},"The starting visuals of the website","contain","/media/syncreality/start.png",[],{"type":20,"tag":21,"props":1852,"children":1853},{},[1854],{"type":25,"value":1855},"Explaining the functionality of their software can be challenging for non-engineers. To address this, aside from explaining the idea with text and video, we incorporated a simulator built in Unity directly into the website. Within the simulator we used visual illustrations such as exploding boundaries and showing transitions between spaces to further explain the software's capabilities.",{"type":20,"tag":1110,"props":1857,"children":1859},{":controls":550,":loop":550,":muted":550,":playsinline":550,"class":1848,"src":1858},"/media/syncreality/simulator.mov",[],{"type":20,"tag":609,"props":1861,"children":1862},{},[],{"type":20,"tag":21,"props":1864,"children":1865},{},[1866,1868,1875],{"type":25,"value":1867},"The web design was handled by ",{"type":20,"tag":57,"props":1869,"children":1872},{"href":1870,"rel":1871},"https://huerkey.com",[61],[1873],{"type":25,"value":1874},"Malwin Béla Hürkey",{"type":25,"value":1876},". As for the tech stack, we used Nuxt 3 for the frontend framework, Directus for the database, and hosted the website on Netlify to keep the hosting costs low.",{"type":20,"tag":446,"props":1878,"children":1881},{"alt":1879,"class":1848,"src":1880},"A screenshot of the story element","/media/syncreality/story.png",[],{"type":20,"tag":1308,"props":1883,"children":1885},{"id":1884},"more-web-projects",[1886],{"type":25,"value":1887},"More Web Projects",{"type":20,"tag":331,"props":1889,"children":1891},{"slug":1890},"projects/wtv",[],{"type":20,"tag":331,"props":1893,"children":1895},{"slug":1894},"projects/nrc-distance",[],{"title":5,"searchDepth":105,"depth":105,"links":1897},[],"content:projects:syncreality.md","projects/syncreality.md",{"_path":1901,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":1902,"description":1903,"image":1904,"after":486,"project":1906,"before":1914,"order":970,"visible":120,"todos":1915,"tags":1917,"body":1918,"_type":108,"_id":1939,"_source":110,"_file":1940,"_extension":112},"/projects/wtv","Weißensee TV","Moving the final exhibition for Hochschule Weißensee online.",{"src":1905,"type":446,"published":120},"/media/wtv/screen1.png",{"time":1907,"stack":1908,"client":1910,"link":1911},"Summer 2020",[439,1909],"Kirby","Hochschule Weißensee",{"href":1912,"title":1913},"https://weissensee.tv","WTV","beastsofbalance",[1916],"improve screenshots",[974],{"type":17,"children":1919,"toc":1937},[1920,1925,1929,1933],{"type":20,"tag":21,"props":1921,"children":1922},{},[1923],{"type":25,"value":1924},"In 2020, because of COVID-19 restrictions, the students of Hochschule Weißensee had to divert to an online exhibition of their work. I was asked to create the website that would embed the live-stream hosted during the event.",{"type":20,"tag":446,"props":1926,"children":1928},{"src":1927},"/media/wtv/screen3.png",[],{"type":20,"tag":446,"props":1930,"children":1932},{"src":1931},"/media/wtv/screen4.png",[],{"type":20,"tag":446,"props":1934,"children":1936},{"src":1935},"/media/wtv/screen5.png",[],{"title":5,"searchDepth":105,"depth":105,"links":1938},[],"content:projects:wtv.md","projects/wtv.md",[1942,1943,1944,1945],{"title":11,"_path":4,"order":10},{"title":224,"_path":220},{"title":118,"_path":114,"order":119},{"title":325,"_path":1946,"children":1947,"order":119},"/projects",[1948,1951,1952,1953,1956,1957,1958,1961,1964,1967,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1982,1985,1987,1988,1991,1992,1995,1998,2001,2002,2005],{"title":1949,"_path":1950},"Playing with Augmented Reality","/projects/ar-prototypes",{"title":431,"_path":430},{"title":470,"_path":469},{"title":1954,"_path":1955},"Coffeescale","/projects/coffeescale",{"title":568,"_path":567},{"title":103,"_path":649},{"title":1959,"_path":1960},"Ebay BeeDay","/projects/ebay",{"title":1962,"_path":1963},"Exhibitarea","/projects/exhibitarea",{"title":1965,"_path":1966},"Filament Swift","/projects/filament-swift",{"title":1968,"_path":1969},"Homeassistant","/projects/homeassistant",{"title":711,"_path":710},{"title":923,"_path":922},{"title":957,"_path":956},{"title":998,"_path":997},{"title":1197,"_path":1196},{"title":1328,"_path":1327},{"title":481,"_path":1373},{"title":1450,"_path":1449},{"title":1540,"_path":1539},{"title":1980,"_path":1981},"Visualizing networks","/projects/nrc-network",{"title":1983,"_path":1984},"WhatsApp Encryption","/projects/nrc-whatsapp",{"title":1460,"_path":1986},"/projects/nrc",{"title":1609,"_path":1608},{"title":1989,"_path":1990},"Over The Cloud","/projects/over-the-cloud",{"title":1702,"_path":1701},{"title":1993,"_path":1994},"Schatzinsel: Augmented Theatre","/projects/schatzinsel",{"title":1996,"_path":1997},"Main website","/projects/steftervel.de",{"title":1999,"_path":2000},"Superstreamer","/projects/superstreamer",{"title":1819,"_path":1818},{"title":2003,"_path":2004},"Augmented Birds","/projects/vogelfinder",{"title":1902,"_path":1901},{"_path":1196,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":1197,"description":1198,"order":10,"todos":2007,"visible":120,"image":2008,"tags":2009,"project":2010,"body":2016,"_type":108,"_id":1324,"_source":110,"_file":1325,"_extension":112},[1200,1201,1202],{"src":1204},[490,1013,1206,491],{"type":2011,"role":2012,"duration":2013,"stack":2014,"credits":2015},[1209],[484,485,1211],[1213],[477,1215,1216,1217],[1219,1220],{"type":17,"children":2017,"toc":2094},[2018,2022,2026,2030,2039,2043,2047,2061,2064,2068,2072,2076,2080,2084,2088,2091],{"type":20,"tag":21,"props":2019,"children":2020},{},[2021],{"type":25,"value":1227},{"type":20,"tag":21,"props":2023,"children":2024},{},[2025],{"type":25,"value":1232},{"type":20,"tag":21,"props":2027,"children":2028},{},[2029],{"type":25,"value":1237},{"type":20,"tag":1077,"props":2031,"children":2032},{},[2033,2036],{"type":20,"tag":446,"props":2034,"children":2035},{"alt":1243,"class":1084,"src":1244},[],{"type":20,"tag":446,"props":2037,"children":2038},{"alt":1243,"class":1084,"src":1248},[],{"type":20,"tag":21,"props":2040,"children":2041},{},[2042],{"type":25,"value":1254},{"type":20,"tag":21,"props":2044,"children":2045},{},[2046],{"type":25,"value":1259},{"type":20,"tag":21,"props":2048,"children":2049},{},[2050,2055,2056],{"type":20,"tag":57,"props":2051,"children":2053},{"href":1265,"rel":2052},[61],[2054],{"type":25,"value":1269},{"type":25,"value":1271},{"type":20,"tag":57,"props":2057,"children":2059},{"href":1274,"rel":2058},[61],[2060],{"type":25,"value":1278},{"type":20,"tag":609,"props":2062,"children":2063},{},[],{"type":20,"tag":21,"props":2065,"children":2066},{},[2067],{"type":25,"value":1286},{"type":20,"tag":21,"props":2069,"children":2070},{},[2071],{"type":25,"value":1291},{"type":20,"tag":21,"props":2073,"children":2074},{},[2075],{"type":25,"value":1296},{"type":20,"tag":21,"props":2077,"children":2078},{},[2079],{"type":25,"value":1301},{"type":20,"tag":21,"props":2081,"children":2082},{},[2083],{"type":25,"value":1306},{"type":20,"tag":1308,"props":2085,"children":2086},{"id":1310},[2087],{"type":25,"value":1313},{"type":20,"tag":331,"props":2089,"children":2090},{"slug":1316},[],{"type":20,"tag":331,"props":2092,"children":2093},{"slug":1320},[],{"title":5,"searchDepth":105,"depth":105,"links":2095},[],{"_path":1818,"_dir":319,"_draft":6,"_partial":6,"_locale":5,"title":1819,"description":1820,"order":10,"image":2097,"visible":120,"tags":2098,"project":2099,"body":2105,"_type":108,"_id":1898,"_source":110,"_file":1899,"_extension":112},{"src":1822},[974,489],{"type":2100,"role":2101,"duration":2102,"stack":2103,"credits":2104},[658,1826],[484,485],[1829],[439,1831,1832],[1834,1835,1836,1837],{"type":17,"children":2106,"toc":2147},[2107,2111,2114,2118,2121,2124,2134,2137,2141,2144],{"type":20,"tag":21,"props":2108,"children":2109},{},[2110],{"type":25,"value":1844},{"type":20,"tag":446,"props":2112,"children":2113},{"alt":1847,"class":1848,"src":1849},[],{"type":20,"tag":21,"props":2115,"children":2116},{},[2117],{"type":25,"value":1855},{"type":20,"tag":1110,"props":2119,"children":2120},{":controls":550,":loop":550,":muted":550,":playsinline":550,"class":1848,"src":1858},[],{"type":20,"tag":609,"props":2122,"children":2123},{},[],{"type":20,"tag":21,"props":2125,"children":2126},{},[2127,2128,2133],{"type":25,"value":1867},{"type":20,"tag":57,"props":2129,"children":2131},{"href":1870,"rel":2130},[61],[2132],{"type":25,"value":1874},{"type":25,"value":1876},{"type":20,"tag":446,"props":2135,"children":2136},{"alt":1879,"class":1848,"src":1880},[],{"type":20,"tag":1308,"props":2138,"children":2139},{"id":1884},[2140],{"type":25,"value":1887},{"type":20,"tag":331,"props":2142,"children":2143},{"slug":1890},[],{"type":20,"tag":331,"props":2145,"children":2146},{"slug":1894},[],{"title":5,"searchDepth":105,"depth":105,"links":2148},[],1774690063921]