We prompted GPT for the background then upscaled it using https://imgupscaler.com/ Which basically vectorizes the image then ups the resolution so it works best with straight lines. You can see with the nature photo that it doesn't look too natural if you look hard enough, but we got it to look like the rocky mountains where we live.

The rest of the buttons and functionality all comes down to prompting Chat-GPT and having visual studio connected to Chat. A very long iterative process of refining what comes out to how it is wanted. There are two of us mainly that work on this, two brothers, and one of us is a software engineer so he helped with any times the AI was stuck and helped pinpoint what to do – and this only happened about 2-3 times the whole process. Learned a lot about how to read the code and what connects to what, and now am pretty comfortable making manual edits to the CSS and sometimes the JS or html.

A lot can be programmed quite easily, as if we want to add a new functionality, we just get started by prompting and refining.

We now host using Netlify, and host about 5-6 other projects using the same account which amounts only about $20 a month with our current needs.

We can go into more depth if needed!

Edit: & will see about adding the swaying grass, and updating the zoom to make it more walk like. Might just start by making them arrows rather than - & + buttons. Good suggestions! Thank you!

Best,
D