To kick off this blog, I want to share my experience developing KuroiOS in a series of posts this post, discussing the challenges I faced, how I tackled them, and everything I learned in the process
How did the idea come about?
Creating a portfolio showcasing my skills and work is essential nowadays. Many years ago, I built and published a simple portfolio made with WordPress containing some screenshots of my work, which I eventually lost because I didn’t access it for a long time (I used a free hosting and domain and didn’t back it up :cry:). In any case, I wasn’t happy with a simple portfolio idea anymore and went years without sharing a new one
After several years working in the field, during a moment of career reflection, I realized a simple portfolio wasn’t enough. The web today offers an infinite range of possibilities for interaction, and that’s the kind of thing that makes my eyes shine. I’ve seen so many amazing and immersive creations out there, and I wanted something like that to represent myself too. My intention wasn’t just to showcase work I did for others, but to bring something that represented my essence, the things I really love and know how to build. It wasn’t meant to be an online resume, but rather a truly personal corner of mine on the internet.
The idea began to take shape when a colleague at work (thanks, Fernando!) introduced me to poolsuite.net (Poolside.fm at the time). This site became one of my favorite places on the internet, bringing nostalgia, good music, and, most importantly, a simulation of a simple operating system within a web page, which I thought was the most creative thing in the world.
And then I thought: What if I could also simulate an operating system to showcase my creations?
The possibilities were endless, and I could show whatever I wanted through an interesting and unique experience.
That’s how KuroiOS began to take shape!
Why Svelte?
That same colleague introduced me to Svelte as a new way to solve some problems at the company where I was working at the time. It was love at first sight! Svelte is an extremely easy-to-understand and use Javascript “framework”. I have more experience with Angular and have messed with Vue a bit, and it seems to me that Svelte combined the best of all worlds. I found it excellent for use in small to medium-sized projects. I didn’t need to think too much to choose to use it in my project, it would already be a great way to get used to using it and learn more, seeing that it has gained a lot of attention in recent years and maybe it would start to be used on a larger scale in the market.
Starting the development
Deciding on the layout and design was a somewhat time-consuming task. Initially, I wanted something very retro, like the Windows98 style, which still has a charm for me, but I didn’t think it represented my style enough. Still in the retro vibe, I thought of creating something more focused on pixel art, but I found some limitations displaying it on the screen on the style I wanted to achieve, so I crossed that idea out too.
Later on, I saw some rounded designs with solid shadows (a style that has become very popular today) and thought it would work well with a solid color theme. Thus, I found the balance I wanted: a slight feeling of retro style, but at the same time it’s modern and pleasant.
At first, the base structure would be very similar to Windows, with the taskbar at the bottom, a Start menu, icons on the desktop… but it didn’t fit with the demands I had in mind for the content. There wouldn’t be enough stuff to put in a Start menu, and I thought a taskbar would add too much complexity at the beginning of the project. So, with a bit of research, i found Linux Ubuntu which features a bar at the top with the date, time and some action buttons. It was simple, elegant and perfect for what I needed.
The design and structure was defined, which was used until the end of the project.