Now as a developer myself, when it comes to vibe coding, I don't necessarily want to use it for my real code and my real projects and things that actually make me real money. I feel a little uncomfortable with that, at least right now. However, where I do very much enjoy it is for personal software. And when I say personal software, I'm referring to tools and tasks and software that is meant for one person, this guy right here.

and tasks and software that is meant for one person, this guy right here. In these situations, I genuinely don't care what the code looks like. I will never distribute it. I will never ask you to sign up. I will never sell it to you. It is only for me and a particular need that I have. Yeah, in those cases, I think Vico is actually spectacular. So with that in mind, I have a particular unique, weird random need that I'm gonna vibe, code come along.

So with that in mind, I have a particular unique, weird random need that I'm gonna vibe, code come along. I'm gonna call it real. Alright, so this is a, this is a strange one come along, but it should actually be fairly easy to implement. So no starter kits. Pest if we have any tests, and I do want Laravel Boost. If we have a database, which I don't think we will sq light would be fine for my code editor, we're just gonna stick with peach B storm here.

would be fine for my code editor, we're just gonna stick with peach B storm here. And usually I would stick with like Joie or cloud code. Yes, install my dependencies and let's CD in there and open this up in my editor. All right, here we go. So let's bring up the terminal and I will initialize get, um, just in case I need to roll anything back. Now, ideally, the point is I will mostly just approve just about everything as long as it works.

Now, ideally, the point is I will mostly just approve just about everything as long as it works. Uh, but nonetheless it might be useful. So I'll say initial commit. Alright, so here's what we're building. It's a weird one. So as it turns out, I'm a really big fan of this video game called Outer Wilds. It's the only information based video game I've ever played, which means there's no fighting, you're not killing anyone. And as it turns out, if you can gather all

which means there's no fighting, you're not killing anyone. And as it turns out, if you can gather all of the information you need, you could actually complete the game in 15 minutes from the very beginning. But the whole point of the game is to travel around and figure out what it is you're supposed to do and what happened, um, to these aliens, um, that caused them to disappear so long ago, right? It's so much fun. It's, it's a spectacular game.

to disappear so long ago, right? It's so much fun. It's, it's a spectacular game. Anyways, as part of the DLC, you traveled to this new area and I don't wanna have any spoilers, but I do want you to play it if you're interested. And, uh, you're trying to once again, figure out what happened and you watch these reels and slides that guide you to different locations and then you go to the locations and you find a little more information

and then you go to the locations and you find a little more information and that will guide you somewhere else. So I'm gonna do this very thing for a present for my son, and we're gonna do it in the form of like, sort of like slideshows where he will visit a website and he will have a series of photos that guide him to a particular location where he can get more information. So one of those websites we're gonna build together. Let's go. Just come along, it's weird. Come along.

So one of those websites we're gonna build together. Let's go. Just come along, it's weird. Come along. Alright, so let's get started. I'm gonna bring up JetBrains AI and I'm gonna speak it out and this might take a moment or so, and I might be a little sloppy, but that's okay. This is real life. I'd like you to build a one page website that has the sole purpose of displaying a slideshow of photos. Now, this should be perfectly centered.

of displaying a slideshow of photos. Now, this should be perfectly centered. It should be optimized for mobile and incredibly minimal. Don't reach for more UI than is necessary at any given time. We should only see one photo. And when we click a next and previous button below the photo, it will take us to the next photo in the, in the array of photos that we have available. If we reach the end, it should cycle back

of photos that we have available. If we reach the end, it should cycle back to the beginning again. To reiterate, I only want a single photo on the page, perfectly centered at a time. I wanna cycle through the photos as I click those buttons. Now, in terms of tooling, I do wanna use View three and Inertia two, and I'd like, uh, for any components you might need, uh, for us to reach for the Shad CN ui uh, package.

and I'd like, uh, for any components you might need, uh, for us to reach for the Shad CN ui uh, package. Uh, so get started. Use a dark theme and ask me any questions you need to, uh, as you prepare your plan. Alright, so again, notice like I, I kind of jumbled my words a little bit. That's okay. In real life I might go through here and tweak anything. For example, um, I believe the website is Sha CN view,

