Every now and then I feel like changing this website and trying an idea that sounds fun. The previous version ended up being a Game Boy: a console with its light casing, green screen, D-pad, and buttons, where you could explore who I am, my career, and where to find me.
It was switched off when you arrived. You pressed POWER, the Sergi.io logo appeared, followed by my pixel art avatar and finally the main menu. Meanwhile, a side display unfolded to show the blog posts.
I really liked that idea. Visiting my page, turning on a console, and spending a little time trying its buttons. It was a way to turn something as ordinary as looking through a profile into a small experience you could play with.
Better to see it in motion
I have kept this video so you can see what it was like. Screenshots show the design, but lose quite a lot of the fun of the startup, animations, and fold-out display.
The Sergi.io console in action: startup, navigation, and the fold-out display with the blog posts. Open the video.
Why I chose a console
Video games and computers have been part of my life from the beginning. I have always been fascinated by being able to write code and make something react on a screen. You press a button, a character appears, a menu changes, and suddenly what you have built seems to have a little life of its own.
A console fitted all of that quite well. It also felt like a fun way to say something about me before anyone even read the content. My career was inside the menus, my links were there too, and exploring them felt a little like exploring a game.
Besides, it was my personal website. There was no business objective or conversion to optimise. I could try it simply because I wanted to. As with many of my side projects, enjoying the process was already a good enough reason.
The retro look helped everything fit together: the green screen, pixel lettering, avatar, and sounds. The animations followed what you would expect from that object: turn it on, watch the content appear, and put it away when you switched it off.
Vibecoding with GPT 5.6 Terra / Sol
To build it, I used GPT 5.6 Terra / Sol through vibecoding. I described what I wanted, the models generated the code, and I tried it in the browser. Based on what I saw, I kept asking for changes and adjusting the next version.
The initial idea was simple, but then came all the little decisions. What should happen when it powers on? How does the avatar appear? Where do I put the posts? How do I return to the menu? Then there were the proportions of the casing, the size of the lettering, and how long a transition should last before it became tedious.
What I enjoyed most was being able to try those things directly. Having an initial version in front of you helps much more than continuing to imagine how it might look. You notice that the screen is too small, that some text is hard to read, or that an animation does not quite work, change something, and try again.
I chose to work this way because I wanted to experiment with an interface that involved quite a lot of visual and interaction work. AI let me move forward and try variations without spending as much time writing every change by hand. I still had to decide whether I liked the result, whether it made sense, and whether it was worth keeping. That cycle of trying, looking, and correcting was a large part of the project.
The buttons worked too
The console was built with Astro, HTML, CSS, and JavaScript. The D-pad moved between options; A opened them, B went back, SELECT changed the selection, and START returned home. You could also navigate with the keyboard or select options directly on the screen.
Startup had brief transitions and retro tones, and the avatar appeared at a larger size before entering the menu. The blog was on an OLED expansion display connected by a mechanical arm. It unfolded during startup and retracted when you switched the console off. I found that detail especially fun.
There was also less visible work: allowing sounds to be muted, respecting reduced motion preferences, cancelling animations on power-off, and keeping the content available without JavaScript. However much I enjoyed playing with the design, it was still a website where someone needed to be able to read the posts or find a link.
Now there is a Tamagotchi 🥳
I have now removed the Game Boy and the website has a different design, with the content available immediately. But I still feel like leaving a small toy around here.
In its place, I have added SergiGotchi, a small Tamagotchi with an LLM based on Qwen 2.5. You can care for the pet and chat with it too. Another mix of video games, interfaces, and AI that I wanted to try. I love being able to make these things!
I wanted to keep the Game Boy in this post because I had a great time building it. The video preserves that moment of turning it on, trying its buttons, and seeing it respond, as well as what I could build with GPT 5.6 Terra / Sol from an idea I was excited about.
Sometimes that is all an experiment needs: learning something, trying an idea, and having a good time building it.
Thanks for reading, Hack the Planet!