Portfolio as an OS #2 — the desktop icons

My personal site presents itself as an embryo of an operating system you can interact with. Each desktop icon opens a window: an embedded website (iframe), the terminal, the contact program, my App Store…

I created a list of structured data as an array of JSON objects. The properties: an ID, the icon's image source, the program title, the icon's background color, an attribute saying whether it's an embedded site or an internal program, the URL to embed if so, the window's content and its properties (told you, it's like an OS 😁).

That's a lot of properties just to display icons — let's focus on the ID, image, title and background color. It's from this array that I render the desktop icons, a list I can extend at any time in a single file. And behind it, a little more CSS coloring for the layout.

That's it for the desktop icon system. The next post will cover the remaining properties and their role in the window system. ✌🏾