and tweak anything. For example, um, I believe the website is Sha CN view, um, package. It can track that down. Okay, let's go. I'm excited to see what it does here. Alright, and fairly quickly, it has a handful of questions. Before I create the implementation plan, I have a few questions. The photo source, of course, we have to reveal the photos. Where should they come from next in terms of the setup,

The photo source, of course, we have to reveal the photos. Where should they come from next in terms of the setup, I noticed view three and inertia are not yet installed. Should I install them? Okay, we will clarify that for the photo dimensions. Should we scale to fit? Yes. Should we have a maximum width? Yeah, this is very useful. And notice it's asking these questions because I was clear that I wanted to ask me questions. Remember, sometimes you, you have

because I was clear that I wanted to ask me questions. Remember, sometimes you, you have to be verbose in your instructions or sometimes it'll just figure it out for you and often it'll do, uh, something that you don't necessarily want. Alright, so here's what we're gonna do. First up, I'm gonna copy over the assets. So I have these stored within my home directory and I think I called them, yeah, outer wild assets.

So I have these stored within my home directory and I think I called them, yeah, outer wild assets. And I'm gonna move it into an assets directory within this project. Okay, so if we take a look real quick, now I have assets and we have some slides and some background music. So actually with that in mind, why don't we just take both of these and move them into my public directory? Alright, next, I'm gonna answer these questions, but I'm not gonna make you watch, so I will answer them

Alright, next, I'm gonna answer these questions, but I'm not gonna make you watch, so I will answer them and then review them with you and, uh, quickly submit it. Alright, so I've answered these questions and yet very quickly, here's where the photos are stored. They're numbered, uh, because we're a vibe coating here, I don't care too much about manually installing things. Uh, but just note, for real life and for real projects that are not vibe coated,

Uh, but just note, for real life and for real projects that are not vibe coated, generally my approach is just to manually install whatever tools I want AI to reach for. But in this case it just doesn't matter. And then finally, photos can be a maximum of 1200 pixels, uh, or 90% of the viewport width, and that will handle mobile optimization. And then finally, nav. Uh, the, the navigation buttons can just be icons.

And then finally, nav. Uh, the, the navigation buttons can just be icons. So I'm gonna turn on brave mode so I don't have to approve everything. And again, I just don't care too much and I will give this a run. Alright, it looks like it's done, so I'm not gonna lie, I'm a little bit excited. Uh, it's, it's, it's always fun. You never know are you gonna get something incredibly

Uh, it's, it's, it's always fun. You never know are you gonna get something incredibly impressive or not quite right? And yeah, don't forget, in terms of the code itself, uh, the entire philosophy is we don't necessarily care what the code looks like, but of course as programmers, sometimes it's fun just to take a look. So it has a slideshow here. It somewhat verb robustly is reading those files

So it has a slideshow here. It somewhat verb robustly is reading those files and sending that through to a slideshow component. The slideshow component is using the composition API. Very good. It's getting that from the Boost guidelines. It accepts some photos. It tracks what the current one is, it has buttons to, to increment it, basically, uh, it is using shad cn. So notice it's pulling in a button component that is again provided, uh, by Shad CN as you see here.

So notice it's pulling in a button component that is again provided, uh, by Shad CN as you see here. Not necessarily needed, but just for fun. Um, it looks good. So I'm gonna take a look in the browser. Okay, so if we load reel test immediately I can see an issue. The photo is simply too large. And maybe this is my fault because I think it did honor my requirement. Yeah, notice the photo is 1200 pixels,

because I think it did honor my requirement. Yeah, notice the photo is 1200 pixels, but maybe I should have been clear that I still want to contain the entire photo within the viewport. So that's something we should fix right now. All right, back to the editor. I checked the website and the first thing I noticed is that the photo is simply too large. So yes, you maintained a maximum width of 1200 pixels. However, I want

So yes, you maintained a maximum width of 1200 pixels. However, I want to display the entire photo within the viewport without the user needing to scroll grow. All right, let's see if it can fix the issue. All right, that's fixed. So if I switch back, perfect. Nice and easy. Alright, so now you can see how this works. So we have these like owl slash moose like creatures, and the way this works is I actually photographed my wife and real life and then we swap her out with,

