[{"data":1,"prerenderedAt":444},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"i-made-this-talent-recruitment-platform":121,"i-made-this-talent-recruitment-platform-next":168,"sales-reps":192},{"items":4},[5,29,49,69],{"id":6,"title":7,"url":8,"page":8,"children":9},"522e608a-77b0-4333-820d-d4f44be2ade1","Solutions",null,[10,15,20,25],{"id":11,"title":12,"url":8,"page":13},"fcafe85a-a798-4710-9e7a-776fe413aae5","Headless CMS",{"permalink":14},"/solutions/headless-cms",{"id":16,"title":17,"url":8,"page":18},"79972923-93cf-4777-9e32-5c9b0315fc10","Backend-as-a-Service",{"permalink":19},"/solutions/backend-as-a-service",{"id":21,"title":22,"url":8,"page":23},"0fa8d0c1-7b64-4f6f-939d-d7fdb99fc407","Product Information",{"permalink":24},"/solutions/product-information-management",{"id":26,"title":27,"url":28,"page":8},"63946d54-6052-4780-8ff4-91f5a9931dcc","100+ Things to Build","https://directus.io/blog/100-tools-apps-and-platforms-you-can-build-with-directus",{"id":30,"title":31,"url":8,"page":8,"children":32},"8ab4f9b1-f3e2-44d6-919b-011d91fe072f","Resources",[33,37,41,45],{"id":34,"title":35,"url":36,"page":8},"f951fb84-8777-4b84-9e91-996fe9d25483","Documentation","https://docs.directus.io",{"id":38,"title":39,"url":40,"page":8},"366febc7-a538-4c08-a326-e6204957f1e3","Guides","https://docs.directus.io/guides/",{"id":42,"title":43,"url":44,"page":8},"aeb9128e-1c5f-417f-863c-2449416433cd","Community","https://directus.chat",{"id":46,"title":47,"url":48,"page":8},"da1c2ed8-0a77-49b0-a903-49c56cb07de5","Release Notes","https://github.com/directus/directus/releases",{"id":50,"title":51,"url":8,"page":8,"children":52},"d61fae8c-7502-494a-822f-19ecff3d0256","Support",[53,57,61,65],{"id":54,"title":55,"url":56,"page":8},"8c43c781-7ebd-475f-a931-747e293c0a88","Issue Tracker","https://github.com/directus/directus/issues",{"id":58,"title":59,"url":60,"page":8},"d77bb78e-cf7b-4e01-932a-514414ba49d3","Feature Requests","https://github.com/directus/directus/discussions?discussions_q=is:open+sort:top",{"id":62,"title":63,"url":64,"page":8},"4346be2b-2c53-476e-b53b-becacec626a6","Community Chat","https://discord.com/channels/725371605378924594/741317677397704757",{"id":66,"title":67,"url":68,"page":8},"26c115d2-49f7-4edc-935e-d37d427fb89d","Cloud Dashboard","https://directus.cloud",{"id":70,"title":71,"url":8,"page":8,"children":72},"49141403-4f20-44ac-8453-25ace1265812","Organization",[73,78,84,88],{"id":74,"title":75,"url":76,"page":77},"1f36ea92-8a5e-47c8-914c-9822a8b9538a","About","/about",{"permalink":76},{"id":79,"title":80,"url":81,"page":82},"b84bf525-5471-4b14-a93c-225f6c386005","Careers","#",{"permalink":83},"/careers",{"id":85,"title":86,"url":87,"page":8},"86aabc3a-433d-434b-9efa-ad1d34be0a34","Brand Assets","https://drive.google.com/drive/folders/1lBOTba4RaA5ikqOn8Ewo4RYzD0XcymG9?usp=sharing",{"id":89,"title":90,"url":8,"page":91},"8d2fa1e3-198e-4405-81e1-2ceb858bc237","Contact",{"permalink":92},"/contact",{"items":94},[95,101,107,113],{"id":96,"title":97,"url":8,"page":98,"children":100},"8a1b7bfa-429d-4ffc-a650-2a5fdcf356da","Cloud Policies",{"permalink":99},"/cloud-policies",[],{"id":102,"title":103,"url":81,"page":104,"children":106},"bea848ef-828f-4306-8017-6b00ec5d4a0c","License",{"permalink":105},"/bsl",[],{"id":108,"title":109,"url":81,"page":110,"children":112},"4e914f47-4bee-42b7-b445-3119ee4196ef","Terms",{"permalink":111},"/terms",[],{"id":114,"title":115,"url":81,"page":116,"children":118},"ea69eda6-d317-4981-8421-fcabb1826bfd","Privacy",{"permalink":117},"/privacy",[],{"description":120},"\u003Cp>A composable backend to build your Headless CMS, BaaS, and more. \u003C/p>",{"id":122,"slug":123,"vimeo_id":124,"description":125,"tile":126,"length":127,"resources":128,"people":132,"episode_number":136,"published":137,"title":138,"video_transcript_html":139,"video_transcript_text":140,"content":8,"status":141,"episode_people":142,"recommendations":156,"season":157,"seo":8},"9b8ac3af-e201-4429-96de-699aebd117ea","talent-recruitment-platform","894101800","In this episode of I Made This, Erwin and Uwe walk Bryant through one of their recent Directus projects - a engineering job listing and talent recruitment site for their client - Rockstar Recruiting.\n","17109185-a938-45b3-a552-a167c18a56fc",49,[129],{"name":130,"url":131},"Heinrichs & Heinrichs","https://heinrichsundheinrichs.de/",[133],{"name":134,"url":135},"Bryant Gillespie","https://directus.io/team/bryant-gillespie",3,"2023-06-01","Building a Talent Platform with H&H","\u003Cp>Speaker 0: Hi, guys. Brian here for Directus. Welcome back to another episode of I Made This. Today, I've got very special guests with me, my friends from Germany, Heinrichs and Heinrichs. I've got Erwin and Yueh.\u003C/p>\u003Cp>Guys, welcome to I Made This. I this is gonna be probably one of my favorite episodes. How are you guys?\u003C/p>\u003Cp>Speaker 1: Thank you so much for us. We are fine. Thank you.\u003C/p>\u003Cp>Speaker 0: Excellent. Excellent. I I I would just preface this to the audience and say that these guys build amazing things with Directus and Nuxt and all kinds of other technologies, and I'm really excited to showcase this project that they are going to demonstrate for us. But before we dive into that, guys, give me the story of Heinrichs and Heinrichs and yourselves as well. Yes.\u003C/p>\u003Cp>Sure.\u003C/p>\u003Cp>Speaker 1: Our story is, I think, not not a normal story for front end developer, but a very normal story for designers. So we both did study communication design, and that's a very graphic design related course. Yeah. You can compare it with graphic design, to be honest. And and we did do during our studies a lot with with user interface designs and things like that, and we did love design all the time.\u003C/p>\u003Cp>And we tried to, bring new ideas for the web to life. And at the beginning, we just were the dinos, and so we had freaking ideas, but, had had the opportunity to realize it. And, yeah. So so we thought about, at at first, we we started with, cooperating with programmers, and they had to bring it to life. And after after a a bit of time, it gets more and more frustrated because we hear heard things like, no.\u003C/p>\u003Cp>It's not possible in this way. So we learn about our by ourself, and that's the reason why we are designers and front end developers right now.\u003C/p>\u003Cp>Speaker 0: That's great. So, hey, you guys were working with programmers before, and they just like, they would take your designs and say, hey. This is not gonna work out. And you're like, no. It is.\u003C/p>\u003Cp>It would Yeah. It should be. If we have to do it ourselves, we'll get it done. Yeah. Right.\u003C/p>\u003Cp>I love that. I I I love it. So when did you guys start your agency?\u003C/p>\u003Cp>Speaker 1: We we don't have a agency right now. So we're both working as freelancers, but\u003C/p>\u003Cp>Speaker 0: Oh, okay.\u003C/p>\u003Cp>Speaker 1: We are collaborating the Okay. Of the time. So all all the projects we're doing together. And, we started for, for two and a half years ago, I think. Yeah.\u003C/p>\u003Cp>With full time just doing our stuff, it's, like, two and a half years.\u003C/p>\u003Cp>Speaker 0: So, like, how many in that 2 years, like, how many projects have you guys done?\u003C/p>\u003Cp>Speaker 1: We did a lot of projects, to be honest. So, for the most of the time, we're working as, like, ghost designers or ghost front end developers because we, signed a lot of NDAs and worked for global players and, did very niche things where we, design unique, user interfaces, and then we, more more, started to do things for for our own clients. So not just participating in in a team, and I think for our own projects, we did in the last two and a half year. Didn't count it, to be honest. And so there must be more than 20.\u003C/p>\u003Cp>Speaker 0: That's awesome. That's awesome. And I like, before the the show, I was browsing around on your website, and I love the the interactions that you guys have programmed into it. Thank you so much. It's like do you do you get to like, do clients come to you specifically for that style of, like, hey.\u003C/p>\u003Cp>We want something very interactive, or is that just like you guys flexing your own creative muscles for your own site?\u003C/p>\u003Cp>Speaker 1: Yeah. It's a bit flexing, to be honest, because at the moment, we're just, we just get, our clients not because of our huge, our huge, digital performance. And the digital performance, it's more like, we don't we don't have any we don't have an Instagram account. We, we barely happen on LinkedIn. We I think our website is currently, not, so the robots 16 blocks right now Google and things like that.\u003C/p>\u003Cp>Speaker 0: So it\u003C/p>\u003Cp>Speaker 1: barely happen out there in the in the world wide web, but we're trying to to, yeah, to to reach out more and more. And we also have a plan doing a block and things like that to get more so that we can show more the Heinrichs and Heinrichs approach and not be, we're just ghost designers, and you can place us into a team, and then we will figure something out.\u003C/p>\u003Cp>Speaker 0: Yeah. Yeah. I I mean, I I love it. Like, I think your approach is awesome. And, talk to me about, like, the the tooling that you guys are using.\u003C/p>\u003Cp>Like, first and foremost, like, what are you what are you designing it? Like, how are you how do you come up with this stuff? Does it like, does everything start in, like, a sketchpad, or you, like, go straight to Figma? Like, talk to me through that.\u003C/p>\u003Cp>Speaker 1: Yeah. It depends, to be honest. So sometimes we we, go the the very classic way and start with a mood board and think about so if if it's a if it's a topic where we have to deep dive, then we have to then we start googling a lot. So which are which which what does our client do? So what what does he want how does he want to present himself in the in the Internet or with this idea of his, of his brand?\u003C/p>\u003Cp>And then we start, for example, with the mood board, and then we go straight into Figma or Adobe XD and start there, with some ideas. They can roughly be just some UI components, more more like a rough scratch, not not just so we don't do a pixel perfect design at the beginning. It's more of the direction process where we, where we try to generate look and feel and, to to bring a brand to life. Yeah. And after that, then we go for Yeah.\u003C/p>\u003Cp>For a more precise approach. Yeah.\u003C/p>\u003Cp>Speaker 0: Alright. Cool. Cool. What are what's your your tech stack that you guys are using for, like, most of your clients?\u003C/p>\u003Cp>Speaker 1: Our tech stack is for us. So Nuxt 3 is one of our most used front end frameworks. Yeah. We we also did some things with pew 3, but when it comes to a website for our clients, then Next 3 is our way to go. And for the back end\u003C/p>\u003Cp>Speaker 0: the go to.\u003C/p>\u003Cp>Speaker 2: Use\u003C/p>\u003Cp>Speaker 0: I love Nuxtree.\u003C/p>\u003Cp>Speaker 1: Yeah. We we we do also. And for the back end, now our main way to go is directors. So we all we so whenever there is a a chance to place directive, then we're going to use it. I yeah.\u003C/p>\u003Cp>Yeah. We\u003C/p>\u003Cp>Speaker 0: would. And, of course, that's why we're here. But but yeah. Yeah. Like, what did you guys like, what tools did you use for back ends before Directus?\u003C/p>\u003Cp>Or Like our well, let me preface that. Like, are most of the sites that you're doing, like, very content heavy? Or, like, are you doing, like, apps for clients as well? Or We did both.\u003C/p>\u003Cp>Speaker 1: So we we started with\u003C/p>\u003Cp>Speaker 0: Okay.\u003C/p>\u003Cp>Speaker 1: So when when we when we talk about the the typical client who just needs a website, then we came from, WordPress. So, like, almost everybody who started with just the front end things, and there there we started in the in the very early stages. We just, bought the theme, And then we customized it, changed the colors, had to look out, had to look of which which plugins could we install and things like that. And after that, we started doing our own themes, then we just back introduced Elementor, things like that. Yeah.\u003C/p>\u003Cp>But yeah.\u003C/p>\u003Cp>Speaker 2: Competitive. Yes.\u003C/p>\u003Cp>Speaker 1: Everybody everybody knows WordPress. Yeah. And we don't like PHP, to be honest.\u003C/p>\u003Cp>Speaker 0: It's a it's a solid platform. Yeah. It is. I'm right there with you. Like, WordPress is, it's a solid platform.\u003C/p>\u003Cp>I I my experience has been much the same, though. So I'll I'll echo exactly what you guys said.\u003C/p>\u003Cp>Speaker 1: Yeah. It become becomes very difficult when you start installing plug ins and another plugin, and then you have to to update it, and then you have to figure out if it's still compatible with the new WordPress version and things like that. And then your whole page keeps breaking. Yeah.\u003C/p>\u003Cp>Speaker 0: That's that's great when you log in and see there's, like, 75 update notifications for the plugins. Right? You know it's gonna be a good day. It's so true. So I do did you guys jump directly from WordPress into Directus, or was there, like, a\u003C/p>\u003Cp>Speaker 1: No. No. No.\u003C/p>\u003Cp>Speaker 0: We some other tool that you try.\u003C/p>\u003Cp>Speaker 1: Yeah. We we did a lot of traditional CMS systems. So we also worked with Joomla. I don't know if this says to anyone out there. We also used KontaO, and that's a very small traditional CMS system.\u003C/p>\u003Cp>Then we also used, for ecommerce systems, the WooCommerce plugin. That is WordPress as well, but we also did something with Magento. And, yeah, we we we tried a lot, to be honest. And then there comes the point where we heard about, the headless CMS system at first, and then we also tried things like the Tamek. We also tried, Strapi Strapi and\u003C/p>\u003Cp>Speaker 2: Yeah. Pimcore.\u003C/p>\u003Cp>Speaker 1: Pimcore, and yeah. And then Of course. Also.\u003C/p>\u003Cp>Speaker 0: Gosh. So I know you guys have been through, like, dozens of different tools.\u003C/p>\u003Cp>Speaker 1: Yeah. We tried everything,\u003C/p>\u003Cp>Speaker 0: to be honest. How did you guys originally come across Directus, or how did you find Directus?\u003C/p>\u003Cp>Speaker 1: I was more or less a Google search.\u003C/p>\u003Cp>Speaker 2: Yes. I'm\u003C/p>\u003Cp>Speaker 1: sorry. So we we just Googled, what is the best headless team f you could use, and then you get, yeah, then you get directors, you get, you get\u003C/p>\u003Cp>Speaker 2: Story block, I think, is\u003C/p>\u003Cp>Speaker 1: Story block contentful, things like that. And Yeah. That that we we did try every day.\u003C/p>\u003Cp>Speaker 0: Marketing guys are definitely gonna love that. And and\u003C/p>\u003Cp>Speaker 2: we also love the the open source approach.\u003C/p>\u003Cp>Speaker 1: Yeah. That's awesome.\u003C/p>\u003Cp>Speaker 2: Because, where we we did, we didn't have much experience with headless CMS systems, so, the open source approach was was the best one for us to to give it a a try. So we started out with a Strapi, I think, and then tried directors. And directors, us had much more flexibility in building these relations between between the data we we want.\u003C/p>\u003Cp>Speaker 1: Yeah. I would say, we, as a designer, directors was usable, was very, very was was was was very easy to use in comparison with Strapi. Because in Strapi, you had to the server has time to reload if you fetch anything in the data object, things like that. So it was more or less in the in the daily task. Directus was way easier to use.\u003C/p>\u003Cp>Speaker 2: You change something. You have a real time API, and, this combined with the with the hot module reload, and Nuxt 3 was perfectly efficient workflow for us.\u003C/p>\u003Cp>Speaker 0: Yeah. Awesome. Yeah. So I like, my one of my other questions to you guys, obviously, you've got clients that are using Directus. We kinda internally, we consider it like a a Swiss army knife.\u003C/p>\u003Cp>Like, you could use it for an app back end. You can use it for a headless CMS. There's, like, too many different use cases. So I'm curious, like, how do you guys present Directus to your clients when you're, either, like, in, like, the initial stages of the project or, yeah, later when you're actually, like, building the CMS and and, you know, showing it to them?\u003C/p>\u003Cp>Speaker 1: Yeah. It depends. Sometimes, we we have, clients who does have a a little bit of technical expertise. And when we drop, when we just, make some backward dropping like Hetto CMS, they are, yeah, go for it. We love Hetto CMS.\u003C/p>\u003Cp>But but and sometimes we have clients who came or who does have WordPress sites at the moment, for example, and they are like, Yeah. Okay. It could be faster, but, I think it's already fast. And then you have to deep dive into what what are the, what what are the the opportunities while using a headless CMS and why it's so much better than using a WordPress, for example, in this scenario where you have to, maybe in our example, what we're going to show, that we have, that we have 2 fraud end sites and one director's back end. This is so much more practicable than than a WordPress back end.\u003C/p>\u003Cp>And and then sometimes where where we do a back end for for a web application, for example, then, there's no other possibility than using Swiss Army knife, as you said, as directors, for example.\u003C/p>\u003Cp>Speaker 0: I see.\u003C/p>\u003Cp>Speaker 1: Or you even could use it for the digitalization of portfolio. That's also things we've done with, product information management systems. But, as we deep dive in in directors, we learned that this also could be totally possible doing with directors, and that's also a thing.\u003C/p>\u003Cp>Speaker 0: Yeah. Like, the spoken like a true, champion, I guess. Like, that is he like, you guys are very good. Very good. I also love Let's get into it.\u003C/p>\u003Cp>Alright. Like, are you guys ready to dive in? Oh, go ahead. I'm sorry, Yue. Sorry.\u003C/p>\u003Cp>I also love the the the\u003C/p>\u003Cp>Speaker 2: the the fact that we can, like, outsource the the content task to the to the to a specific person or to a specific team and say, go for it.\u003C/p>\u003Cp>Speaker 0: That's true.\u003C/p>\u003Cp>Speaker 2: Fill it out, play with it, create some content, and we can focus on building, the front end or the actual use case for the date, the the other ones are creating.\u003C/p>\u003Cp>Speaker 1: Yeah. That's so true.\u003C/p>\u003Cp>Speaker 0: Yeah. So you can hey. Like, being able to, like, decouple the content and the the front end the business logic. Useful in that scenario.\u003C/p>\u003Cp>Speaker 1: Yeah. That's true.\u003C/p>\u003Cp>Speaker 0: Great. Cool. So do you guys wanna dive in and and show this project? I can remember, like, seeing it when we had a a quick call before we scheduled the episode, and I was blown away. And I I think the audience is too.\u003C/p>\u003Cp>But\u003C/p>\u003Cp>Speaker 1: Yeah. Sure. I'm going to share my screen.\u003C/p>\u003Cp>Speaker 0: Okay. Alright. So while we're sorting out the details there, Yueh, why don't you kind of give me the backstory of the project?\u003C/p>\u003Cp>Speaker 1: So the backstory was, we had so it it all started, I think, 7 or 8 years ago. I was still a student, when I got the connection to, to Rockstar Recruiting who just, who just, raised their who who just build their company, and, they asked me back then for a logo. And that's still the logo we can see over here. And we did a a small so I I did a small brand design back then. And now after, yeah, 7 years later, they reached out back and said, maybe you could help us, doing a new homepage, a new website, and that's what we did.\u003C/p>\u003Cp>And, yeah, that's what you can see here right now. That's awesome.\u003C/p>\u003Cp>Speaker 0: So 8 years ago, you did the website or the logo for them, and then they like, 8 years later, they're like, hey. This guy is awesome. Let's come back and get the website done.\u003C/p>\u003Cp>Speaker 1: Yeah. It's yeah. That's how it happens.\u003C/p>\u003Cp>Speaker 0: So they are a so they're, basically, a recruiting firm for developers and engineering talent. Is that that's what I gather from the website.\u003C/p>\u003Cp>Speaker 1: Yeah. That's that's exactly what they are. So they are a recruiting agency who, are looking for developers and data engineers and things like that. And, the first thing we did here was, we asked them, how do the users of your website reach to your website right now? And they said, yeah.\u003C/p>\u003Cp>The most of them are not, some some Google search hits. They are more like they go to a lot of showcases and things like that, and they're and they're Mhmm. From there, they go to the website. So we thought about when do most of the people who go to this website already know who Rockstar is? Why don't we start with a huge call to action where you can reach out to the to the point, what you're going to do right here?\u003C/p>\u003Cp>So if you're if you're a company and want to hire a tech talent or, if you're a candidate, meaning a developer or a data engineer or something like that, you could also go right to the to the candidate page. So we just made the animation where you can switch to left and right for, the for the candidates and also for the companies.\u003C/p>\u003Cp>Speaker 0: Nice. Yeah. Nice. And I I love the, like, the black and white aesthetic and and just yeah. It, like, it it feels very much, like, you're specifically targeting developers in it.\u003C/p>\u003Cp>Are those, are those keyboard shortcuts that I see down there as well?\u003C/p>\u003Cp>Speaker 1: Yeah. The the these are keyboard shortcuts inspired by the terminal, meaning you have, for example, here, you can see the control and h button, then you will get the would get to home or you could press control and e to go to the imprint and, for the events or the recruiter or everything like that. And you could can hit it and go straightly to the recruiter page, for example, like I did here. Or, you also could, if you're not, technical, more, more a company, for example, who want who's who's searching for technical developers, then you also could, can also just press the button. So the idea is to have a a user experience for both, for the developers or the tech experience people, but also it should be, able to navigate if you don't have much experience with with the terminal in this scenario.\u003C/p>\u003Cp>Speaker 2: Yeah. And to keep it here, we we used a lot of, look and feel, you know, from from from the one point zero time. So, like, these ASCII borders, and this typing animations and everything. It's feels like like like a bit a long time ago.\u003C/p>\u003Cp>Speaker 1: Yeah. That's so true. And, when we beautiful.\u003C/p>\u003Cp>Speaker 0: How long did you guys spend in, like, the design phase for this?\u003C/p>\u003Cp>Speaker 1: I think the design\u003C/p>\u003Cp>Speaker 0: phase Just curious.\u003C/p>\u003Cp>Speaker 1: In in 8 days, something like that.\u003C/p>\u003Cp>Speaker 2: I think the the whole phase with with finding the right idea and deciding which one to go, it went about, like, a month.\u003C/p>\u003Cp>Speaker 1: Yeah. When you go for the whole process with with thinking about the boot and yeah. Then it did take something like a month. But the the the the designing process where we just made the UI components where the idea was set, then, I think we we wait. We went forward pretty, pretty fast.\u003C/p>\u003Cp>Yeah. And and here we have things like, for example, the ASCII border. In the screen design process, it was pretty simple, and we thought about, yeah, the this this would be something like you would do it in the web 1.0 version. And, we didn't think one second about how it could be used, in a responsive scenario because in the one point zero world, there was no responsive. So we had we had problems that that we never thought about because when you when you want to, make this ASCII border responsive, it gets, it it gets it was quite complicated, to be honest.\u003C/p>\u003Cp>So we made the SVG grid.\u003C/p>\u003Cp>Speaker 0: Yeah. I bet. So yeah.\u003C/p>\u003Cp>Speaker 1: We we just started with just using some CSS and changing the content. Then we learned, okay. It's not possible. Then we used the Busia then we tried to boost JavaScript. Also pretty hard, and then we came to the SVG grid.\u003C/p>\u003Cp>Speaker 0: It there you go. Yeah. That's you guys definitely made it challenging on yourself. Like, the end result, it it looks great.\u003C/p>\u003Cp>Speaker 1: Yeah. Thank you. Yeah. But yeah. The these these are some small things which you didn't think when you're designing that that you never would think about.\u003C/p>\u003Cp>Yeah, it could can could be a problem doing a border like this. So\u003C/p>\u003Cp>Speaker 2: Yeah. These are the things, which which, which which come back with a comment, like, this is not possible.\u003C/p>\u003Cp>Speaker 1: Yeah. That's so true. And I can totally understand that.\u003C/p>\u003Cp>Speaker 0: Yeah. I can totally understand that\u003C/p>\u003Cp>Speaker 1: the the this would be something which can come at yeah. Possible. Yeah. But we made it possible with with a lot of effort, but, yeah, it's it's there. And, yeah, we also did hear the Odenowski animations.\u003C/p>\u003Cp>Speaker 0: Yeah. Those are great. Can you guys or does your client, Rockstar, mind if you show us around, like, the the direct us instance that's powering this?\u003C/p>\u003Cp>Speaker 1: No. Not at all. We asked before, and it's not a problem at all. So we can deep dive into the directest. So and as we told before, they have 2 front end pages.\u003C/p>\u003Cp>So they have 2 websites, And Groxo, the one we just saw, and text executive can also show that. That that's the same thing for, for executive roles in the development process. And, this is\u003C/p>\u003Cp>Speaker 0: Okay. Gotcha.\u003C/p>\u003Cp>Speaker 1: Yeah. The the this is right now, that's not an own firm. It's just by Rockstar Recruiting right now. They will change that, I think. But for the moment, they share a lot of global components.\u003C/p>\u003Cp>For example, the people. There are a lot of people who are working for Rockstar right now and also for the executive, That's the point where directors made so much sense because we could, do some global components and some components for Rockstar or for TechSec in this scenario.\u003C/p>\u003Cp>Speaker 2: Yeah. Like, the locations, the blog post, people, and so on.\u003C/p>\u003Cp>Speaker 1: Yeah. The blog post, for example, goes for both. People goes for both. And also the locations because they, decided not to translate their content. They decided to, just show the different different locations with different content.\u003C/p>\u003Cp>So you can choose between Berlin and Zurich, and there you have different people for, for the team, and you have have some some more Berlin related infos and things like that. So if you we go for the whole Got it. Here you here you can choose Cool. Between Berlin and Zurich, for example. Yeah.\u003C/p>\u003Cp>Speaker 0: Nice. So this is using the Directus translations feature, but not necessarily for translations. It looks like it's all in English.\u003C/p>\u003Cp>Speaker 1: That's true. All is all is in English, but they, we just use the translation feature as a location feature, and it works pretty good.\u003C/p>\u003Cp>Speaker 0: Yeah. That's great. So it looks like I see over in the, like, the nav bar, you've got your globals, and then you've got, like, your different stacks of rock star versus tech executive. And, like, how like, your what do your clients think of of this? Like, was this, like, an iterative process when you built, like, the back end of Directus with them, or you just said, like, hey.\u003C/p>\u003Cp>We've gone through and mapped all this, and then just, like, hey. Go take a look and tell us what you thought.\u003C/p>\u003Cp>Speaker 1: Yeah. That's that's one of the coolest thing in that. Coolest things in directors because we we do draft with, how we want to organize our data or how we want to be more specific when we have a UI component like, this one at the beginning, how we want to, to make it possible to change these these words which are typed over here. And then there are things which just make sense. For example, here, you can add the text for it, and then it will just, be changed in the in the front end.\u003C/p>\u003Cp>And it's, you can extend it with other, with other developer variants, how we called it, or you can erase one just with the tech feature.\u003C/p>\u003Cp>Speaker 0: But Gotcha.\u003C/p>\u003Cp>Speaker 1: Yeah. And and\u003C/p>\u003Cp>Speaker 0: And you guys have it looks like every bit is dynamic on here. Like, the\u003C/p>\u003Cp>Speaker 1: Yeah. Almost.\u003C/p>\u003Cp>Speaker 2: That's so true.\u003C/p>\u003Cp>Speaker 0: Almost. Yeah. Yeah. That's great.\u003C/p>\u003Cp>Speaker 1: And and yeah. Because we we, as designers, we love to give the users a good experience on the front end. So on the website, when they are entering it, we we love a good user experience when they know how to navigate, when they know how to scroll, when they know where all the, most important informations are. But, with Directus, we had the opportunity to also make a good user experience for the back end, and that's the thing we really love because, we have the possibility to say, okay. We can we can, make almost every all yeah.\u003C/p>\u003Cp>Almost, everything dynamic, and then they have the possibility to change some things. But, in this scenario, it's almost not not only almost, it's impossible to break the design, because, all all things are as limitless as they they will always look good. It doesn't matter how much they enter here. And that these are the things when you for example, when our clients had Elementor in WordPress or things like that, they they just started entering a headline, which was, I don't know, 100 and 20 words or something like that. And the whole design breaks, and everything looks awkward.\u003C/p>\u003Cp>And, yeah, with directors, we have\u003C/p>\u003Cp>Speaker 0: I've I've been there a bunch of times.\u003C/p>\u003Cp>Speaker 1: Yeah. And we have the possibility to limit everything that's that's almost impossible to break the design. And that's a huge thing we love about.\u003C/p>\u003Cp>Speaker 0: What are, like, 2 or 3 of your, like, your favorite pieces that you guys have implemented for this?\u003C/p>\u003Cp>Speaker 2: I think the the contact form for tech executive was quite a quite a thing.\u003C/p>\u003Cp>Speaker 1: Yeah. That's true. This one's one of our most loved features. It's a contact form for the tech executive page on, tech executive. And there you have the differentiation.\u003C/p>\u003Cp>So how do you want to start? You can choose between I'm a candidate or I represent a company. And if you choose 1, then you get, to the to the type to to the form wizard where you can enter your name and, your last name, then your email, and, your phone number. Okay.\u003C/p>\u003Cp>Speaker 2: It checks it's a real phone number. Okay.\u003C/p>\u003Cp>Speaker 1: And, all this is completely dynamic, and has has is completely editable. So you have the question groups. You can see over here with data, then the professional track record, technical skills, additional informations, and you can see all these things for the candidate form here. So you have the personal data, and there you have the questions we just go through. So first name and, last name, email, phone, things like that.\u003C/p>\u003Cp>And you always have the possibility to create a new question, and there you can choose between a question type. So we have a question with answers or a question with input or a question with answer autofill. So if you go for the answer, for example, I will show the the front.\u003C/p>\u003Cp>Speaker 0: Yeah. This this looks really amazing. I I can't imagine how many hours you guys have spent just on this one component.\u003C/p>\u003Cp>Speaker 1: Yeah. It was quite hard. But I I think it's very cool because now it's it's a pretty fast wizard for very complex and for a very complex, for a very complex topic because entering all data in from a CV, for example, the technical knowledge in this scenario is a question with answers autofill in short over here. And this is a component where we made, a question with answer autofill. The question is, what's your technical knowledge?\u003C/p>\u003Cp>Then enter your program image you're familiar with and write your experience from 1 to 6. And then you get all the autofill words. These are the, most used programming languages. And then you have the rating enabled, and you get, you can enter a a thumb a hint for each star. So it's a Novitz beginner intermediate advanced professional.\u003C/p>\u003Cp>Wow. This is And when\u003C/p>\u003Cp>Speaker 0: mind blowing, guys.\u003C/p>\u003Cp>Speaker 1: And when you, for example, add JavaScript, you can choose, you're a beginner or a new leads. And this this all comes from directors. And you have the possibility, for example, to do this with technical knowledge, but you could also use this component for, for languages. So are you a fluent speaker of, English, Spanish, or whatever? And then you also could rate it, and you could also, change the the the, the states here with intermediate bonds and things like that.\u003C/p>\u003Cp>And you could also, also, fill in all the autofills, like we did here. This is\u003C/p>\u003Cp>Speaker 0: Wow.\u003C/p>\u003Cp>Speaker 1: Pretty cool thing where we first used the edit draw value because when we when we we we got we were provided the list with, I don't know how many there. I think something like 250 programming languages. That's And then and then we yeah. That's that's that's true. And then we want to add it.\u003C/p>\u003Cp>And the first thing we tried was, like, okay. Yavas, and then we did some commas, but it didn't work because when you enter a comma that makes sense, then it just enters the this, this, this tag. But placing all 250 tags with with just copy paste them, it would be a lot of work. And then we just found out, ah, you you have the possibility to edit the to edit the raw value. And then we just, take all of them, export it as a JSON, and place copy paste it in here, and voila.\u003C/p>\u003Cp>There they are. Yeah. That's pretty cool that that you also want.\u003C/p>\u003Cp>Speaker 0: Is that something that you teach your clients as well? Like, the edit raw value? Do your clients use that? Or just kind of you guys\u003C/p>\u003Cp>Speaker 1: For for this specific use, we didn't have to because it's more like a initial fill. Because after after reporting all the 250 tags, the the only things which can happen in the future is that there will be 1 or 2 more, and you just have to enter them in here. So you you you will never have the the the possibility the use case again where you have to import 250, auto fill words because yeah. Which programming language? I don't know.\u003C/p>\u003Cp>They they just added, I think, OpenAI or something like that, which is pretty new. But, it's not like there are 3 or 4 program languages a month.\u003C/p>\u003Cp>Speaker 0: Right. Right. What's, I'm I'm curious. Like, what do the relationships look like just for, like, this one, like, question and answer, like, form component?\u003C/p>\u003Cp>Speaker 2: Which in the data mode?\u003C/p>\u003Cp>Speaker 1: Uh-huh. Yeah. We we have the question groups with the name, description, and questions. Here, I see many to many relation question. And Look\u003C/p>\u003Cp>Speaker 0: for the questions. Okay.\u003C/p>\u003Cp>Speaker 1: We have the question. No. No. That's the group Where are we? Here the quest.\u003C/p>\u003Cp>Ah, yeah. Okay. So it's it's a credit it's a huge it's a huge question, data model. But it's it's still very easy to use because we made we would did work a lot of conditions in this scenario. So this is what I oops.\u003C/p>\u003Cp>This is what I thought, would which I have shown here. When you go for a new question, we have so many conditions that the first thing you would see is the question type. And after filling that, you will get the, question, question description, author words, and then you have also the condition for, do you want a rating for the answers? And if you enable that, you also, could, can change the, the rating description.\u003C/p>\u003Cp>Speaker 0: So So it's very much yeah. It's a it's a lot of information, but, like, with the conditional fields inside Directus, you don't overwhelm the end user at all. It's very clean. Yeah. Yeah.\u003C/p>\u003Cp>I love it, man. Thank you. What like, are there any other, like, favorite little features that you guys have have built into this thing?\u003C/p>\u003Cp>Speaker 1: Yeah. I think one of the the things we already have shown was, the the thing was the developer variants over here. And, one thing we also done is additional pages, And this is where we didn't use, right now, the many to any relation where you just can, place some components in. But, they had the idea that they want for SEO landing pages for for, different keywords which which they are going to pay for for the, Google Ads. And, that that's when we introduce the the component additional pages, and this is, just the ID in the next, and they can add it over here.\u003C/p>\u003Cp>So they have the page name contracting, for example, then they got a huge where they can implement everything. They also have a script field because they are, they have a good technical expertise. So and they ask for it and we just let them do that. But, yeah. Normally normally, this would be a much too too much for a customer with no technical expertise.\u003C/p>\u003Cp>Right. Yeah. And Yeah. Yeah.\u003C/p>\u003Cp>Speaker 0: Yeah. It's really easy to blow up the site with those script tags. That's so true.\u003C/p>\u003Cp>Speaker 1: But in this scenario, it works, and they have the possibility to enter a page name, and then they are live, the pages. So they you can reach them by entering the slash. And if you want to, if you want to, if you want to place them in the menu, you also have the possibility to go into the menu field, and there you can add the menu and also have the possibility to add the letter for the quick access, for example.\u003C/p>\u003Cp>Speaker 2: So the menu we showed. I mean,\u003C/p>\u003Cp>Speaker 0: like, you guys have literally thought of everything with this.\u003C/p>\u003Cp>Speaker 1: Yeah. It it was very fun because, we we we it was the first time we we we recognized, how many possibilities there are with, not just making it dynamic, and also to make something like conditions and to limit things and to give, things like soft quotas in the in the blog posts for the descriptions, for example. And, yeah, these are a lot of things which which just made so much fun. That's the reason because why we, yeah, why we try to to And not everything dynamic.\u003C/p>\u003Cp>Speaker 2: And also have the the whole control over the the the map. This was also pretty pretty impressive where each page had the type description in which field, which the the the client can use if if he if he wants to. And this Mhmm. Was was pretty neat and pretty pretty, pretty good because he he has the the whole control over over the SEO thing and, over his Google Ads campaigns. This was also, like, a game changer for us.\u003C/p>\u003Cp>Speaker 1: Yeah. That's true. The metadata field was Yeah.\u003C/p>\u003Cp>Speaker 0: And it looks like that is using the the translations feature as well.\u003C/p>\u003Cp>Speaker 1: Yeah. That's true.\u003C/p>\u003Cp>Speaker 0: So you can have different metadata for the different locations.\u003C/p>\u003Cp>Speaker 1: Nice. And we also make\u003C/p>\u003Cp>Speaker 0: And, is it, like, are both of these sites are built on Nuxt on the front end?\u003C/p>\u003Cp>Speaker 1: Yeah. Both both are Nuxt front end pages.\u003C/p>\u003Cp>Speaker 2: Gotcha. And,\u003C/p>\u003Cp>Speaker 0: hey, like, like, obviously, like, you guys are you you mentioned you had a lot of you experience, but, you know, what were your like, as you were building this, like, what would you say are, like, your favorite bits or or, like, why why would you reach for Nuxt versus just, like, regular Vue or, you know, one of the other I think there's several other frameworks on Vue as well.\u003C/p>\u003Cp>Speaker 2: I think Nuxt works best for us because it we test the different render modes, for for example, the hybrid rendering and the the SSG thing, and and the new, we we use I think it was the first time we were using, like, the server side rendering because before we to. We also we we we just did a project with aesthetic Yeah. Just aesthetic aesthetic size, aesthetic stack.\u003C/p>\u003Cp>Speaker 1: That that was two times, but, yeah, we we also did the the the Nuxt generate and, reached out their static sites. But, yeah, the server side rendering thing is way too cool, to be honest.\u003C/p>\u003Cp>Speaker 2: For me, I like the the file based routing because in in in the classical view environment, it's, it's it's it's it's in the ass to to configure the route and to say the these are the children of this route and and to register all the components. And if you want to start a a website with Nuxt, you just hit the CLI, go for it, and, directly start, developing for I think it's it's the perfect way to go. It it it and it keeps the boundaries for for for for get for making progress very low.\u003C/p>\u003Cp>Speaker 0: Love it. Love it. What, it'll, like, did you guys have any trouble integrating Directus with Nuxt?\u003C/p>\u003Cp>Speaker 1: Not at all. We we did we did see, there there was a example online already, I think, with with the block and next, thing, and that's that's something we set up, and then we just get from there. We we are we had everything we we needed, to be honest. So it was very easy.\u003C/p>\u003Cp>Speaker 2: Yes. The beginning I saw, I think it was your guitar repo, Brian, the the one with the nice director's actually\u003C/p>\u003Cp>Speaker 1: True. True. It was his.\u003C/p>\u003Cp>Speaker 2: We built a little wrapper around because, we had to to implement the, our localized functionality. So we had a little wrapper around and around the wrapper, where we check, okay, which local is present and which local should be used. So,\u003C/p>\u003Cp>Speaker 0: Yeah. Great, guys. So I I do wanna be respectful of your time. I know we're I think we've gone a little over what we had planned, but this is, it's so interesting to me to, like, see how you guys have constructed this and put it all together. You know, let's talk about, like, the the future.\u003C/p>\u003Cp>Like, what's, what's the future look like for you guys? I know that's pretty vague, but, like, what are you working on? Like, what do you wanna where do you wanna go with this? Like, what else do you wanna do? One\u003C/p>\u003Cp>Speaker 1: thing we we are going to do for the page we just have shown, I think quite funny because I've seen you you just released, I don't know, 2 weeks ago or something like that, a video with, ChetchyPT and directors. And Yeah. That's the thing we we, did also in the same time, to be honest. And we That's great. We we love it because the idea is to you still have a a a long journey while filling out the whole form for a candidate for, because you have to do, you have to enter your name, your email, your telephone number, and also some some text, like, what are experiences in your technical industries and things like that.\u003C/p>\u003Cp>And our idea is to, just drop down your CV, and then we will pass all the data set it to chat gpt, and chat gpt will sort all the data into the fields we have in our form. Just, we'll prefill the whole form, and in the best case scenario, you just have to press next next next next and send.\u003C/p>\u003Cp>Speaker 0: Wow. That would be amazing. That would be a great dude. Like, we're calling that new series the direct to top line, but that would be that would be a great episode as well. True.\u003C/p>\u003Cp>Oh, and what about the the future for you guys? Like, do you have a a bunch more projects in the works aside from this one? Or\u003C/p>\u003Cp>Speaker 1: Yeah. We we we do have some daily tasks, but, for us as as a Calabrio, we, our next step would be to we we're the moment refactoring our own home page. So our Heinrichs on Heinrichs.ke. And, we we just set up a directors for this site also, and we're trying to to, reach out to the world with more, with more public relation. So we we're just looking forward to, to, release a blog and to do some things on LinkedIn to have the possibility to get more cool projects like Rockstar, for example, and not just to be in our daily task and as a ghost designer and ghost developer.\u003C/p>\u003Cp>Speaker 2: Yes. And also, the website is getting a new a new look and feel, a new, a new design update, a new technical update. We're moving to moving into next 3.\u003C/p>\u003Cp>Speaker 1: So at the moment, Fuse. Right?\u003C/p>\u003Cp>Speaker 2: Yes. And we're also doing trying trying a new thing with directors, where we, we are rendering blocks. And maybe we can show\u003C/p>\u003Cp>Speaker 1: many to any\u003C/p>\u003Cp>Speaker 2: where we where we are where we're trying to like like a home page. The home page contains different blocks. And in the front end, we will have, like like a like a render skeleton where Mhmm. The the API call determines which component gets rendered. So we have, like, like, a front end block and a back end block, which will be which can be used, like, in in in in many ways or for many projects.\u003C/p>\u003Cp>Speaker 1: Yeah. The the main idea is to have,\u003C/p>\u003Cp>Speaker 2: Like like reusable components over and over and over. Like like like a like a like an own component framework.\u003C/p>\u003Cp>Speaker 1: Small library where we just make, can make some, front of UI components and directors and reuse in our Nuxt framework, to to, yeah, to just get things passed down If you have the reusable components\u003C/p>\u003Cp>Speaker 0: that you\u003C/p>\u003Cp>Speaker 1: use all the time I've\u003C/p>\u003Cp>Speaker 0: got some to share with you guys on that front then. Yeah. Yeah. I I I've got a project that is in the works, teasing the audience a little bit, but I'll share it with you guys for sure. I think it'll be helpful for you on that side.\u003C/p>\u003Cp>Speaker 1: Yeah. We can.\u003C/p>\u003Cp>Speaker 0: Yeah. Guys, so if anybody wants to learn more about you guys and, like, look at some of the projects that you've done or or even work with you guys, like, how how's the best way to go about contacting you?\u003C/p>\u003Cp>Speaker 1: You? Reach us our our, to our website. So it's it's a very complicated URL. Many for the English speakers because it's Heinrichs. De, but, we just bought a new, URL, Heinrichs.cool.\u003C/p>\u003Cp>And then you cool.\u003C/p>\u003Cp>Speaker 0: Very good. That's a little easier.\u003C/p>\u003Cp>Speaker 1: That's very easy. There you can reach us via email every time.\u003C/p>\u003Cp>Speaker 2: Yes. I think when this episode will go live, and the new date will also be live. This is this is not me calling you out.\u003C/p>\u003Cp>Speaker 0: Don't put yourself on a timeline. We're gonna I think we're gonna turn this one around pretty quickly. So, yeah, I I I I look forward to seeing the the new site. I could tell you all the the guys on our team played around with your existing site for, like, 20 minutes, and they were like, oh, this is so cool. So I can't wait to see what the new one looks like.\u003C/p>\u003Cp>Guys, been a pleasure. I I really appreciate you joining us, and I I can't thank you enough. And I I look forward to seeing, like, the next project that you guys come out with.\u003C/p>\u003Cp>Speaker 1: Thank you so much for having us.\u003C/p>\u003Cp>Speaker 0: Alright, guys. Thank you. Thanks.\u003C/p>","Hi, guys. Brian here for Directus. Welcome back to another episode of I Made This. Today, I've got very special guests with me, my friends from Germany, Heinrichs and Heinrichs. I've got Erwin and Yueh. Guys, welcome to I Made This. I this is gonna be probably one of my favorite episodes. How are you guys? Thank you so much for us. We are fine. Thank you. Excellent. Excellent. I I I would just preface this to the audience and say that these guys build amazing things with Directus and Nuxt and all kinds of other technologies, and I'm really excited to showcase this project that they are going to demonstrate for us. But before we dive into that, guys, give me the story of Heinrichs and Heinrichs and yourselves as well. Yes. Sure. Our story is, I think, not not a normal story for front end developer, but a very normal story for designers. So we both did study communication design, and that's a very graphic design related course. Yeah. You can compare it with graphic design, to be honest. And and we did do during our studies a lot with with user interface designs and things like that, and we did love design all the time. And we tried to, bring new ideas for the web to life. And at the beginning, we just were the dinos, and so we had freaking ideas, but, had had the opportunity to realize it. And, yeah. So so we thought about, at at first, we we started with, cooperating with programmers, and they had to bring it to life. And after after a a bit of time, it gets more and more frustrated because we hear heard things like, no. It's not possible in this way. So we learn about our by ourself, and that's the reason why we are designers and front end developers right now. That's great. So, hey, you guys were working with programmers before, and they just like, they would take your designs and say, hey. This is not gonna work out. And you're like, no. It is. It would Yeah. It should be. If we have to do it ourselves, we'll get it done. Yeah. Right. I love that. I I I love it. So when did you guys start your agency? We we don't have a agency right now. So we're both working as freelancers, but Oh, okay. We are collaborating the Okay. Of the time. So all all the projects we're doing together. And, we started for, for two and a half years ago, I think. Yeah. With full time just doing our stuff, it's, like, two and a half years. So, like, how many in that 2 years, like, how many projects have you guys done? We did a lot of projects, to be honest. So, for the most of the time, we're working as, like, ghost designers or ghost front end developers because we, signed a lot of NDAs and worked for global players and, did very niche things where we, design unique, user interfaces, and then we, more more, started to do things for for our own clients. So not just participating in in a team, and I think for our own projects, we did in the last two and a half year. Didn't count it, to be honest. And so there must be more than 20. That's awesome. That's awesome. And I like, before the the show, I was browsing around on your website, and I love the the interactions that you guys have programmed into it. Thank you so much. It's like do you do you get to like, do clients come to you specifically for that style of, like, hey. We want something very interactive, or is that just like you guys flexing your own creative muscles for your own site? Yeah. It's a bit flexing, to be honest, because at the moment, we're just, we just get, our clients not because of our huge, our huge, digital performance. And the digital performance, it's more like, we don't we don't have any we don't have an Instagram account. We, we barely happen on LinkedIn. We I think our website is currently, not, so the robots 16 blocks right now Google and things like that. So it barely happen out there in the in the world wide web, but we're trying to to, yeah, to to reach out more and more. And we also have a plan doing a block and things like that to get more so that we can show more the Heinrichs and Heinrichs approach and not be, we're just ghost designers, and you can place us into a team, and then we will figure something out. Yeah. Yeah. I I mean, I I love it. Like, I think your approach is awesome. And, talk to me about, like, the the tooling that you guys are using. Like, first and foremost, like, what are you what are you designing it? Like, how are you how do you come up with this stuff? Does it like, does everything start in, like, a sketchpad, or you, like, go straight to Figma? Like, talk to me through that. Yeah. It depends, to be honest. So sometimes we we, go the the very classic way and start with a mood board and think about so if if it's a if it's a topic where we have to deep dive, then we have to then we start googling a lot. So which are which which what does our client do? So what what does he want how does he want to present himself in the in the Internet or with this idea of his, of his brand? And then we start, for example, with the mood board, and then we go straight into Figma or Adobe XD and start there, with some ideas. They can roughly be just some UI components, more more like a rough scratch, not not just so we don't do a pixel perfect design at the beginning. It's more of the direction process where we, where we try to generate look and feel and, to to bring a brand to life. Yeah. And after that, then we go for Yeah. For a more precise approach. Yeah. Alright. Cool. Cool. What are what's your your tech stack that you guys are using for, like, most of your clients? Our tech stack is for us. So Nuxt 3 is one of our most used front end frameworks. Yeah. We we also did some things with pew 3, but when it comes to a website for our clients, then Next 3 is our way to go. And for the back end the go to. Use I love Nuxtree. Yeah. We we we do also. And for the back end, now our main way to go is directors. So we all we so whenever there is a a chance to place directive, then we're going to use it. I yeah. Yeah. We would. And, of course, that's why we're here. But but yeah. Yeah. Like, what did you guys like, what tools did you use for back ends before Directus? Or Like our well, let me preface that. Like, are most of the sites that you're doing, like, very content heavy? Or, like, are you doing, like, apps for clients as well? Or We did both. So we we started with Okay. So when when we when we talk about the the typical client who just needs a website, then we came from, WordPress. So, like, almost everybody who started with just the front end things, and there there we started in the in the very early stages. We just, bought the theme, And then we customized it, changed the colors, had to look out, had to look of which which plugins could we install and things like that. And after that, we started doing our own themes, then we just back introduced Elementor, things like that. Yeah. But yeah. Competitive. Yes. Everybody everybody knows WordPress. Yeah. And we don't like PHP, to be honest. It's a it's a solid platform. Yeah. It is. I'm right there with you. Like, WordPress is, it's a solid platform. I I my experience has been much the same, though. So I'll I'll echo exactly what you guys said. Yeah. It become becomes very difficult when you start installing plug ins and another plugin, and then you have to to update it, and then you have to figure out if it's still compatible with the new WordPress version and things like that. And then your whole page keeps breaking. Yeah. That's that's great when you log in and see there's, like, 75 update notifications for the plugins. Right? You know it's gonna be a good day. It's so true. So I do did you guys jump directly from WordPress into Directus, or was there, like, a No. No. No. We some other tool that you try. Yeah. We we did a lot of traditional CMS systems. So we also worked with Joomla. I don't know if this says to anyone out there. We also used KontaO, and that's a very small traditional CMS system. Then we also used, for ecommerce systems, the WooCommerce plugin. That is WordPress as well, but we also did something with Magento. And, yeah, we we we tried a lot, to be honest. And then there comes the point where we heard about, the headless CMS system at first, and then we also tried things like the Tamek. We also tried, Strapi Strapi and Yeah. Pimcore. Pimcore, and yeah. And then Of course. Also. Gosh. So I know you guys have been through, like, dozens of different tools. Yeah. We tried everything, to be honest. How did you guys originally come across Directus, or how did you find Directus? I was more or less a Google search. Yes. I'm sorry. So we we just Googled, what is the best headless team f you could use, and then you get, yeah, then you get directors, you get, you get Story block, I think, is Story block contentful, things like that. And Yeah. That that we we did try every day. Marketing guys are definitely gonna love that. And and we also love the the open source approach. Yeah. That's awesome. Because, where we we did, we didn't have much experience with headless CMS systems, so, the open source approach was was the best one for us to to give it a a try. So we started out with a Strapi, I think, and then tried directors. And directors, us had much more flexibility in building these relations between between the data we we want. Yeah. I would say, we, as a designer, directors was usable, was very, very was was was was very easy to use in comparison with Strapi. Because in Strapi, you had to the server has time to reload if you fetch anything in the data object, things like that. So it was more or less in the in the daily task. Directus was way easier to use. You change something. You have a real time API, and, this combined with the with the hot module reload, and Nuxt 3 was perfectly efficient workflow for us. Yeah. Awesome. Yeah. So I like, my one of my other questions to you guys, obviously, you've got clients that are using Directus. We kinda internally, we consider it like a a Swiss army knife. Like, you could use it for an app back end. You can use it for a headless CMS. There's, like, too many different use cases. So I'm curious, like, how do you guys present Directus to your clients when you're, either, like, in, like, the initial stages of the project or, yeah, later when you're actually, like, building the CMS and and, you know, showing it to them? Yeah. It depends. Sometimes, we we have, clients who does have a a little bit of technical expertise. And when we drop, when we just, make some backward dropping like Hetto CMS, they are, yeah, go for it. We love Hetto CMS. But but and sometimes we have clients who came or who does have WordPress sites at the moment, for example, and they are like, Yeah. Okay. It could be faster, but, I think it's already fast. And then you have to deep dive into what what are the, what what are the the opportunities while using a headless CMS and why it's so much better than using a WordPress, for example, in this scenario where you have to, maybe in our example, what we're going to show, that we have, that we have 2 fraud end sites and one director's back end. This is so much more practicable than than a WordPress back end. And and then sometimes where where we do a back end for for a web application, for example, then, there's no other possibility than using Swiss Army knife, as you said, as directors, for example. I see. Or you even could use it for the digitalization of portfolio. That's also things we've done with, product information management systems. But, as we deep dive in in directors, we learned that this also could be totally possible doing with directors, and that's also a thing. Yeah. Like, the spoken like a true, champion, I guess. Like, that is he like, you guys are very good. Very good. I also love Let's get into it. Alright. Like, are you guys ready to dive in? Oh, go ahead. I'm sorry, Yue. Sorry. I also love the the the the the fact that we can, like, outsource the the content task to the to the to a specific person or to a specific team and say, go for it. That's true. Fill it out, play with it, create some content, and we can focus on building, the front end or the actual use case for the date, the the other ones are creating. Yeah. That's so true. Yeah. So you can hey. Like, being able to, like, decouple the content and the the front end the business logic. Useful in that scenario. Yeah. That's true. Great. Cool. So do you guys wanna dive in and and show this project? I can remember, like, seeing it when we had a a quick call before we scheduled the episode, and I was blown away. And I I think the audience is too. But Yeah. Sure. I'm going to share my screen. Okay. Alright. So while we're sorting out the details there, Yueh, why don't you kind of give me the backstory of the project? So the backstory was, we had so it it all started, I think, 7 or 8 years ago. I was still a student, when I got the connection to, to Rockstar Recruiting who just, who just, raised their who who just build their company, and, they asked me back then for a logo. And that's still the logo we can see over here. And we did a a small so I I did a small brand design back then. And now after, yeah, 7 years later, they reached out back and said, maybe you could help us, doing a new homepage, a new website, and that's what we did. And, yeah, that's what you can see here right now. That's awesome. So 8 years ago, you did the website or the logo for them, and then they like, 8 years later, they're like, hey. This guy is awesome. Let's come back and get the website done. Yeah. It's yeah. That's how it happens. So they are a so they're, basically, a recruiting firm for developers and engineering talent. Is that that's what I gather from the website. Yeah. That's that's exactly what they are. So they are a recruiting agency who, are looking for developers and data engineers and things like that. And, the first thing we did here was, we asked them, how do the users of your website reach to your website right now? And they said, yeah. The most of them are not, some some Google search hits. They are more like they go to a lot of showcases and things like that, and they're and they're Mhmm. From there, they go to the website. So we thought about when do most of the people who go to this website already know who Rockstar is? Why don't we start with a huge call to action where you can reach out to the to the point, what you're going to do right here? So if you're if you're a company and want to hire a tech talent or, if you're a candidate, meaning a developer or a data engineer or something like that, you could also go right to the to the candidate page. So we just made the animation where you can switch to left and right for, the for the candidates and also for the companies. Nice. Yeah. Nice. And I I love the, like, the black and white aesthetic and and just yeah. It, like, it it feels very much, like, you're specifically targeting developers in it. Are those, are those keyboard shortcuts that I see down there as well? Yeah. The the these are keyboard shortcuts inspired by the terminal, meaning you have, for example, here, you can see the control and h button, then you will get the would get to home or you could press control and e to go to the imprint and, for the events or the recruiter or everything like that. And you could can hit it and go straightly to the recruiter page, for example, like I did here. Or, you also could, if you're not, technical, more, more a company, for example, who want who's who's searching for technical developers, then you also could, can also just press the button. So the idea is to have a a user experience for both, for the developers or the tech experience people, but also it should be, able to navigate if you don't have much experience with with the terminal in this scenario. Yeah. And to keep it here, we we used a lot of, look and feel, you know, from from from the one point zero time. So, like, these ASCII borders, and this typing animations and everything. It's feels like like like a bit a long time ago. Yeah. That's so true. And, when we beautiful. How long did you guys spend in, like, the design phase for this? I think the design phase Just curious. In in 8 days, something like that. I think the the whole phase with with finding the right idea and deciding which one to go, it went about, like, a month. Yeah. When you go for the whole process with with thinking about the boot and yeah. Then it did take something like a month. But the the the the designing process where we just made the UI components where the idea was set, then, I think we we wait. We went forward pretty, pretty fast. Yeah. And and here we have things like, for example, the ASCII border. In the screen design process, it was pretty simple, and we thought about, yeah, the this this would be something like you would do it in the web 1.0 version. And, we didn't think one second about how it could be used, in a responsive scenario because in the one point zero world, there was no responsive. So we had we had problems that that we never thought about because when you when you want to, make this ASCII border responsive, it gets, it it gets it was quite complicated, to be honest. So we made the SVG grid. Yeah. I bet. So yeah. We we just started with just using some CSS and changing the content. Then we learned, okay. It's not possible. Then we used the Busia then we tried to boost JavaScript. Also pretty hard, and then we came to the SVG grid. It there you go. Yeah. That's you guys definitely made it challenging on yourself. Like, the end result, it it looks great. Yeah. Thank you. Yeah. But yeah. The these these are some small things which you didn't think when you're designing that that you never would think about. Yeah, it could can could be a problem doing a border like this. So Yeah. These are the things, which which, which which come back with a comment, like, this is not possible. Yeah. That's so true. And I can totally understand that. Yeah. I can totally understand that the the this would be something which can come at yeah. Possible. Yeah. But we made it possible with with a lot of effort, but, yeah, it's it's there. And, yeah, we also did hear the Odenowski animations. Yeah. Those are great. Can you guys or does your client, Rockstar, mind if you show us around, like, the the direct us instance that's powering this? No. Not at all. We asked before, and it's not a problem at all. So we can deep dive into the directest. So and as we told before, they have 2 front end pages. So they have 2 websites, And Groxo, the one we just saw, and text executive can also show that. That that's the same thing for, for executive roles in the development process. And, this is Okay. Gotcha. Yeah. The the this is right now, that's not an own firm. It's just by Rockstar Recruiting right now. They will change that, I think. But for the moment, they share a lot of global components. For example, the people. There are a lot of people who are working for Rockstar right now and also for the executive, That's the point where directors made so much sense because we could, do some global components and some components for Rockstar or for TechSec in this scenario. Yeah. Like, the locations, the blog post, people, and so on. Yeah. The blog post, for example, goes for both. People goes for both. And also the locations because they, decided not to translate their content. They decided to, just show the different different locations with different content. So you can choose between Berlin and Zurich, and there you have different people for, for the team, and you have have some some more Berlin related infos and things like that. So if you we go for the whole Got it. Here you here you can choose Cool. Between Berlin and Zurich, for example. Yeah. Nice. So this is using the Directus translations feature, but not necessarily for translations. It looks like it's all in English. That's true. All is all is in English, but they, we just use the translation feature as a location feature, and it works pretty good. Yeah. That's great. So it looks like I see over in the, like, the nav bar, you've got your globals, and then you've got, like, your different stacks of rock star versus tech executive. And, like, how like, your what do your clients think of of this? Like, was this, like, an iterative process when you built, like, the back end of Directus with them, or you just said, like, hey. We've gone through and mapped all this, and then just, like, hey. Go take a look and tell us what you thought. Yeah. That's that's one of the coolest thing in that. Coolest things in directors because we we do draft with, how we want to organize our data or how we want to be more specific when we have a UI component like, this one at the beginning, how we want to, to make it possible to change these these words which are typed over here. And then there are things which just make sense. For example, here, you can add the text for it, and then it will just, be changed in the in the front end. And it's, you can extend it with other, with other developer variants, how we called it, or you can erase one just with the tech feature. But Gotcha. Yeah. And and And you guys have it looks like every bit is dynamic on here. Like, the Yeah. Almost. That's so true. Almost. Yeah. Yeah. That's great. And and yeah. Because we we, as designers, we love to give the users a good experience on the front end. So on the website, when they are entering it, we we love a good user experience when they know how to navigate, when they know how to scroll, when they know where all the, most important informations are. But, with Directus, we had the opportunity to also make a good user experience for the back end, and that's the thing we really love because, we have the possibility to say, okay. We can we can, make almost every all yeah. Almost, everything dynamic, and then they have the possibility to change some things. But, in this scenario, it's almost not not only almost, it's impossible to break the design, because, all all things are as limitless as they they will always look good. It doesn't matter how much they enter here. And that these are the things when you for example, when our clients had Elementor in WordPress or things like that, they they just started entering a headline, which was, I don't know, 100 and 20 words or something like that. And the whole design breaks, and everything looks awkward. And, yeah, with directors, we have I've I've been there a bunch of times. Yeah. And we have the possibility to limit everything that's that's almost impossible to break the design. And that's a huge thing we love about. What are, like, 2 or 3 of your, like, your favorite pieces that you guys have implemented for this? I think the the contact form for tech executive was quite a quite a thing. Yeah. That's true. This one's one of our most loved features. It's a contact form for the tech executive page on, tech executive. And there you have the differentiation. So how do you want to start? You can choose between I'm a candidate or I represent a company. And if you choose 1, then you get, to the to the type to to the form wizard where you can enter your name and, your last name, then your email, and, your phone number. Okay. It checks it's a real phone number. Okay. And, all this is completely dynamic, and has has is completely editable. So you have the question groups. You can see over here with data, then the professional track record, technical skills, additional informations, and you can see all these things for the candidate form here. So you have the personal data, and there you have the questions we just go through. So first name and, last name, email, phone, things like that. And you always have the possibility to create a new question, and there you can choose between a question type. So we have a question with answers or a question with input or a question with answer autofill. So if you go for the answer, for example, I will show the the front. Yeah. This this looks really amazing. I I can't imagine how many hours you guys have spent just on this one component. Yeah. It was quite hard. But I I think it's very cool because now it's it's a pretty fast wizard for very complex and for a very complex, for a very complex topic because entering all data in from a CV, for example, the technical knowledge in this scenario is a question with answers autofill in short over here. And this is a component where we made, a question with answer autofill. The question is, what's your technical knowledge? Then enter your program image you're familiar with and write your experience from 1 to 6. And then you get all the autofill words. These are the, most used programming languages. And then you have the rating enabled, and you get, you can enter a a thumb a hint for each star. So it's a Novitz beginner intermediate advanced professional. Wow. This is And when mind blowing, guys. And when you, for example, add JavaScript, you can choose, you're a beginner or a new leads. And this this all comes from directors. And you have the possibility, for example, to do this with technical knowledge, but you could also use this component for, for languages. So are you a fluent speaker of, English, Spanish, or whatever? And then you also could rate it, and you could also, change the the the, the states here with intermediate bonds and things like that. And you could also, also, fill in all the autofills, like we did here. This is Wow. Pretty cool thing where we first used the edit draw value because when we when we we we got we were provided the list with, I don't know how many there. I think something like 250 programming languages. That's And then and then we yeah. That's that's that's true. And then we want to add it. And the first thing we tried was, like, okay. Yavas, and then we did some commas, but it didn't work because when you enter a comma that makes sense, then it just enters the this, this, this tag. But placing all 250 tags with with just copy paste them, it would be a lot of work. And then we just found out, ah, you you have the possibility to edit the to edit the raw value. And then we just, take all of them, export it as a JSON, and place copy paste it in here, and voila. There they are. Yeah. That's pretty cool that that you also want. Is that something that you teach your clients as well? Like, the edit raw value? Do your clients use that? Or just kind of you guys For for this specific use, we didn't have to because it's more like a initial fill. Because after after reporting all the 250 tags, the the only things which can happen in the future is that there will be 1 or 2 more, and you just have to enter them in here. So you you you will never have the the the possibility the use case again where you have to import 250, auto fill words because yeah. Which programming language? I don't know. They they just added, I think, OpenAI or something like that, which is pretty new. But, it's not like there are 3 or 4 program languages a month. Right. Right. What's, I'm I'm curious. Like, what do the relationships look like just for, like, this one, like, question and answer, like, form component? Which in the data mode? Uh-huh. Yeah. We we have the question groups with the name, description, and questions. Here, I see many to many relation question. And Look for the questions. Okay. We have the question. No. No. That's the group Where are we? Here the quest. Ah, yeah. Okay. So it's it's a credit it's a huge it's a huge question, data model. But it's it's still very easy to use because we made we would did work a lot of conditions in this scenario. So this is what I oops. This is what I thought, would which I have shown here. When you go for a new question, we have so many conditions that the first thing you would see is the question type. And after filling that, you will get the, question, question description, author words, and then you have also the condition for, do you want a rating for the answers? And if you enable that, you also, could, can change the, the rating description. So So it's very much yeah. It's a it's a lot of information, but, like, with the conditional fields inside Directus, you don't overwhelm the end user at all. It's very clean. Yeah. Yeah. I love it, man. Thank you. What like, are there any other, like, favorite little features that you guys have have built into this thing? Yeah. I think one of the the things we already have shown was, the the thing was the developer variants over here. And, one thing we also done is additional pages, And this is where we didn't use, right now, the many to any relation where you just can, place some components in. But, they had the idea that they want for SEO landing pages for for, different keywords which which they are going to pay for for the, Google Ads. And, that that's when we introduce the the component additional pages, and this is, just the ID in the next, and they can add it over here. So they have the page name contracting, for example, then they got a huge where they can implement everything. They also have a script field because they are, they have a good technical expertise. So and they ask for it and we just let them do that. But, yeah. Normally normally, this would be a much too too much for a customer with no technical expertise. Right. Yeah. And Yeah. Yeah. Yeah. It's really easy to blow up the site with those script tags. That's so true. But in this scenario, it works, and they have the possibility to enter a page name, and then they are live, the pages. So they you can reach them by entering the slash. And if you want to, if you want to, if you want to place them in the menu, you also have the possibility to go into the menu field, and there you can add the menu and also have the possibility to add the letter for the quick access, for example. So the menu we showed. I mean, like, you guys have literally thought of everything with this. Yeah. It it was very fun because, we we we it was the first time we we we recognized, how many possibilities there are with, not just making it dynamic, and also to make something like conditions and to limit things and to give, things like soft quotas in the in the blog posts for the descriptions, for example. And, yeah, these are a lot of things which which just made so much fun. That's the reason because why we, yeah, why we try to to And not everything dynamic. And also have the the whole control over the the the map. This was also pretty pretty impressive where each page had the type description in which field, which the the the client can use if if he if he wants to. And this Mhmm. Was was pretty neat and pretty pretty, pretty good because he he has the the whole control over over the SEO thing and, over his Google Ads campaigns. This was also, like, a game changer for us. Yeah. That's true. The metadata field was Yeah. And it looks like that is using the the translations feature as well. Yeah. That's true. So you can have different metadata for the different locations. Nice. And we also make And, is it, like, are both of these sites are built on Nuxt on the front end? Yeah. Both both are Nuxt front end pages. Gotcha. And, hey, like, like, obviously, like, you guys are you you mentioned you had a lot of you experience, but, you know, what were your like, as you were building this, like, what would you say are, like, your favorite bits or or, like, why why would you reach for Nuxt versus just, like, regular Vue or, you know, one of the other I think there's several other frameworks on Vue as well. I think Nuxt works best for us because it we test the different render modes, for for example, the hybrid rendering and the the SSG thing, and and the new, we we use I think it was the first time we were using, like, the server side rendering because before we to. We also we we we just did a project with aesthetic Yeah. Just aesthetic aesthetic size, aesthetic stack. That that was two times, but, yeah, we we also did the the the Nuxt generate and, reached out their static sites. But, yeah, the server side rendering thing is way too cool, to be honest. For me, I like the the file based routing because in in in the classical view environment, it's, it's it's it's it's in the ass to to configure the route and to say the these are the children of this route and and to register all the components. And if you want to start a a website with Nuxt, you just hit the CLI, go for it, and, directly start, developing for I think it's it's the perfect way to go. It it it and it keeps the boundaries for for for for get for making progress very low. Love it. Love it. What, it'll, like, did you guys have any trouble integrating Directus with Nuxt? Not at all. We we did we did see, there there was a example online already, I think, with with the block and next, thing, and that's that's something we set up, and then we just get from there. We we are we had everything we we needed, to be honest. So it was very easy. Yes. The beginning I saw, I think it was your guitar repo, Brian, the the one with the nice director's actually True. True. It was his. We built a little wrapper around because, we had to to implement the, our localized functionality. So we had a little wrapper around and around the wrapper, where we check, okay, which local is present and which local should be used. So, Yeah. Great, guys. So I I do wanna be respectful of your time. I know we're I think we've gone a little over what we had planned, but this is, it's so interesting to me to, like, see how you guys have constructed this and put it all together. You know, let's talk about, like, the the future. Like, what's, what's the future look like for you guys? I know that's pretty vague, but, like, what are you working on? Like, what do you wanna where do you wanna go with this? Like, what else do you wanna do? One thing we we are going to do for the page we just have shown, I think quite funny because I've seen you you just released, I don't know, 2 weeks ago or something like that, a video with, ChetchyPT and directors. And Yeah. That's the thing we we, did also in the same time, to be honest. And we That's great. We we love it because the idea is to you still have a a a long journey while filling out the whole form for a candidate for, because you have to do, you have to enter your name, your email, your telephone number, and also some some text, like, what are experiences in your technical industries and things like that. And our idea is to, just drop down your CV, and then we will pass all the data set it to chat gpt, and chat gpt will sort all the data into the fields we have in our form. Just, we'll prefill the whole form, and in the best case scenario, you just have to press next next next next and send. Wow. That would be amazing. That would be a great dude. Like, we're calling that new series the direct to top line, but that would be that would be a great episode as well. True. Oh, and what about the the future for you guys? Like, do you have a a bunch more projects in the works aside from this one? Or Yeah. We we we do have some daily tasks, but, for us as as a Calabrio, we, our next step would be to we we're the moment refactoring our own home page. So our Heinrichs on Heinrichs.ke. And, we we just set up a directors for this site also, and we're trying to to, reach out to the world with more, with more public relation. So we we're just looking forward to, to, release a blog and to do some things on LinkedIn to have the possibility to get more cool projects like Rockstar, for example, and not just to be in our daily task and as a ghost designer and ghost developer. Yes. And also, the website is getting a new a new look and feel, a new, a new design update, a new technical update. We're moving to moving into next 3. So at the moment, Fuse. Right? Yes. And we're also doing trying trying a new thing with directors, where we, we are rendering blocks. And maybe we can show many to any where we where we are where we're trying to like like a home page. The home page contains different blocks. And in the front end, we will have, like like a like a render skeleton where Mhmm. The the API call determines which component gets rendered. So we have, like, like, a front end block and a back end block, which will be which can be used, like, in in in in many ways or for many projects. Yeah. The the main idea is to have, Like like reusable components over and over and over. Like like like a like a like an own component framework. Small library where we just make, can make some, front of UI components and directors and reuse in our Nuxt framework, to to, yeah, to just get things passed down If you have the reusable components that you use all the time I've got some to share with you guys on that front then. Yeah. Yeah. I I I've got a project that is in the works, teasing the audience a little bit, but I'll share it with you guys for sure. I think it'll be helpful for you on that side. Yeah. We can. Yeah. Guys, so if anybody wants to learn more about you guys and, like, look at some of the projects that you've done or or even work with you guys, like, how how's the best way to go about contacting you? You? Reach us our our, to our website. So it's it's a very complicated URL. Many for the English speakers because it's Heinrichs. De, but, we just bought a new, URL, Heinrichs.cool. And then you cool. Very good. That's a little easier. That's very easy. There you can reach us via email every time. Yes. I think when this episode will go live, and the new date will also be live. This is this is not me calling you out. Don't put yourself on a timeline. We're gonna I think we're gonna turn this one around pretty quickly. So, yeah, I I I I look forward to seeing the the new site. I could tell you all the the guys on our team played around with your existing site for, like, 20 minutes, and they were like, oh, this is so cool. So I can't wait to see what the new one looks like. Guys, been a pleasure. I I really appreciate you joining us, and I I can't thank you enough. And I I look forward to seeing, like, the next project that you guys come out with. Thank you so much for having us. Alright, guys. Thank you. Thanks.","published",[143],{"people_id":144},{"id":145,"first_name":146,"last_name":147,"avatar":148,"bio":149,"links":150},"791e1503-1d88-463d-9347-0b9192933576","Bryant","Gillespie","9013afc8-e8d7-4182-9b18-44db08117bb9","Developer Advocate at Directus",[151,153],{"url":135,"service":152},"website",{"service":154,"url":155},"github","https://github.com/bryantgillespie",[],{"id":158,"number":159,"year":160,"episodes":161,"show":165},"7656df39-eed0-444b-b9af-9e76986b8052",1,"2023",[162,163,122,164],"6444b7b8-734e-4b2e-abf2-844210988c13","fd462afa-f23e-4f5b-a242-5e7364f872fb","dab588c7-1feb-457f-9cfd-b574b7eea4e0",{"title":166,"tile":167},"I Made This","1e087400-d8fc-417d-a7c2-50283beb9996",{"id":164,"slug":169,"season":158,"vimeo_id":170,"description":171,"tile":172,"length":173,"resources":174,"people":178,"episode_number":183,"published":184,"title":185,"video_transcript_html":186,"video_transcript_text":187,"content":8,"seo":8,"status":141,"episode_people":188,"recommendations":191},"boutique-web-agency","901507988","In this episode of I Made This, Bryant is joined by Miguel Stevens, the creative force behind Studio Monty, a Belgium-based agency specializing in lifestyle and bespoke websites. Miguel shares his journey from a childhood fascination with computers to founding his studio. ","1a6f3e0d-558f-445d-bc0d-f97bb36270aa",47,[175],{"name":176,"url":177},"Studio Monty","https://www.studiomonty.be/",[179,180],{"name":134,"url":135},{"name":181,"url":182},"Miguel Stevens","https://www.linkedin.com/in/miguelstevensbe/",4,"2024-01-23","Building a Boutique Web Agency with Studio Monty","\u003Cp>Speaker 0: Hi, guys. Welcome back to another episode of I Made This. I'm your host, Brian Gillespie, developer advocate here at Directus, and I have got my extra special guest with me today, mister Miguel Stevens from Studio Monti. Miguel, happy to have you, man.\u003C/p>\u003Cp>Speaker 1: Hi. Thanks for having me. Glad\u003C/p>\u003Cp>Speaker 0: to Yeah. Yeah. So, hey. Like, you and I have talked inside our directus community a couple times through Discord or, I I think, even on several, like, GitHub issues probably. But, you know, for those who don't know you, maybe, give us a little intro or, you know, what's the backstory?\u003C/p>\u003Cp>Speaker 1: Sure. So my studio is called Studio Monty. We're a Belgium based web company. We do lifestyle websites, boutique kind of websites, so not not a big technical prod products, but more like the the well and refined designed projects. And we always offer CMS, of course, which is direct us.\u003C/p>\u003Cp>Speaker 0: So we don't necessarily have to dive in, directly to direct us. Super glad that you're using that. But, you know, tell me a a little more about the agency. Like, how did you get started? What what led you to that?\u003C/p>\u003Cp>You know? If we back up even further, like, how did you how did you get into development?\u003C/p>\u003Cp>Speaker 1: Okay. Cool. Good question. I think for me, the case, like many people, has been like a a child passion. When I was 8 years old, my dad bought me a a Pentium 386 or what was this called?\u003C/p>\u003Cp>I don't even remember it.\u003C/p>\u003Cp>Speaker 0: And I was I'm not sure.\u003C/p>\u003Cp>Speaker 1: The 386. Old computer with with floppy disks.\u003C/p>\u003Cp>Speaker 0: Okay.\u003C/p>\u003Cp>Speaker 1: Yeah. And the\u003C/p>\u003Cp>Speaker 0: I'm trying to think of, like, what the what the the megahertz they were running back in the day. I think the first computer I had was, like, maybe, like, 96 megahertz or something\u003C/p>\u003Cp>Speaker 1: like that. Right? The people remember. No, like a diskette disk. How do you call it in English?\u003C/p>\u003Cp>It's 3.14 megabytes or something.\u003C/p>\u003Cp>Speaker 0: Yeah. There you go.\u003C/p>\u003Cp>Speaker 1: And the floppies were even less than that. But I started experimenting with Microsoft FrontPage, which, like, Dreamweaver is really old, but FrontPage, that's a whole other level. So I think I just roll I I started making small websites with cheat codes for roller coaster tycoon, things like that. Hey. There you go.\u003C/p>\u003Cp>So then my my whole journey has been development. I worked in some big development companies in Ghent, and I worked in some boutique agencies, but it's always been about about design and development. Yeah. So I I I love both. I'm a 100% developer.\u003C/p>\u003Cp>I it has to be beautiful. Right?\u003C/p>\u003Cp>Speaker 0: I guess it. Yeah. So and you guys mentioned that you focus on boutique websites. Could you, you know, like, expand that a little bit? Like, specifically, like, what does the average project look like for you guys?\u003C/p>\u003Cp>Speaker 1: Sure. I think with boutique, I mean, those are mostly websites with less than 10 pages. Design is very important. They wanna have something unique about them. So we we don't do it's not like WordPress templates, where you can clear a seed template.\u003C/p>\u003Cp>We always work with a designer. We we do custom designs, and custom development. It's it's very much focused on the specific needs of each client. And yeah. And then it's in the lifestyle sector, so, it's fun companies, interior design, architecture, things like that.\u003C/p>\u003Cp>Yeah. Very local as well.\u003C/p>\u003Cp>Speaker 0: Yeah. So, hey, smaller businesses, clients who are very concerned with image and design and, looking professional.\u003C/p>\u003Cp>Speaker 1: Yeah. Is\u003C/p>\u003Cp>Speaker 0: that a fair summarization?\u003C/p>\u003Cp>Speaker 1: Yeah. Very fair.\u003C/p>\u003Cp>Speaker 0: What does your what does your process look like on those projects? Like, on the front end, like, how how you mentioned it's local, but how how do most of these clients find you?\u003C/p>\u003Cp>Speaker 1: Yeah. For us, it's been a case of. Right? So, I think we started only 1 year ago, and all projects we've had have been through local Netflix. You make a website for someone you know.\u003C/p>\u003Cp>Before you know it, their uncle wants a website, and then you really get started and and your network grows. I do try to there's a we're based in Ghent, Belgium, and there's a good community of, of, people that are, yeah, entrepreneurs. What's the word in English?\u003C/p>\u003Cp>Speaker 0: Yeah. Yeah. You got it. You nailed it. What?\u003C/p>\u003Cp>Speaker 1: Yeah. So there's a lot of events, that we that I tried to go to to meet people, to talk about how we can help people. So it's been word-of-mouth. That's the English Cool.\u003C/p>\u003Cp>Speaker 0: You're primarily. Excellent. Yeah. Talk to me about your process. Like, yeah, being a, like, you're doing smaller projects that are, let's say, not, like, super data intensive.\u003C/p>\u003Cp>If like, what's your like, what's the time span from, like, conception or or, like, the idea phase to, like, launching a project? Talk me talk me through your process because I'm super curious on that. Like, what those type of projects actually like, what the flow looks like.\u003C/p>\u003Cp>Speaker 1: Okay. Good question. I've been refining this because I feel process is really important to make something replicable and scalable. So what's important for for me is I always start with a very intense strategy session. And so it's, like, 1 to 2 hours where we sit down with the client and really listen, like, what what are your challenges?\u003C/p>\u003Cp>Where do you wanna go with your business? Who do you wanna be in 5 years' time? It it can be very personal because each business has, like, these typical problems. They want more revenue. They want the right type of client.\u003C/p>\u003Cp>They want they want their website to provide more information, better customer service for their clients. So we really drill down the goals for each website, and only then do we start going to wireframing to to design and development.\u003C/p>\u003Cp>Speaker 0: Gotcha. Now in that strategy call, is that, like, after you've already quoted them and and they sent them a proposal?\u003C/p>\u003Cp>Speaker 1: Or Oh, yeah. Right. I forgot that part. So I think it starts with a sales conversation. You you call on the phone mostly, or you go face to face and you just listen.\u003C/p>\u003Cp>Can we help you? I think it's important. The big money topic. There's a lot of interesting videos about this, but a lot of people I read about, a lot of starting people are afraid to discuss money. They all wanna talk about money upfront, but I think it's important that you know what's in what's their budget, what can we do to help them, and, how can we make it work?\u003C/p>\u003Cp>So it's I think it's this first sales call is is very important.\u003C/p>\u003Cp>Speaker 0: Yeah. That's that's always the toughest, like, conversation. Right?\u003C/p>\u003Cp>Speaker 1: Right. Like, how come I've got\u003C/p>\u003Cp>Speaker 0: a I've I've got a number in my head. You've got a number. Right. Yeah. Like, how do we talk about like, how do you how do you address that with clients?\u003C/p>\u003Cp>Like, you said you you don't shy away from it.\u003C/p>\u003Cp>Speaker 1: I think during those first 15 minutes, it has to be clear what the budget is. So if it's not clear from them, tell you, you can just ask upfront, like, what budget do you have in mind? And if that range is acceptable for the type of websites, then we can then we can go for that. For example, startups, I wouldn't work with a fresh startup because they don't need a custom built website. Startups can use Wix or Squarespace, which is mostly enough to help them.\u003C/p>\u003Cp>So it it would be it wouldn't be good customer service of me to try to sell them a website because they don't need custom websites in their first month. Yeah. So I try to be very honest. I'm not the type of person who just takes on a client to get the money and then, no. I can't help them.\u003C/p>\u003Cp>If I can send them to Squarespace, then we'll happily do that. Yeah. Yeah. It's honesty and transparency. Right?\u003C/p>\u003Cp>Speaker 0: Yeah. Yeah. I love that. That's super critical. You know?\u003C/p>\u003Cp>Mhmm. And even being like, you said you started the agency about a year ago. I can imagine, like, in the early days, it's a little harder to do that. Right? Where like, hey.\u003C/p>\u003Cp>We need a couple of projects through the door, but, still, if it's not a right fit, you you turn them away anyway. That's that's, that's pretty cool.\u003C/p>\u003Cp>Speaker 1: Yeah. Yeah. At the beginning, you have to take on a lot of projects, obviously, because you just started and there's no, no real cash flow, but yeah.\u003C/p>\u003Cp>Speaker 0: Yeah. Well, cool. So you have the strategy session. You guys get into, like, their company goals and, like, aspirations and things like that. And then how do how do things progress from there?\u003C/p>\u003Cp>Speaker 1: Sure. Once we know after the strategy session, I make a content model, which is like a sitemap, but for each page, I also include elements. This happens after research. So we look at competitors. You look at the industry.\u003C/p>\u003Cp>What does the industry expect from websites of that sector, and and, what does the competition do? What do they do good? What don't they do good? And then we discuss some styles. There's there's more meetings.\u003C/p>\u003Cp>And then it's onto the design phase. For bigger projects, we do a style guide first. If there's a copywriter to be involved, you're a copywriter, obviously, and that's onto design. Yeah.\u003C/p>\u003Cp>Speaker 0: Gotcha. Like, do you have any, like, philosophy? Like, what's your design philosophy? Yeah. I I I think for me, when I used to do projects, like, doing competitor research is is absolutely critical.\u003C/p>\u003Cp>Right? You gotta know what the landscape is, but how do you how do you not let that inform your own design? You know what I mean? Like, you you don't wanna just, like, copy competitors or you don't want to on the surface, you may not know whether that is actually working well for the competitor or not. Right?\u003C/p>\u003Cp>So, hey. Like, what is your philosophy on design, and, like, how do you navigate, just hey. Like, hey. Here's what everybody else is doing. Here's what we think is gonna actually work well for you as a to your clients.\u003C/p>\u003Cp>Speaker 1: Mhmm. I think it's it's important obviously to look at the top ten. Right? We we we don't compare with businesses that are on page 20 on Google. And I think it's important if you're looking at, like, what's the content going to be to only focus on the content.\u003C/p>\u003Cp>It's like you just said, we try to if we see, like, interesting piece of content, I I copy paste the text and put it in Figma in, like, a sort of prototype. We don't screenshot designs because, like you say, if you start screenshotting designs from other companies, your design will be influenced by that. So I think it's important in the in the first phases where the content is being decided, that you just focus on what's what's being written, what's being told. I also saw an interesting video by The Future, and they they make this comparison like, a website has to answer questions. So we always start with that in mind.\u003C/p>\u003Cp>I write the quote and I'll accept it, and they say, a website is like a conversation. Right? You come to my website. It's like you come into my house, and you you have questions for me. Like, will this product help me feel more whatever.\u003C/p>\u003Cp>I don't know. So the the order of your website, the content has to answer all people's questions. This is something we I try to keep in mind when building the content model.\u003C/p>\u003Cp>Speaker 0: Yeah. I I love to hear you say that because everybody says that you should be content first, but, like, what I see a lot of times is, like, there's a whole board of inspiration of, like, hey. We like this site. We like this site. We like this site.\u003C/p>\u003Cp>And then you're working backwards of, like, hey. Let's let's incorporate this theme and, hey. Like, take some ideas from this. And what I'm hearing you say is that you guys you you don't take screenshots of other websites. You might, like, snip some content, but it is very much, like, content driven.\u003C/p>\u003Cp>There's no like, when you're in the design process, there's no, like, outside influences from other websites. Is that right?\u003C/p>\u003Cp>Speaker 1: Yeah. Maybe a bit. I I mean, I have a designer who I work with, and she, she loves designing, so she's not content first. I'm a big fan of content first, but I think it depends. It's it's one of the biggest chicken or egg problems in the web design industry for me is do you do the content first and then have your designer build around the content?\u003C/p>\u003Cp>Or do you have the designer design first and then put the content in the available space that the designer chose. It's we we've been trying both, ways of working, and there's no winner yet. I get you.\u003C/p>\u003Cp>Speaker 0: Yeah. I I I think it's just just like the messy middle\u003C/p>\u003Cp>Speaker 1: of, like, hey. Yeah.\u003C/p>\u003Cp>Speaker 0: Like, where things come together.\u003C/p>\u003Cp>Speaker 1: I don't know if there's an answer to if someone has an answer to the the big chicken or egg design versus content first question. Please let me know.\u003C/p>\u003Cp>Speaker 0: Okay. Cool. And sales great. So I like, going through the design phase, like, obviously, hey. Like, are you who does the development?\u003C/p>\u003Cp>Like, the actual like, are you doing a lot\u003C/p>\u003Cp>Speaker 1: of the actual code at\u003C/p>\u003Cp>Speaker 0: this point or got somebody else on the team? Like, what does that look like?\u003C/p>\u003Cp>Speaker 1: Yeah. I it depends if it's, if it's really busy and I'm like doing a lot of intakes and strategy, then I outsource the development. I'm working with someone who is really capable. I had to look, for a long time before I found him, but I have someone who helps me out. And sometimes I do projects myself.\u003C/p>\u003Cp>It's good to to stay in the flow. Right? So Nxt is evolving very quickly. Direct is evolving really quickly, and I I wanna, be up to date with everything. So I I still like to to, develop as well.\u003C/p>\u003Cp>To if it's still\u003C/p>\u003Cp>Speaker 0: like to jump in. Yeah.\u003C/p>\u003Cp>Speaker 1: Yeah. Yeah. Yeah.\u003C/p>\u003Cp>Speaker 0: I I think that's, like, a common case for a lot of us. Right? You get into it. Like, you you love building stuff, and then, like, inevitably, you've gotta take on more of the business stuff, and that gets in the way of of, like, the fun stuff of actually building and creating. And it's very much the same way for me where, like, I I love to build and create, and, like, the other stuff kinda I I I enjoy that as well, but it kinda gets in the way.\u003C/p>\u003Cp>Right?\u003C/p>\u003Cp>Speaker 1: I I think it's you never wanna have, like, 0 or 100 to to one side. I think it's always I always love developing. Maybe it's the same for you. Yeah. When there's time, it's it's great to just put on your headphones and be in the flow for a whole afternoon, writing code.\u003C/p>\u003Cp>It's amazing. It's still fun.\u003C/p>\u003Cp>Speaker 0: Yeah. But excellent. Well, what what is the average timeline? So, like, we we've talked about the process. Like, it start to finish, like, how quickly are you you know, how long does it take for the average project to Mhmm.\u003C/p>\u003Cp>Start to launch?\u003C/p>\u003Cp>Speaker 1: I think in theory, it would take, like, 1 month. But in practice, it's always 2, 3, 4 month. It's because I think there's something we're struggling with. It's very hard to to really I mean, it's only 1 year since we started, but it's very difficult for me right now to know exactly how long something will take. Sure.\u003C/p>\u003Cp>Depending on on how how fast does the design go, what types of content. So sometimes the client wants to write a copy himself, which is mostly something that will take long because nobody likes writing copy unless you're a copyright. Make your friends. I noticed that clients seems to seem to, like, not want to do it, so they they keep on, delaying it, and then it never happens. So it's it's a combination of waiting for assets.\u003C/p>\u003Cp>There's, like, a photographer involved, which is something for the types of websites. In the CGM Monti builds, we I wanna work with good photography. And minimal design is really important. So then you have a photographer who has to, be involved in the process. So there's a lot of variables, right, that can stretch or tend the timeline, but you you don't know in advance.\u003C/p>\u003Cp>Speaker 0: Yeah. They like, on the photography side, do you require your clients to to work with a professional photographer? Or\u003C/p>\u003Cp>Speaker 1: Well, this is something I started doing now since the last client. Yeah. I guess It's secured in the in the in the offer as well. I used to add, like, an an add on, like, photography optional, but there people are paying a lot of websites a lot of money for a website, and they're like, I don't need good pictures. So now it's just included in the price, and it's, yeah.\u003C/p>\u003Cp>Speaker 0: Oh, that's smart. Yeah. I I always hate to see a well designed website and then, like, the same stock photos that you've seen on 35 other websites. It just ruins it ruins everything.\u003C/p>\u003Cp>Speaker 1: The stock photos are the worst. I think the dark iPhone picture by the owner is even better than the stock.\u003C/p>\u003Cp>Speaker 0: Yeah. Yeah. Right. Yeah. At least it's real.\u003C/p>\u003Cp>Yeah. Or it feels real. I I'm sure that's a real person in the stock photo, but, you know, some of those stock photos, I I don't know, like, how people make those poses. Like, I think you never see that stuff in real life. Right?\u003C/p>\u003Cp>Speaker 1: Well, I think it's it's your eye sees it directly. I mean, your stock photo, you can see it from very far, and it it gives the site a sort of fake feeling. It's it doesn't feel right when you see stock photos.\u003C/p>\u003Cp>Speaker 0: Yeah.\u003C/p>\u003Cp>Speaker 1: Yeah.\u003C/p>\u003Cp>Speaker 0: So, like, shifting into, like, the tools that you're using to build the sites, like, what does your preferred, like, stack look like? You know? Right? What tools are you using on the front end, on the back end, that sort of stuff?\u003C/p>\u003Cp>Speaker 1: So it's, for us, it's Nuxtree on the front end and then Directus, on the back end. Yeah. Gotcha. We're running it on Docker containers for our production servers as well as, local local hosting. It's also on Docker.\u003C/p>\u003Cp>Speaker 0: Nice. Yeah. You're definitely one of my preferred stacks. But, like, what what led you to those 2 pieces? Like, you know, were you using those a year ago when you started?\u003C/p>\u003Cp>Or yeah. I know you mentioned front page that you were using way back in the day to build stuff. Like, walk walk me through the progression because that's that's super interesting for me because I I remember front page. I remember Dreamweaver. Right.\u003C/p>\u003Cp>I even I'm I'm not sure I I'm not sure if Angel Fire or, like, GeoCities were ever popular outside the US, but it was like a it was like a free website builder where you could get on and have all the animated GIFs and, like, all the all the crazy counters and all that stuff back in the day. But that's that's how I got my start in the industry as well. It was back in the day using those tools to kinda scratch stuff together.\u003C/p>\u003Cp>Speaker 1: I think that you said this rings a bell, but I I never heard of for this Angelfire. Angelfire.\u003C/p>\u003Cp>Speaker 0: It was yeah. It's basically like a a free website builder host. Like, you could you could throw, like, crazy backgrounds and stuff on there and write your text. But the rest of it, you know, back in those days, it was all just whatever HTML you could throw together yourself.\u003C/p>\u003Cp>Speaker 1: Yeah. Marquee elements and stuff like that.\u003C/p>\u003Cp>Speaker 0: Yeah. Yeah. Oh, yeah.\u003C/p>\u003Cp>Speaker 1: So, I started my development. I mean, my first company I worked with was Laravel. So it was PHP. I loved Laravel. It's it was easy to use for me.\u003C/p>\u003Cp>It was a a dream come true after writing spaghetti code in PHP. But the older I got, and I started working with Vue, and I started loving JavaScript a lot. For me, it feels much cleaner, the syntax and PHP. I'm stirring some feathers here. I know.\u003C/p>\u003Cp>It's a big discussion. PHP lovers are everywhere and the JavaScript lovers. But for me, it's always been JavaScript. So when I started this company 1 year ago, I promised no PHP. So, my first thought was, okay.\u003C/p>\u003Cp>I need a I need a JavaScript back end. So I started looking into headless CMS systems. Strapi Strapi. I don't know how you pronounce it. Yeah.\u003C/p>\u003Cp>Was the first one I tried, but I I found it difficult to work with. I don't know. It was it didn't feel right. So I tried a few others. I tried story block.\u003C/p>\u003Cp>I tried content folks for a while, and then someone on Reddit mentioned Directus. Mhmm. I think version 10 was just released. When was it released? Do you know version 10?\u003C/p>\u003Cp>Speaker 0: Version 10 or version 9. Version 10 was that's Yeah. Version 10 was not so long ago. Version 9 was, like, a big change. Version version 8 was on PHP.\u003C/p>\u003Cp>Speaker 1: Oh, really?\u003C/p>\u003Cp>Speaker 0: Version 9 version 9 was, like, the switch to to node to, like, the JavaScript side of things. And that was a a crazy big shift. That was about the same time that I actually found directives myself.\u003C/p>\u003Cp>Speaker 1: Okay. That's\u003C/p>\u003Cp>Speaker 0: when when version 9 was released,\u003C/p>\u003Cp>Speaker 1: which was You weren't there in the BHP era.\u003C/p>\u003Cp>Speaker 0: I I was not. No. I I wasn't even aware of the tool, which is Okay. Which is wild.\u003C/p>\u003Cp>Speaker 1: Yeah. And that's why I think it's someone on Reddit brought me to Directus, and I I tried it out, set it up. The documentation is great, and I just got it working. And then I just built my first website.\u003C/p>\u003Cp>Speaker 0: Yeah. Nice. So I like, what were you said, like, the other tools didn't feel right, and that that definitely feels like a like a designer thing of a it doesn't feel right. But were there a like, any, like, issues that you encountered that were you were like, hey. This is this is not working for me?\u003C/p>\u003Cp>Like, can you even remember any of those tools? Like, what were the the red flags, like, if you can remember any?\u003C/p>\u003Cp>Speaker 1: Yeah. I think for me, now that I think about it, the biggest thing was since I mean, headless CMS systems can be used for, like, internal tools, for softwares. But for our studio, it's always going to be a CMS system. So my thought was if a client I remember with Strapi, I thought, if a client has to work on this, it's gonna be complicated. And for with directors, it just felt very calm.\u003C/p>\u003Cp>I could see my even less tech savvy clients work in this system. So for me, it was mostly a choice of, okay, which system are people my clients going to be able to work in without having to call me too much with questions. It it Not having to do a 12 hour CMS training.\u003C/p>\u003Cp>Speaker 0: It is very much from, like, the client perspective. Yeah. I I can remember that personally, like, seeing it like, I I went through a bunch of those as well. And, like, the seeing the white space and just I you mentioned calmness or the the calm, of, like, hey. This is really well designed, and it's open source, which is great.\u003C/p>\u003Cp>Speaker 1: Yeah.\u003C/p>\u003Cp>Speaker 0: But I can remember looking at it and like, hey. Like, okay. Yeah. This feels right. Yeah.\u003C/p>\u003Cp>I think it\u003C/p>\u003Cp>Speaker 1: was a gut feeling. It's like a first impression. Right? You always set up doc. You open the tool and it's okay.\u003C/p>\u003Cp>This feels good. And I think what I also remember is the image handling direct is is is perfect. For CMS systems, there are always gonna be images, and the I think the file library and all the systems around it are built really, really solidly. So, yeah, that's a big plus\u003C/p>\u003Cp>Speaker 0: as well. What does, like, the average project look like for you inside Directus for for a client? You know, like, maybe through, like, the data model. You know? Or maybe just talk me through some of those, and and I think you've got a few things to show us.\u003C/p>\u003Cp>But, maybe just so you could, like, talk me through how the projects look inside Directus before we jump into that.\u003C/p>\u003Cp>Speaker 1: Okay. Cool. I think the last three projects were mostly similar. So we have pages. We have a page builder using the, many to any builder system.\u003C/p>\u003Cp>And then we have just like projects, testimonials, the team page. So it's mostly, managing data. We're not too heavy on flows at the moment. There's a few flows for, like, building, which we'll get into in a in a few minutes. But, yeah, it's mostly page builder.\u003C/p>\u003Cp>That's the biggest, chunk. And we use blocks. So every page, you can just, compose yourself with blocks. Clients don't really use that too much. It's mostly for myself.\u003C/p>\u003Cp>A block is reusable. It's a nice, neat piece of code, which can even be reused in in other projects. So yeah.\u003C/p>\u003Cp>Speaker 0: How do you, like, how do you present, like, the CMS and, like, direct us to your clients, like, through that phase? Is that, like, a discussion that you have, like, at the very beginning of a project? Is it like, hey. Oh, we got your website. You're gonna be able to edit all the content through this CMS.\u003C/p>\u003Cp>Yeah. Are you, like, talking me through how you present that solution to the client?\u003C/p>\u003Cp>Speaker 1: Sounds good. In my last, few offers, I included, screenshots or a video of directors. And the good thing is that clients mostly come from WordPress. So when they see directors, they're like, this is impossible. They almost can't believe how easy it is.\u003C/p>\u003Cp>Crazy. The the reactions are just amazing. The last two clients were really like, this is so easy. Essentially what they said. I sat next to them for the CMS training.\u003C/p>\u003Cp>We put in some data together and just they came from WordPress. They were like, this is really easy. So it feels really good to have clients, have this this sort of really good experience.\u003C/p>\u003Cp>Speaker 0: Now are are most of them coming from, like, the the drag and drop page builders where they've gotta go in and manage, like, all the padding and spacing and colors and all of that? Okay.\u003C/p>\u003Cp>Speaker 1: Yeah. Or from WordPress installations that are like a plug in hell, and everything's a plug in, and there there have to be and people don't like that. I think directors, you can also you can protect your clients. Like, you give them roles, and they only they can only edit what they're assigned to do. I know you can do that in WordPress as well, but WordPress feels like very, very much.\u003C/p>\u003Cp>And clients, they mostly don't have a lot of time. They maybe want to add a new testimonial. They had just want to log in, click testimonial, add new, and be done with it.\u003C/p>\u003Cp>Speaker 0: So Yeah. They they don't wanna, yeah, geek out on the the software or the tools like like we do. They just wanna get\u003C/p>\u003Cp>Speaker 1: them out.\u003C/p>\u003Cp>Speaker 0: They've got other stuff to do.\u003C/p>\u003Cp>Speaker 1: Yeah. They don't care what tool it is. It just has to be easy enough.\u003C/p>\u003Cp>Speaker 0: Yeah. Cool. Well, do you wanna maybe share your screen and and show us, you know, like I would love to share with the audience, like, what the the typical, like, front end project looks like for you, And then, you know, maybe show us around the the back end if you're if you're able to.\u003C/p>\u003Cp>Speaker 1: Yeah. Sure. Let me just share my screen real quick. K. Cool.\u003C/p>\u003Cp>So this is a project we finished, 2 months ago. It's a website for a company that does funding. Yeah. We like white space. We like beautiful fonts.\u003C/p>\u003Cp>These pages are so this is Nextree. This is a statically generated website. So Okay. It's on it's built on Netlify. So it's not SSR.\u003C/p>\u003Cp>It's SS SSG.\u003C/p>\u003Cp>Speaker 0: What's what is the what's the the display font there? Like, all the headings.\u003C/p>\u003Cp>Speaker 1: The this font?\u003C/p>\u003Cp>Speaker 0: Yeah. I I I really like that font. Have a look.\u003C/p>\u003Cp>Speaker 1: I should know that. Ah, silica. It's silica. Right. Silca.\u003C/p>\u003Cp>It's nice having font.\u003C/p>\u003Cp>Speaker 0: Yeah. Yeah. It looks great. I and, like, I've got another project that I'm working on personally that, I I've been eyeing fonts, and, like, that process is always, like, such a nightmare of, like, going through and trying to suss out just the perfect font for a project. This one looks great.\u003C/p>\u003Cp>Speaker 1: Right.\u003C/p>\u003Cp>Speaker 0: Might have to worry about.\u003C/p>\u003Cp>Speaker 1: Beautiful fonts are mostly really expensive, which is fair.\u003C/p>\u003Cp>Speaker 0: True. True.\u003C/p>\u003Cp>Speaker 1: And this is actually just a page built and page builder. They have cases, which are like, yeah, project cases. And what I love about this, it feels really snappy. I mean, this is Nuxt. Yeah.\u003C/p>\u003Cp>It's pre rendered, so that's the speed is the speed is amazing. Speed score is also really good. There's a form in here which will, be sent to directors as well. Nice. Yeah.\u003C/p>\u003Cp>And it's a dynamic form if you if you go to a case and you wanna be then your case will be prefilled here. This all will be sent to directors. Yeah. That's cool. What's\u003C/p>\u003Cp>Speaker 0: a great great looking site.\u003C/p>\u003Cp>Speaker 1: Yeah. Thanks.\u003C/p>\u003Cp>Speaker 0: Very clean.\u003C/p>\u003Cp>Speaker 1: Yeah.\u003C/p>\u003Cp>Speaker 0: What are you, what are you using for, like, the the transitions and the animations? Is it, are you, like I'm just custom coded CSS, or is it, like, a different library?\u003C/p>\u003Cp>Speaker 1: It's a wrapper component. It's called scroll transition dot view. I made it together with someone else, I think. We used it in a previous project. Yeah.\u003C/p>\u003Cp>And it just, yeah, it shifted into, into view.\u003C/p>\u003Cp>Speaker 0: As yeah. It's it's very tasteful. I think for me, that's one of the other things that I always struggle with on some websites is, like, everything is animated. There's, like, a crazy amount of motion, and it it just distracts from the the story in some cases. But this is this looks really well done.\u003C/p>\u003Cp>Speaker 1: I think it it has to be subtle. What I would like now is for, like, working on some images that, like, slide in from the right. Some some tiny animations, but I don't want it to be much more than this.\u003C/p>\u003Cp>Speaker 0: Yeah. It looks great.\u003C/p>\u003Cp>Speaker 1: So for the for the back end, as you see the models we have, this is heavily based on the agency OS, by the way, which I think which you wrote most part of it.\u003C/p>\u003Cp>Speaker 0: Yeah. Most of it is mine.\u003C/p>\u003Cp>Speaker 1: So thank you for this. Yeah. No. Great.\u003C/p>\u003Cp>Speaker 0: How No. Happy to you know, that project was like a labor of love because it it it took me a long time to figure out how to manage, like, the page blocks. And I was like, okay. Like, once you see it and and you've got a a reference, it's much easier to understand. But when I first came to Directus, I knew this functionality was available.\u003C/p>\u003Cp>It just like, there weren't any good references reference points to to use. So I I'm happy that it's been helpful for you. 100%.\u003C/p>\u003Cp>Speaker 1: Oh, it yeah. It is. I don't know if I would have managed without. I think it's also it's a plus point because there's a lot of back end systems, but you guys took the time to write out a full front end to showcase how it can be used. So that's I'm very grateful for it.\u003C/p>\u003Cp>It's, it's amazing. You probably see it's heavily based on agency OS. Right? Yeah. There's a page.\u003C/p>\u003Cp>You have the blocks. You can move them.\u003C/p>\u003Cp>Speaker 0: Yeah. It looks very familiar.\u003C/p>\u003Cp>Speaker 1: Yeah. This marquee, this text, that's the one you see here. So it's it's very easy for the client to work in. What's interesting about this project and, something I told you about is the the the flows, that we built. Because it's statically generated, you can use, like, a Netlify hook that each time you save a change you made, Netlify will start building.\u003C/p>\u003Cp>But the problem you get when 3 or 4 people are changing content is you get a queue of 20, 30 builds, the day. Yeah.\u003C/p>\u003Cp>Speaker 0: Or the client changes a couple of different pages. Right? And they They go through it.\u003C/p>\u003Cp>Speaker 1: They they press save. They change something else, and it's it's triggering bills the whole time. Yep. And on NettoFi. So what, I contacted I wrote down his username, Arud Arud on Arud.\u003C/p>\u003Cp>Yeah. Arud. Do you know him?\u003C/p>\u003Cp>Speaker 0: Yeah. Yeah. He, he won several of the or I think he won at least one of our hackathons.\u003C/p>\u003Cp>Speaker 1: Okay.\u003C/p>\u003Cp>Speaker 0: Nice. Yeah. Yeah. He started\u003C/p>\u003Cp>Speaker 1: to on on Discord.\u003C/p>\u003Cp>Speaker 0: Yeah. Very helpful member of the community. 100%.\u003C/p>\u003Cp>Speaker 1: So he started the idea of, these 3 flows you see in green, and then I finished it. There was one issue, and we worked on it together, reached out a bit. So what this does is every time a change is pushed, we set a flag, like change pushed through, and we set a time stamp.\u003C/p>\u003Cp>Speaker 0: Mhmm.\u003C/p>\u003Cp>Speaker 1: And what these three flows together do is they only trigger a build every 5 minutes. So you could And and only when there's changes. Right. Yeah.\u003C/p>\u003Cp>Speaker 0: Oh, that's cool.\u003C/p>\u003Cp>Speaker 1: For example, this one, every 5 minutes, it will look inside the general settings and check if the variable has changes if it's set to true, and that will trigger this other flow.\u003C/p>\u003Cp>Speaker 0: Okay.\u003C/p>\u003Cp>Speaker 1: And this other flow will trigger an Sify build and update the current build time and update the settings. So it's,\u003C/p>\u003Cp>Speaker 0: I gotcha.\u003C/p>\u003Cp>Speaker 1: Yeah. And then there's one more, the publish queue on save. This one just watches, if you save anything.\u003C/p>\u003Cp>Speaker 0: Okay. Yeah. So it's watching the content collections.\u003C/p>\u003Cp>Speaker 1: Yeah. All of them.\u003C/p>\u003Cp>Speaker 0: Yeah. Gotcha.\u003C/p>\u003Cp>Speaker 1: And then it checks if it's older than 5 minutes, and then it triggers a flow. Or if it's not, it updates that we have some changes. It looks easy now, but we had some work with this.\u003C/p>\u003Cp>Speaker 0: Yeah. Yeah. I can imagine. Hey. Like, hey.\u003C/p>\u003Cp>Trying to figure out, like, how to structure the flow and and actually building it, I'm sure. Like, how long did it take you to actually nail it nail the the flow, like, these 3 separate flows?\u003C/p>\u003Cp>Speaker 1: Yeah. Is it well, Arutz did most of it. It was almost great. He had some issues that were remaining. I think we fixed it with, I'm not sure.\u003C/p>\u003Cp>I don't remember really because I was also a a FlowDB. I I hadn't used Flows before. So for me, it was a a very thorough introduction into flows.\u003C/p>\u003Cp>Speaker 0: I yeah. Yeah. Well, now you're an expert. So it was awesome.\u003C/p>\u003Cp>Speaker 1: Mostly with a with a bit of help from Discord.\u003C/p>\u003Cp>Speaker 0: Yeah. Hey. The community members are amazing. Yeah, that that was how I learned most when I first started with Directus, as well.\u003C/p>\u003Cp>Speaker 1: I've had I don't know if the other have the CMS systems out there, have this community, but the Discord is amazing. It's for me, it's a it's a big plus. I mean, probably everyone has good community, but the the the director's Discord is really amazing. Yeah.\u003C/p>\u003Cp>Speaker 0: Yeah. You you you gotta get this one updated too. I see you're on 10 dot 6 dot 3. You can get it updated to to 10 dot 7 so you can, use the theming. And I think Yeah.\u003C/p>\u003Cp>I think 10 dot 8 went actually last night as well.\u003C/p>\u003Cp>Speaker 1: Oh, really?\u003C/p>\u003Cp>Speaker 0: Which has, like, some preset themes that are available. But Okay.\u003C/p>\u003Cp>Speaker 1: Nice. Yeah. I saw the video you guys did on the what was enabled to week with with all the everyday video?\u003C/p>\u003Cp>Speaker 0: Leap week.\u003C/p>\u003Cp>Speaker 1: Leap week. Yeah. Very nice. I think, like, content versioning is also under 10.7. Right?\u003C/p>\u003Cp>Speaker 0: It's yeah. That's on 10.7 as well. Yeah. It could be I I'd say for your clients, maybe not, super helpful. I I doubt they have, like, a ton of different versions of content, but for, larger sites where you need to to manage changes, definitely helpful.\u003C/p>\u003Cp>Speaker 1: Mhmm. Yeah. And the team, and I need to try it. It's a coincidence, but the director's team is matches this website really good.\u003C/p>\u003Cp>Speaker 0: Yeah. Yeah. Yeah. I love the purple. Yeah.\u003C/p>\u003Cp>Maybe that's Yeah. Maybe that's what, issue what drew my eye to it or or what I, yes, subconsciously I was like, hey. This looks amazing. That purple plays into it for sure.\u003C/p>\u003Cp>Speaker 1: Yeah. There's, there's one more website I wanted to show. This is\u003C/p>\u003Cp>Speaker 0: Yeah. Yeah. Definitely.\u003C/p>\u003Cp>Speaker 1: This is a website for an interior, high end design store, in our city, and they they loved, directors. They used to work with WordPress, and they were very excited when I showed them the finished CMS and how easy it was to change things. But this is also a project very heavy on good photography. And Directus was great in this one because I managed to use the the block system and and the for, like, for example, if we have a a blog and there's a Mhmm. This is in Dutch.\u003C/p>\u003Cp>I don't, suppose you can read it. But the we are using the blog builder. I think I I I read it here. If you go to the to the block, and then you have a block. And we're using the blocks as well to, really write the content.\u003C/p>\u003Cp>Speaker 0: Yeah. Yeah. So what do you do? A client can embed, like, rich rich content, like videos and and things like that.\u003C/p>\u003Cp>Speaker 1: Video is not yet. Sorry. But images, we can this is a a text block. They could add a a gallery block in which they can combine images. Yeah.\u003C/p>\u003Cp>So it's Nice.\u003C/p>\u003Cp>Speaker 0: Yeah. It's cool. Like, especially because it's very photo heavy. And they do I learned\u003C/p>\u003Cp>Speaker 1: a lot from from directors for this project, especially like the blocks. Sorry.\u003C/p>\u003Cp>Speaker 0: Oh, I was gonna say, do they is it a furniture business? Is that what it is?\u003C/p>\u003Cp>Speaker 1: They do high end furniture. Like, the Eames chair is something they sell, like, the classical higher end brands.\u003C/p>\u003Cp>Speaker 0: I gotcha.\u003C/p>\u003Cp>Speaker 1: Yeah. So they they you just have they have a big collection as well. For example, is a brand. And in this one, they can also write text, and then you can add these images themselves. And inside directors, they can choose.\u003C/p>\u003Cp>I want this image to be a size small, medium, or large, and the grid will using a series as grid, we'll place them like this. So it was a fun project. Learned a lot about directors, about the the the m to a system. Yeah. Yeah.\u003C/p>\u003Cp>Speaker 0: It looks really nice. Yeah. And I like that you're giving clients a little little control over presentation, but, you know, like, not enough to break the design.\u003C/p>\u003Cp>Speaker 1: Yeah. Yeah. And so I think that's the problem with with WordPress sometimes is there's a lot of things the client can do wrong, and and I think people like it. You can just change only what they want to change. Right?\u003C/p>\u003Cp>Speaker 0: Yeah. Like, honestly, like, I the clients that I worked with in the past, like WordPress and and stuff like Squarespace, it gives them it it's distracting. Right? Because what I really need them to do or needed them to do was go in and add content and photos, and what they ended up doing was, like, tweaking the spacing. Like, you know, like, hey.\u003C/p>\u003Cp>This doesn't look right. Or Yeah. Yeah. They spend 3 hours tweaking the design on the website, and they and they skip over the content. Right?\u003C/p>\u003Cp>Speaker 1: Yeah. I know what you mean. I know exactly what you mean. Yeah.\u003C/p>\u003Cp>Speaker 0: Yeah. Well, I I appreciate the tour. It looks amazing. You know? What's what is the the future?\u003C/p>\u003Cp>It's something I I like to ask everybody. I I before we we started recording, you said you gave a a talk on chat GPT and stuff, but, that would could be an interesting little thread. But what what are your future plans for your agency? You know, what what kind of projects are you guys working on now or or getting ready to launch soon? Like, what's in the cards for you?\u003C/p>\u003Cp>Speaker 1: Yeah. I think that I have some exciting I have 2 projects coming up, and they both need multi language. It's something which I'm very afraid to start doing because I don't know how I'm gonna do it. I was hoping you would have done it in the agency OS.\u003C/p>\u003Cp>Speaker 0: That's the next version. Right?\u003C/p>\u003Cp>Speaker 1: I'll wait for you to finish that.\u003C/p>\u003Cp>Speaker 0: Yeah.\u003C/p>\u003Cp>Speaker 1: Oh, so I think, with directors, I I took on some small projects. I blocked one really big project because I was afraid because I don't know yet how to do it. So for me, the future really is to get these bigger projects up and running in directives, see if I can use multi language, together with Nuxt and the block builder system. I know it's possible in directives. I just have to find out how to do it.\u003C/p>\u003Cp>Speaker 0: Yeah. I I think it's a matter of just, like, getting into it. It's it's it's one that I'm keen to explore as well. So I like, as you get into it, definitely hit me up. Yeah.\u003C/p>\u003Cp>The like, the translation interface, super easy to use inside Directus. Like, the the pieces that I'm not a 100% on, and maybe somebody watching this can, like, school us both. It would it's just, like, how to how the best way to architect that on the front end and and, like, connect it. And I think there's for Nux, there's the, there's a module, I think, that that would potentially play into it. I haven't messed with it, though.\u003C/p>\u003Cp>The\u003C/p>\u003Cp>Speaker 1: You mean the i18n module or yeah.\u003C/p>\u003Cp>Speaker 0: Yeah. I haven't messed with it yet.\u003C/p>\u003Cp>Speaker 1: I think it's it's fairly I've used it with a static website. So where the the the translation strings are just adjacent file, it works perfectly. It even hooks into the transition state so that when you change language, you have a fade out that changes.\u003C/p>\u003Cp>Speaker 0: Oh, nice.\u003C/p>\u003Cp>Speaker 1: Yeah. I think, well, the question will be, like, how do we like, if you do a request to to direct us for a page, do you give back all translations and you filter them out on the front end? Or when the user changes language, do you refresh the request to direct us? I think that would be\u003C/p>\u003Cp>Speaker 0: the way. Yeah. That's probably how I would do it. Yeah. I I have to connect you with, the the guys at Heinrichs and Heinrichs.\u003C/p>\u003Cp>They were one of the the previous episodes.\u003C/p>\u003Cp>Speaker 1: On email.\u003C/p>\u003Cp>Speaker 0: Yeah. They've got yeah. They've they've got a project that, they're I I I don't think it was actually, like, 2 different languages, but they were using the translation inside Directus to to manage that side of it. Uh-huh. It was like 2 locations.\u003C/p>\u003Cp>Like, they wanted to have 2 versions of the site, but it was all it was all still in English, but they were still using the the translations interface for\u003C/p>\u003Cp>Speaker 1: it. I remember. I think they used the translations interface to show these two locations. Right? Yep.\u003C/p>\u003Cp>I remember you did a video with them as well. Very interesting guys. Both of them.\u003C/p>\u003Cp>Speaker 0: Yeah. So or what's the the future date like for the agency? Or, like, you know, what are your your goals for, you know, I guess, like, a little longer term? You know, a year, 2 years, 3 years, 5 years?\u003C/p>\u003Cp>Speaker 1: What what's the\u003C/p>\u003Cp>Speaker 0: future on that side?\u003C/p>\u003Cp>Speaker 1: Yeah. In the coming year, I wanna be, like, become really good in just next time directors. I mean, some new projects require me to do look something up like this multi language thing. This is something that I don't it's hard to estimate. Client asks how much it's gonna cost me more to have multi language, but I don't know.\u003C/p>\u003Cp>So I'm gonna be happy once I I've built a few very complex, integrations between Nuxt and Directus so that I can quickly and correctly estimate future projects and just get them up and running much quicker. And then there's also I have a whole second company I'm starting called Waiyo. It's a it's a we're gonna build sort of a SaaS platform to connect patients with medical professionals. So I want to start exploring multitenancy and directives as well, which is also a big topic.\u003C/p>\u003Cp>Speaker 0: Yeah. Yeah. Definitely. I I look forward to seeing more about that project, Miguel.\u003C/p>\u003Cp>Speaker 1: Yeah.\u003C/p>\u003Cp>Speaker 0: Well I'll\u003C/p>\u003Cp>Speaker 1: be happy to share all my findings with the community. Yeah.\u003C/p>\u003Cp>Speaker 0: Yeah. Yeah. That's one thing that I love about everybody that works with Directus. Yeah. They're is so helpful and and just willing to share.\u003C/p>\u003Cp>I I think, you know, ultimately, that that's what, like, an open source product, like, yeah, that's one of the ways that, we can compete with a as a smaller team with with, like, larger products, you know, some of the the SaaS based headless CMS and and other products. But just our community, amazing community and and full of supportive people like yourself and Arud. We'll make sure we'll get him a a shout out again in this thing. Do that. Yeah.\u003C/p>\u003Cp>Speaker 1: I feel like I wonder if, like I think, like, head headless CMS feels like the future to me. Just it's so obvious to decouple the front and the back end. It's it's just like your your data platform and you can do anything you want with it. So I look forward to pretty seeing more of that evolve, in the in the near future.\u003C/p>\u003Cp>Speaker 0: And one last parting question before we go. Is there is there anything, you would like to see from us at at Directus, you know, in terms of, it could be features inside the system or, you know, otherwise, you know, something inside the community or documentation or guides or anything like that.\u003C/p>\u003Cp>Speaker 1: There's one thing I'm looking forward to, but I saw some threads on GitHub already. It's, what's the correct name? Like, if you upload an image that you can, like, select a part of the image that's the most important.\u003C/p>\u003Cp>Speaker 0: Oh, the focus. Yeah. Focal points. That's Yeah. Focal points.\u003C/p>\u003Cp>Yeah.\u003C/p>\u003Cp>Speaker 1: Focal that's amazing because a lot of clients upload a picture, and, obviously, your website is responsive. And he's like, oh, but my partner's faces out of the picture is like, okay, but it just scales. So it would be amazing to really have the client control what support for them in the picture. But I think Rick was busy with it. I haven't checked, but I'm looking really forward to that one and my clients as well.\u003C/p>\u003Cp>Yeah.\u003C/p>\u003Cp>Speaker 0: Yeah. Yeah. That that's a big one. Yeah. I love that feature in some of the other CMSs I've seen and that, I'm not exactly sure how the implementation of that will work, but one I'm very excited for as well.\u003C/p>\u003Cp>Speaker 1: Yeah. Me too.\u003C/p>\u003Cp>Speaker 0: Well, well, perfect. Miguel, thanks again, man. I I really enjoyed this conversation looking at the the projects that you've built with Directus and Nuxt. Amazing work, my friend.\u003C/p>\u003Cp>Speaker 1: Thank you very much. Thanks. And thanks for having me. It was great talking to you.\u003C/p>\u003Cp>Speaker 0: Yeah. Yeah. Absolutely. We'll have to do this again sometime.\u003C/p>","Hi, guys. Welcome back to another episode of I Made This. I'm your host, Brian Gillespie, developer advocate here at Directus, and I have got my extra special guest with me today, mister Miguel Stevens from Studio Monti. Miguel, happy to have you, man. Hi. Thanks for having me. Glad to Yeah. Yeah. So, hey. Like, you and I have talked inside our directus community a couple times through Discord or, I I think, even on several, like, GitHub issues probably. But, you know, for those who don't know you, maybe, give us a little intro or, you know, what's the backstory? Sure. So my studio is called Studio Monty. We're a Belgium based web company. We do lifestyle websites, boutique kind of websites, so not not a big technical prod products, but more like the the well and refined designed projects. And we always offer CMS, of course, which is direct us. So we don't necessarily have to dive in, directly to direct us. Super glad that you're using that. But, you know, tell me a a little more about the agency. Like, how did you get started? What what led you to that? You know? If we back up even further, like, how did you how did you get into development? Okay. Cool. Good question. I think for me, the case, like many people, has been like a a child passion. When I was 8 years old, my dad bought me a a Pentium 386 or what was this called? I don't even remember it. And I was I'm not sure. The 386. Old computer with with floppy disks. Okay. Yeah. And the I'm trying to think of, like, what the what the the megahertz they were running back in the day. I think the first computer I had was, like, maybe, like, 96 megahertz or something like that. Right? The people remember. No, like a diskette disk. How do you call it in English? It's 3.14 megabytes or something. Yeah. There you go. And the floppies were even less than that. But I started experimenting with Microsoft FrontPage, which, like, Dreamweaver is really old, but FrontPage, that's a whole other level. So I think I just roll I I started making small websites with cheat codes for roller coaster tycoon, things like that. Hey. There you go. So then my my whole journey has been development. I worked in some big development companies in Ghent, and I worked in some boutique agencies, but it's always been about about design and development. Yeah. So I I I love both. I'm a 100% developer. I it has to be beautiful. Right? I guess it. Yeah. So and you guys mentioned that you focus on boutique websites. Could you, you know, like, expand that a little bit? Like, specifically, like, what does the average project look like for you guys? Sure. I think with boutique, I mean, those are mostly websites with less than 10 pages. Design is very important. They wanna have something unique about them. So we we don't do it's not like WordPress templates, where you can clear a seed template. We always work with a designer. We we do custom designs, and custom development. It's it's very much focused on the specific needs of each client. And yeah. And then it's in the lifestyle sector, so, it's fun companies, interior design, architecture, things like that. Yeah. Very local as well. Yeah. So, hey, smaller businesses, clients who are very concerned with image and design and, looking professional. Yeah. Is that a fair summarization? Yeah. Very fair. What does your what does your process look like on those projects? Like, on the front end, like, how how you mentioned it's local, but how how do most of these clients find you? Yeah. For us, it's been a case of. Right? So, I think we started only 1 year ago, and all projects we've had have been through local Netflix. You make a website for someone you know. Before you know it, their uncle wants a website, and then you really get started and and your network grows. I do try to there's a we're based in Ghent, Belgium, and there's a good community of, of, people that are, yeah, entrepreneurs. What's the word in English? Yeah. Yeah. You got it. You nailed it. What? Yeah. So there's a lot of events, that we that I tried to go to to meet people, to talk about how we can help people. So it's been word-of-mouth. That's the English Cool. You're primarily. Excellent. Yeah. Talk to me about your process. Like, yeah, being a, like, you're doing smaller projects that are, let's say, not, like, super data intensive. If like, what's your like, what's the time span from, like, conception or or, like, the idea phase to, like, launching a project? Talk me talk me through your process because I'm super curious on that. Like, what those type of projects actually like, what the flow looks like. Okay. Good question. I've been refining this because I feel process is really important to make something replicable and scalable. So what's important for for me is I always start with a very intense strategy session. And so it's, like, 1 to 2 hours where we sit down with the client and really listen, like, what what are your challenges? Where do you wanna go with your business? Who do you wanna be in 5 years' time? It it can be very personal because each business has, like, these typical problems. They want more revenue. They want the right type of client. They want they want their website to provide more information, better customer service for their clients. So we really drill down the goals for each website, and only then do we start going to wireframing to to design and development. Gotcha. Now in that strategy call, is that, like, after you've already quoted them and and they sent them a proposal? Or Oh, yeah. Right. I forgot that part. So I think it starts with a sales conversation. You you call on the phone mostly, or you go face to face and you just listen. Can we help you? I think it's important. The big money topic. There's a lot of interesting videos about this, but a lot of people I read about, a lot of starting people are afraid to discuss money. They all wanna talk about money upfront, but I think it's important that you know what's in what's their budget, what can we do to help them, and, how can we make it work? So it's I think it's this first sales call is is very important. Yeah. That's that's always the toughest, like, conversation. Right? Right. Like, how come I've got a I've I've got a number in my head. You've got a number. Right. Yeah. Like, how do we talk about like, how do you how do you address that with clients? Like, you said you you don't shy away from it. I think during those first 15 minutes, it has to be clear what the budget is. So if it's not clear from them, tell you, you can just ask upfront, like, what budget do you have in mind? And if that range is acceptable for the type of websites, then we can then we can go for that. For example, startups, I wouldn't work with a fresh startup because they don't need a custom built website. Startups can use Wix or Squarespace, which is mostly enough to help them. So it it would be it wouldn't be good customer service of me to try to sell them a website because they don't need custom websites in their first month. Yeah. So I try to be very honest. I'm not the type of person who just takes on a client to get the money and then, no. I can't help them. If I can send them to Squarespace, then we'll happily do that. Yeah. Yeah. It's honesty and transparency. Right? Yeah. Yeah. I love that. That's super critical. You know? Mhmm. And even being like, you said you started the agency about a year ago. I can imagine, like, in the early days, it's a little harder to do that. Right? Where like, hey. We need a couple of projects through the door, but, still, if it's not a right fit, you you turn them away anyway. That's that's, that's pretty cool. Yeah. Yeah. At the beginning, you have to take on a lot of projects, obviously, because you just started and there's no, no real cash flow, but yeah. Yeah. Well, cool. So you have the strategy session. You guys get into, like, their company goals and, like, aspirations and things like that. And then how do how do things progress from there? Sure. Once we know after the strategy session, I make a content model, which is like a sitemap, but for each page, I also include elements. This happens after research. So we look at competitors. You look at the industry. What does the industry expect from websites of that sector, and and, what does the competition do? What do they do good? What don't they do good? And then we discuss some styles. There's there's more meetings. And then it's onto the design phase. For bigger projects, we do a style guide first. If there's a copywriter to be involved, you're a copywriter, obviously, and that's onto design. Yeah. Gotcha. Like, do you have any, like, philosophy? Like, what's your design philosophy? Yeah. I I I think for me, when I used to do projects, like, doing competitor research is is absolutely critical. Right? You gotta know what the landscape is, but how do you how do you not let that inform your own design? You know what I mean? Like, you you don't wanna just, like, copy competitors or you don't want to on the surface, you may not know whether that is actually working well for the competitor or not. Right? So, hey. Like, what is your philosophy on design, and, like, how do you navigate, just hey. Like, hey. Here's what everybody else is doing. Here's what we think is gonna actually work well for you as a to your clients. Mhmm. I think it's it's important obviously to look at the top ten. Right? We we we don't compare with businesses that are on page 20 on Google. And I think it's important if you're looking at, like, what's the content going to be to only focus on the content. It's like you just said, we try to if we see, like, interesting piece of content, I I copy paste the text and put it in Figma in, like, a sort of prototype. We don't screenshot designs because, like you say, if you start screenshotting designs from other companies, your design will be influenced by that. So I think it's important in the in the first phases where the content is being decided, that you just focus on what's what's being written, what's being told. I also saw an interesting video by The Future, and they they make this comparison like, a website has to answer questions. So we always start with that in mind. I write the quote and I'll accept it, and they say, a website is like a conversation. Right? You come to my website. It's like you come into my house, and you you have questions for me. Like, will this product help me feel more whatever. I don't know. So the the order of your website, the content has to answer all people's questions. This is something we I try to keep in mind when building the content model. Yeah. I I love to hear you say that because everybody says that you should be content first, but, like, what I see a lot of times is, like, there's a whole board of inspiration of, like, hey. We like this site. We like this site. We like this site. And then you're working backwards of, like, hey. Let's let's incorporate this theme and, hey. Like, take some ideas from this. And what I'm hearing you say is that you guys you you don't take screenshots of other websites. You might, like, snip some content, but it is very much, like, content driven. There's no like, when you're in the design process, there's no, like, outside influences from other websites. Is that right? Yeah. Maybe a bit. I I mean, I have a designer who I work with, and she, she loves designing, so she's not content first. I'm a big fan of content first, but I think it depends. It's it's one of the biggest chicken or egg problems in the web design industry for me is do you do the content first and then have your designer build around the content? Or do you have the designer design first and then put the content in the available space that the designer chose. It's we we've been trying both, ways of working, and there's no winner yet. I get you. Yeah. I I I think it's just just like the messy middle of, like, hey. Yeah. Like, where things come together. I don't know if there's an answer to if someone has an answer to the the big chicken or egg design versus content first question. Please let me know. Okay. Cool. And sales great. So I like, going through the design phase, like, obviously, hey. Like, are you who does the development? Like, the actual like, are you doing a lot of the actual code at this point or got somebody else on the team? Like, what does that look like? Yeah. I it depends if it's, if it's really busy and I'm like doing a lot of intakes and strategy, then I outsource the development. I'm working with someone who is really capable. I had to look, for a long time before I found him, but I have someone who helps me out. And sometimes I do projects myself. It's good to to stay in the flow. Right? So Nxt is evolving very quickly. Direct is evolving really quickly, and I I wanna, be up to date with everything. So I I still like to to, develop as well. To if it's still like to jump in. Yeah. Yeah. Yeah. Yeah. I I think that's, like, a common case for a lot of us. Right? You get into it. Like, you you love building stuff, and then, like, inevitably, you've gotta take on more of the business stuff, and that gets in the way of of, like, the fun stuff of actually building and creating. And it's very much the same way for me where, like, I I love to build and create, and, like, the other stuff kinda I I I enjoy that as well, but it kinda gets in the way. Right? I I think it's you never wanna have, like, 0 or 100 to to one side. I think it's always I always love developing. Maybe it's the same for you. Yeah. When there's time, it's it's great to just put on your headphones and be in the flow for a whole afternoon, writing code. It's amazing. It's still fun. Yeah. But excellent. Well, what what is the average timeline? So, like, we we've talked about the process. Like, it start to finish, like, how quickly are you you know, how long does it take for the average project to Mhmm. Start to launch? I think in theory, it would take, like, 1 month. But in practice, it's always 2, 3, 4 month. It's because I think there's something we're struggling with. It's very hard to to really I mean, it's only 1 year since we started, but it's very difficult for me right now to know exactly how long something will take. Sure. Depending on on how how fast does the design go, what types of content. So sometimes the client wants to write a copy himself, which is mostly something that will take long because nobody likes writing copy unless you're a copyright. Make your friends. I noticed that clients seems to seem to, like, not want to do it, so they they keep on, delaying it, and then it never happens. So it's it's a combination of waiting for assets. There's, like, a photographer involved, which is something for the types of websites. In the CGM Monti builds, we I wanna work with good photography. And minimal design is really important. So then you have a photographer who has to, be involved in the process. So there's a lot of variables, right, that can stretch or tend the timeline, but you you don't know in advance. Yeah. They like, on the photography side, do you require your clients to to work with a professional photographer? Or Well, this is something I started doing now since the last client. Yeah. I guess It's secured in the in the in the offer as well. I used to add, like, an an add on, like, photography optional, but there people are paying a lot of websites a lot of money for a website, and they're like, I don't need good pictures. So now it's just included in the price, and it's, yeah. Oh, that's smart. Yeah. I I always hate to see a well designed website and then, like, the same stock photos that you've seen on 35 other websites. It just ruins it ruins everything. The stock photos are the worst. I think the dark iPhone picture by the owner is even better than the stock. Yeah. Yeah. Right. Yeah. At least it's real. Yeah. Or it feels real. I I'm sure that's a real person in the stock photo, but, you know, some of those stock photos, I I don't know, like, how people make those poses. Like, I think you never see that stuff in real life. Right? Well, I think it's it's your eye sees it directly. I mean, your stock photo, you can see it from very far, and it it gives the site a sort of fake feeling. It's it doesn't feel right when you see stock photos. Yeah. Yeah. So, like, shifting into, like, the tools that you're using to build the sites, like, what does your preferred, like, stack look like? You know? Right? What tools are you using on the front end, on the back end, that sort of stuff? So it's, for us, it's Nuxtree on the front end and then Directus, on the back end. Yeah. Gotcha. We're running it on Docker containers for our production servers as well as, local local hosting. It's also on Docker. Nice. Yeah. You're definitely one of my preferred stacks. But, like, what what led you to those 2 pieces? Like, you know, were you using those a year ago when you started? Or yeah. I know you mentioned front page that you were using way back in the day to build stuff. Like, walk walk me through the progression because that's that's super interesting for me because I I remember front page. I remember Dreamweaver. Right. I even I'm I'm not sure I I'm not sure if Angel Fire or, like, GeoCities were ever popular outside the US, but it was like a it was like a free website builder where you could get on and have all the animated GIFs and, like, all the all the crazy counters and all that stuff back in the day. But that's that's how I got my start in the industry as well. It was back in the day using those tools to kinda scratch stuff together. I think that you said this rings a bell, but I I never heard of for this Angelfire. Angelfire. It was yeah. It's basically like a a free website builder host. Like, you could you could throw, like, crazy backgrounds and stuff on there and write your text. But the rest of it, you know, back in those days, it was all just whatever HTML you could throw together yourself. Yeah. Marquee elements and stuff like that. Yeah. Yeah. Oh, yeah. So, I started my development. I mean, my first company I worked with was Laravel. So it was PHP. I loved Laravel. It's it was easy to use for me. It was a a dream come true after writing spaghetti code in PHP. But the older I got, and I started working with Vue, and I started loving JavaScript a lot. For me, it feels much cleaner, the syntax and PHP. I'm stirring some feathers here. I know. It's a big discussion. PHP lovers are everywhere and the JavaScript lovers. But for me, it's always been JavaScript. So when I started this company 1 year ago, I promised no PHP. So, my first thought was, okay. I need a I need a JavaScript back end. So I started looking into headless CMS systems. Strapi Strapi. I don't know how you pronounce it. Yeah. Was the first one I tried, but I I found it difficult to work with. I don't know. It was it didn't feel right. So I tried a few others. I tried story block. I tried content folks for a while, and then someone on Reddit mentioned Directus. Mhmm. I think version 10 was just released. When was it released? Do you know version 10? Version 10 or version 9. Version 10 was that's Yeah. Version 10 was not so long ago. Version 9 was, like, a big change. Version version 8 was on PHP. Oh, really? Version 9 version 9 was, like, the switch to to node to, like, the JavaScript side of things. And that was a a crazy big shift. That was about the same time that I actually found directives myself. Okay. That's when when version 9 was released, which was You weren't there in the BHP era. I I was not. No. I I wasn't even aware of the tool, which is Okay. Which is wild. Yeah. And that's why I think it's someone on Reddit brought me to Directus, and I I tried it out, set it up. The documentation is great, and I just got it working. And then I just built my first website. Yeah. Nice. So I like, what were you said, like, the other tools didn't feel right, and that that definitely feels like a like a designer thing of a it doesn't feel right. But were there a like, any, like, issues that you encountered that were you were like, hey. This is this is not working for me? Like, can you even remember any of those tools? Like, what were the the red flags, like, if you can remember any? Yeah. I think for me, now that I think about it, the biggest thing was since I mean, headless CMS systems can be used for, like, internal tools, for softwares. But for our studio, it's always going to be a CMS system. So my thought was if a client I remember with Strapi, I thought, if a client has to work on this, it's gonna be complicated. And for with directors, it just felt very calm. I could see my even less tech savvy clients work in this system. So for me, it was mostly a choice of, okay, which system are people my clients going to be able to work in without having to call me too much with questions. It it Not having to do a 12 hour CMS training. It is very much from, like, the client perspective. Yeah. I I can remember that personally, like, seeing it like, I I went through a bunch of those as well. And, like, the seeing the white space and just I you mentioned calmness or the the calm, of, like, hey. This is really well designed, and it's open source, which is great. Yeah. But I can remember looking at it and like, hey. Like, okay. Yeah. This feels right. Yeah. I think it was a gut feeling. It's like a first impression. Right? You always set up doc. You open the tool and it's okay. This feels good. And I think what I also remember is the image handling direct is is is perfect. For CMS systems, there are always gonna be images, and the I think the file library and all the systems around it are built really, really solidly. So, yeah, that's a big plus as well. What does, like, the average project look like for you inside Directus for for a client? You know, like, maybe through, like, the data model. You know? Or maybe just talk me through some of those, and and I think you've got a few things to show us. But, maybe just so you could, like, talk me through how the projects look inside Directus before we jump into that. Okay. Cool. I think the last three projects were mostly similar. So we have pages. We have a page builder using the, many to any builder system. And then we have just like projects, testimonials, the team page. So it's mostly, managing data. We're not too heavy on flows at the moment. There's a few flows for, like, building, which we'll get into in a in a few minutes. But, yeah, it's mostly page builder. That's the biggest, chunk. And we use blocks. So every page, you can just, compose yourself with blocks. Clients don't really use that too much. It's mostly for myself. A block is reusable. It's a nice, neat piece of code, which can even be reused in in other projects. So yeah. How do you, like, how do you present, like, the CMS and, like, direct us to your clients, like, through that phase? Is that, like, a discussion that you have, like, at the very beginning of a project? Is it like, hey. Oh, we got your website. You're gonna be able to edit all the content through this CMS. Yeah. Are you, like, talking me through how you present that solution to the client? Sounds good. In my last, few offers, I included, screenshots or a video of directors. And the good thing is that clients mostly come from WordPress. So when they see directors, they're like, this is impossible. They almost can't believe how easy it is. Crazy. The the reactions are just amazing. The last two clients were really like, this is so easy. Essentially what they said. I sat next to them for the CMS training. We put in some data together and just they came from WordPress. They were like, this is really easy. So it feels really good to have clients, have this this sort of really good experience. Now are are most of them coming from, like, the the drag and drop page builders where they've gotta go in and manage, like, all the padding and spacing and colors and all of that? Okay. Yeah. Or from WordPress installations that are like a plug in hell, and everything's a plug in, and there there have to be and people don't like that. I think directors, you can also you can protect your clients. Like, you give them roles, and they only they can only edit what they're assigned to do. I know you can do that in WordPress as well, but WordPress feels like very, very much. And clients, they mostly don't have a lot of time. They maybe want to add a new testimonial. They had just want to log in, click testimonial, add new, and be done with it. So Yeah. They they don't wanna, yeah, geek out on the the software or the tools like like we do. They just wanna get them out. They've got other stuff to do. Yeah. They don't care what tool it is. It just has to be easy enough. Yeah. Cool. Well, do you wanna maybe share your screen and and show us, you know, like I would love to share with the audience, like, what the the typical, like, front end project looks like for you, And then, you know, maybe show us around the the back end if you're if you're able to. Yeah. Sure. Let me just share my screen real quick. K. Cool. So this is a project we finished, 2 months ago. It's a website for a company that does funding. Yeah. We like white space. We like beautiful fonts. These pages are so this is Nextree. This is a statically generated website. So Okay. It's on it's built on Netlify. So it's not SSR. It's SS SSG. What's what is the what's the the display font there? Like, all the headings. The this font? Yeah. I I I really like that font. Have a look. I should know that. Ah, silica. It's silica. Right. Silca. It's nice having font. Yeah. Yeah. It looks great. I and, like, I've got another project that I'm working on personally that, I I've been eyeing fonts, and, like, that process is always, like, such a nightmare of, like, going through and trying to suss out just the perfect font for a project. This one looks great. Right. Might have to worry about. Beautiful fonts are mostly really expensive, which is fair. True. True. And this is actually just a page built and page builder. They have cases, which are like, yeah, project cases. And what I love about this, it feels really snappy. I mean, this is Nuxt. Yeah. It's pre rendered, so that's the speed is the speed is amazing. Speed score is also really good. There's a form in here which will, be sent to directors as well. Nice. Yeah. And it's a dynamic form if you if you go to a case and you wanna be then your case will be prefilled here. This all will be sent to directors. Yeah. That's cool. What's a great great looking site. Yeah. Thanks. Very clean. Yeah. What are you, what are you using for, like, the the transitions and the animations? Is it, are you, like I'm just custom coded CSS, or is it, like, a different library? It's a wrapper component. It's called scroll transition dot view. I made it together with someone else, I think. We used it in a previous project. Yeah. And it just, yeah, it shifted into, into view. As yeah. It's it's very tasteful. I think for me, that's one of the other things that I always struggle with on some websites is, like, everything is animated. There's, like, a crazy amount of motion, and it it just distracts from the the story in some cases. But this is this looks really well done. I think it it has to be subtle. What I would like now is for, like, working on some images that, like, slide in from the right. Some some tiny animations, but I don't want it to be much more than this. Yeah. It looks great. So for the for the back end, as you see the models we have, this is heavily based on the agency OS, by the way, which I think which you wrote most part of it. Yeah. Most of it is mine. So thank you for this. Yeah. No. Great. How No. Happy to you know, that project was like a labor of love because it it it took me a long time to figure out how to manage, like, the page blocks. And I was like, okay. Like, once you see it and and you've got a a reference, it's much easier to understand. But when I first came to Directus, I knew this functionality was available. It just like, there weren't any good references reference points to to use. So I I'm happy that it's been helpful for you. 100%. Oh, it yeah. It is. I don't know if I would have managed without. I think it's also it's a plus point because there's a lot of back end systems, but you guys took the time to write out a full front end to showcase how it can be used. So that's I'm very grateful for it. It's, it's amazing. You probably see it's heavily based on agency OS. Right? Yeah. There's a page. You have the blocks. You can move them. Yeah. It looks very familiar. Yeah. This marquee, this text, that's the one you see here. So it's it's very easy for the client to work in. What's interesting about this project and, something I told you about is the the the flows, that we built. Because it's statically generated, you can use, like, a Netlify hook that each time you save a change you made, Netlify will start building. But the problem you get when 3 or 4 people are changing content is you get a queue of 20, 30 builds, the day. Yeah. Or the client changes a couple of different pages. Right? And they They go through it. They they press save. They change something else, and it's it's triggering bills the whole time. Yep. And on NettoFi. So what, I contacted I wrote down his username, Arud Arud on Arud. Yeah. Arud. Do you know him? Yeah. Yeah. He, he won several of the or I think he won at least one of our hackathons. Okay. Nice. Yeah. Yeah. He started to on on Discord. Yeah. Very helpful member of the community. 100%. So he started the idea of, these 3 flows you see in green, and then I finished it. There was one issue, and we worked on it together, reached out a bit. So what this does is every time a change is pushed, we set a flag, like change pushed through, and we set a time stamp. Mhmm. And what these three flows together do is they only trigger a build every 5 minutes. So you could And and only when there's changes. Right. Yeah. Oh, that's cool. For example, this one, every 5 minutes, it will look inside the general settings and check if the variable has changes if it's set to true, and that will trigger this other flow. Okay. And this other flow will trigger an Sify build and update the current build time and update the settings. So it's, I gotcha. Yeah. And then there's one more, the publish queue on save. This one just watches, if you save anything. Okay. Yeah. So it's watching the content collections. Yeah. All of them. Yeah. Gotcha. And then it checks if it's older than 5 minutes, and then it triggers a flow. Or if it's not, it updates that we have some changes. It looks easy now, but we had some work with this. Yeah. Yeah. I can imagine. Hey. Like, hey. Trying to figure out, like, how to structure the flow and and actually building it, I'm sure. Like, how long did it take you to actually nail it nail the the flow, like, these 3 separate flows? Yeah. Is it well, Arutz did most of it. It was almost great. He had some issues that were remaining. I think we fixed it with, I'm not sure. I don't remember really because I was also a a FlowDB. I I hadn't used Flows before. So for me, it was a a very thorough introduction into flows. I yeah. Yeah. Well, now you're an expert. So it was awesome. Mostly with a with a bit of help from Discord. Yeah. Hey. The community members are amazing. Yeah, that that was how I learned most when I first started with Directus, as well. I've had I don't know if the other have the CMS systems out there, have this community, but the Discord is amazing. It's for me, it's a it's a big plus. I mean, probably everyone has good community, but the the the director's Discord is really amazing. Yeah. Yeah. You you you gotta get this one updated too. I see you're on 10 dot 6 dot 3. You can get it updated to to 10 dot 7 so you can, use the theming. And I think Yeah. I think 10 dot 8 went actually last night as well. Oh, really? Which has, like, some preset themes that are available. But Okay. Nice. Yeah. I saw the video you guys did on the what was enabled to week with with all the everyday video? Leap week. Leap week. Yeah. Very nice. I think, like, content versioning is also under 10.7. Right? It's yeah. That's on 10.7 as well. Yeah. It could be I I'd say for your clients, maybe not, super helpful. I I doubt they have, like, a ton of different versions of content, but for, larger sites where you need to to manage changes, definitely helpful. Mhmm. Yeah. And the team, and I need to try it. It's a coincidence, but the director's team is matches this website really good. Yeah. Yeah. Yeah. I love the purple. Yeah. Maybe that's Yeah. Maybe that's what, issue what drew my eye to it or or what I, yes, subconsciously I was like, hey. This looks amazing. That purple plays into it for sure. Yeah. There's, there's one more website I wanted to show. This is Yeah. Yeah. Definitely. This is a website for an interior, high end design store, in our city, and they they loved, directors. They used to work with WordPress, and they were very excited when I showed them the finished CMS and how easy it was to change things. But this is also a project very heavy on good photography. And Directus was great in this one because I managed to use the the block system and and the for, like, for example, if we have a a blog and there's a Mhmm. This is in Dutch. I don't, suppose you can read it. But the we are using the blog builder. I think I I I read it here. If you go to the to the block, and then you have a block. And we're using the blocks as well to, really write the content. Yeah. Yeah. So what do you do? A client can embed, like, rich rich content, like videos and and things like that. Video is not yet. Sorry. But images, we can this is a a text block. They could add a a gallery block in which they can combine images. Yeah. So it's Nice. Yeah. It's cool. Like, especially because it's very photo heavy. And they do I learned a lot from from directors for this project, especially like the blocks. Sorry. Oh, I was gonna say, do they is it a furniture business? Is that what it is? They do high end furniture. Like, the Eames chair is something they sell, like, the classical higher end brands. I gotcha. Yeah. So they they you just have they have a big collection as well. For example, is a brand. And in this one, they can also write text, and then you can add these images themselves. And inside directors, they can choose. I want this image to be a size small, medium, or large, and the grid will using a series as grid, we'll place them like this. So it was a fun project. Learned a lot about directors, about the the the m to a system. Yeah. Yeah. It looks really nice. Yeah. And I like that you're giving clients a little little control over presentation, but, you know, like, not enough to break the design. Yeah. Yeah. And so I think that's the problem with with WordPress sometimes is there's a lot of things the client can do wrong, and and I think people like it. You can just change only what they want to change. Right? Yeah. Like, honestly, like, I the clients that I worked with in the past, like WordPress and and stuff like Squarespace, it gives them it it's distracting. Right? Because what I really need them to do or needed them to do was go in and add content and photos, and what they ended up doing was, like, tweaking the spacing. Like, you know, like, hey. This doesn't look right. Or Yeah. Yeah. They spend 3 hours tweaking the design on the website, and they and they skip over the content. Right? Yeah. I know what you mean. I know exactly what you mean. Yeah. Yeah. Well, I I appreciate the tour. It looks amazing. You know? What's what is the the future? It's something I I like to ask everybody. I I before we we started recording, you said you gave a a talk on chat GPT and stuff, but, that would could be an interesting little thread. But what what are your future plans for your agency? You know, what what kind of projects are you guys working on now or or getting ready to launch soon? Like, what's in the cards for you? Yeah. I think that I have some exciting I have 2 projects coming up, and they both need multi language. It's something which I'm very afraid to start doing because I don't know how I'm gonna do it. I was hoping you would have done it in the agency OS. That's the next version. Right? I'll wait for you to finish that. Yeah. Oh, so I think, with directors, I I took on some small projects. I blocked one really big project because I was afraid because I don't know yet how to do it. So for me, the future really is to get these bigger projects up and running in directives, see if I can use multi language, together with Nuxt and the block builder system. I know it's possible in directives. I just have to find out how to do it. Yeah. I I think it's a matter of just, like, getting into it. It's it's it's one that I'm keen to explore as well. So I like, as you get into it, definitely hit me up. Yeah. The like, the translation interface, super easy to use inside Directus. Like, the the pieces that I'm not a 100% on, and maybe somebody watching this can, like, school us both. It would it's just, like, how to how the best way to architect that on the front end and and, like, connect it. And I think there's for Nux, there's the, there's a module, I think, that that would potentially play into it. I haven't messed with it, though. The You mean the i18n module or yeah. Yeah. I haven't messed with it yet. I think it's it's fairly I've used it with a static website. So where the the the translation strings are just adjacent file, it works perfectly. It even hooks into the transition state so that when you change language, you have a fade out that changes. Oh, nice. Yeah. I think, well, the question will be, like, how do we like, if you do a request to to direct us for a page, do you give back all translations and you filter them out on the front end? Or when the user changes language, do you refresh the request to direct us? I think that would be the way. Yeah. That's probably how I would do it. Yeah. I I have to connect you with, the the guys at Heinrichs and Heinrichs. They were one of the the previous episodes. On email. Yeah. They've got yeah. They've they've got a project that, they're I I I don't think it was actually, like, 2 different languages, but they were using the translation inside Directus to to manage that side of it. Uh-huh. It was like 2 locations. Like, they wanted to have 2 versions of the site, but it was all it was all still in English, but they were still using the the translations interface for it. I remember. I think they used the translations interface to show these two locations. Right? Yep. I remember you did a video with them as well. Very interesting guys. Both of them. Yeah. So or what's the the future date like for the agency? Or, like, you know, what are your your goals for, you know, I guess, like, a little longer term? You know, a year, 2 years, 3 years, 5 years? What what's the future on that side? Yeah. In the coming year, I wanna be, like, become really good in just next time directors. I mean, some new projects require me to do look something up like this multi language thing. This is something that I don't it's hard to estimate. Client asks how much it's gonna cost me more to have multi language, but I don't know. So I'm gonna be happy once I I've built a few very complex, integrations between Nuxt and Directus so that I can quickly and correctly estimate future projects and just get them up and running much quicker. And then there's also I have a whole second company I'm starting called Waiyo. It's a it's a we're gonna build sort of a SaaS platform to connect patients with medical professionals. So I want to start exploring multitenancy and directives as well, which is also a big topic. Yeah. Yeah. Definitely. I I look forward to seeing more about that project, Miguel. Yeah. Well I'll be happy to share all my findings with the community. Yeah. Yeah. Yeah. That's one thing that I love about everybody that works with Directus. Yeah. They're is so helpful and and just willing to share. I I think, you know, ultimately, that that's what, like, an open source product, like, yeah, that's one of the ways that, we can compete with a as a smaller team with with, like, larger products, you know, some of the the SaaS based headless CMS and and other products. But just our community, amazing community and and full of supportive people like yourself and Arud. We'll make sure we'll get him a a shout out again in this thing. Do that. Yeah. I feel like I wonder if, like I think, like, head headless CMS feels like the future to me. Just it's so obvious to decouple the front and the back end. It's it's just like your your data platform and you can do anything you want with it. So I look forward to pretty seeing more of that evolve, in the in the near future. And one last parting question before we go. Is there is there anything, you would like to see from us at at Directus, you know, in terms of, it could be features inside the system or, you know, otherwise, you know, something inside the community or documentation or guides or anything like that. There's one thing I'm looking forward to, but I saw some threads on GitHub already. It's, what's the correct name? Like, if you upload an image that you can, like, select a part of the image that's the most important. Oh, the focus. Yeah. Focal points. That's Yeah. Focal points. Yeah. Focal that's amazing because a lot of clients upload a picture, and, obviously, your website is responsive. And he's like, oh, but my partner's faces out of the picture is like, okay, but it just scales. So it would be amazing to really have the client control what support for them in the picture. But I think Rick was busy with it. I haven't checked, but I'm looking really forward to that one and my clients as well. Yeah. Yeah. Yeah. That that's a big one. Yeah. I love that feature in some of the other CMSs I've seen and that, I'm not exactly sure how the implementation of that will work, but one I'm very excited for as well. Yeah. Me too. Well, well, perfect. Miguel, thanks again, man. I I really enjoyed this conversation looking at the the projects that you've built with Directus and Nuxt. Amazing work, my friend. Thank you very much. Thanks. And thanks for having me. It was great talking to you. Yeah. Yeah. Absolutely. We'll have to do this again sometime.",[189,190],"bf2b98b8-d1cd-4627-9149-c88b650aae8d","e4693828-538f-4880-9f4f-5f01c6826ca6",[],{"reps":193},[194,250],{"name":195,"sdr":8,"link":196,"countries":197,"states":199},"John Daniels","https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[198],"United States",[200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249],"Michigan","Indiana","Ohio","West Virginia","Kentucky","Virginia","Tennessee","North Carolina","South Carolina","Georgia","Florida","Alabama","Mississippi","New York","MI","IN","OH","WV","KY","VA","TN","NC","SC","GA","FL","AL","MS","NY","Connecticut","CT","Delaware","DE","Maine","ME","Maryland","MD","Massachusetts","MA","New Hampshire","NH","New Jersey","NJ","Pennsylvania","PA","Rhode Island","RI","Vermont","VT","Washington DC","DC",{"name":251,"link":252,"countries":253},"Michelle Riber","https://meetings.hubspot.com/mriber",[254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,231,442,443],"Albania","ALB","Algeria","DZA","Andorra","AND","Angola","AGO","Austria","AUT","Belgium","BEL","Benin","BEN","Bosnia and Herzegovina","BIH","Botswana","BWA","Bulgaria","BGR","Burkina Faso","BFA","Burundi","BDI","Cameroon","CMR","Cape Verde","CPV","Central African Republic","CAF","Chad","TCD","Comoros","COM","Côte d'Ivoire","CIV","Croatia","HRV","Czech Republic","CZE","Democratic Republic of Congo","COD","Denmark","DNK","Djibouti","DJI","Egypt","EGY","Equatorial Guinea","GNQ","Eritrea","ERI","Estonia","EST","Eswatini","SWZ","Ethiopia","ETH","Finland","FIN","France","FRA","Gabon","GAB","Gambia","GMB","Ghana","GHA","Greece","GRC","Guinea","GIN","Guinea-Bissau","GNB","Hungary","HUN","Iceland","ISL","Ireland","IRL","Italy","ITA","Kenya","KEN","Latvia","LVA","Lesotho","LSO","Liberia","LBR","Libya","LBY","Liechtenstein","LIE","Lithuania","LTU","Luxembourg","LUX","Madagascar","MDG","Malawi","MWI","Mali","MLI","Malta","MLT","Mauritania","MRT","Mauritius","MUS","Moldova","MDA","Monaco","MCO","Montenegro","MNE","Morocco","MAR","Mozambique","MOZ","Namibia","NAM","Niger","NER","Nigeria","NGA","North Macedonia","MKD","Norway","NOR","Poland","POL","Portugal","PRT","Republic of Congo","COG","Romania","ROU","Rwanda","RWA","San Marino","SMR","São Tomé and Príncipe","STP","Senegal","SEN","Serbia","SRB","Seychelles","SYC","Sierra Leone","SLE","Slovakia","SVK","Slovenia","SVN","Somalia","SOM","South Africa","ZAF","South Sudan","SSD","Spain","ESP","Sudan","SDN","Sweden","SWE","Tanzania","TZA","Togo","TGO","Tunisia","TUN","Uganda","UGA","United Kingdom","GBR","Vatican City","VAT","Zambia","ZMB","Zimbabwe","ZWE","UK","Germany","Netherlands","Switzerland","CH","NL",1773850433958]