and the way this works is I actually photographed my wife and real life and then we swap her out with, um, a version from the game. Okay, so now I can cycle through here and you can see there's a blue lockbox and we hand it to him and he goes up the stairs, okay? And he goes into the green room and then he opens something and then it repeats, right? So you get just a, a glimpse of, and there's a lockbox here and where did it go?

So you get just a, a glimpse of, and there's a lockbox here and where did it go? It looks like it got put into this secret compartment area. And then he will find that. But then he also needs a key and the key will be located somewhere else and he has to gather these clues. That's the way it works. Okay, so this is working, but next I want some, some creepy background music. So that's my next step. Great.

but next I want some, some creepy background music. So that's my next step. Great. Um, I'd like you to add background music now to add a bit of mood. When the page loads, we should instantly start playing the background music and you will find it within the public directory. I believe it's called BG Music mp3. All right, good enough for me. Let's see if it works. All right, and that's done as well.

All right, good enough for me. Let's see if it works. All right, and that's done as well. So let's scroll up and we can see an audio element with autoplay and loop attributes was successfully added to the slideshow component. So let's look for audio. And there we go. It's referencing that file, it loops and it automatically plays. So let's try that one out now. So we reload.

and it automatically plays. So let's try that one out now. So we reload. But you know what, it's not gonna work. And I think this is because modern browsers will by default to mute audio like this just for better. I dunno, security and user experience, it's a little annoying in this case, but you know, it's probably a good idea to mute it. So let's see if we can fix this. Let's switch back and continue.

So let's see if we can fix this. Let's switch back and continue. I don't hear any audio when the page loads and I assume, and imagine this is related to browsers automatically muting it by default. So can you find a way to trigger it perhaps with the press of the initial, uh, next button maybe that triggers the audio. And again, notice like I'm jumbling my words. It's okay. Uh, usually it will figure out what you wanna do there.

And again, notice like I'm jumbling my words. It's okay. Uh, usually it will figure out what you wanna do there. All right, so hopefully that fixes the problem. Let's give it a shot. So now when I refresh and hit the next button that will start and keep the audio going, let's go And then it resets, right? Really fun, right? So, uh, yeah, in this case we have to have a user interaction to trigger the audio. By default, the browsers are going to mute it because

to have a user interaction to trigger the audio. By default, the browsers are going to mute it because otherwise, you know, websites will just get incredibly annoying. Alright, so this is actually a really good example by the way of how having some existing programming knowledge is incredibly helpful even when you're vibe coding. Otherwise, if I have no experience, the best I can do is constantly lean on the AI and all I can do is say, Hey, didn't work.

the best I can do is constantly lean on the AI and all I can do is say, Hey, didn't work. Sorry, I don't hear anything didn't work. Try again. But because I have some experience, I know how the browsers act and I can say, hey, uh, I think this might be the reason why we're not hearing anything. So why don't we hook into a click event so that we have a user interaction to start the audio, right?

So why don't we hook into a click event so that we have a user interaction to start the audio, right? It's incredibly helpful even when you're vibe coding and you don't necessarily care about the code being written. Alright, so now I just wanna finish up with one more thing. I have a background forest image here and why don't we see how that looks as the backdrop for our slideshow? So let's go. This is looking very good. So finally, I have a BG dash forest

So let's go. This is looking very good. So finally, I have a BG dash forest JPG file within my public directory. And let's see how that looks as the background for the entire webpage. Now I'm thinking that image might be a little too prominent, so perhaps we should lower the background opacity to 25% or so. Next for the background image, maybe, uh, contain it or, or have it cover the entire page.

Next for the background image, maybe, uh, contain it or, or have it cover the entire page. I don't want any awkward borders where the image cuts off. Alright, maybe a tiny bit verbose, but it's fine. It should work. Alright, that's done. So let's take a look And yeah, I mean, we're not gonna win any design awards, but this looks good to me. So now we have our mood, we have our slideshow, we have our background music.

So now we have our mood, we have our slideshow, we have our background music. I think this is complete. Okay, so now here's what I would do in real life. I'm gonna push this up to a forge, uh, server I have that's gonna give me a free on forge.com URL. And I will then share that with my son as part of one of his presents. Remember there's, there's multiple clues that he has to open.

Remember there's, there's multiple clues that he has to open. So he opens a present and he sees a mysterious webpage, URL. And when he visits that on my phone, he has a slideshow that leads him to the next clue.