My award-winning playground / portfolio website

The website was handcrafted from scratch using TypeScript and Sass, with no libraries, frameworks, or templates.

I used a WebGL shader to make a TV signal noise effect, and for the 3D rubber duck I used three.js, a library and API to use 3D computer graphics in the browser using WebGL. I used it via React Three Fiber, a React renderer for three.js.

When did the web become so serious?

My website is a love letter to the early Internet, a tribute to the era of naïve web art, romantic digital amateurs, and the beautiful chaos of GeoCities. I first discovered the magical world of the World Wide Web in the ’90s, and this project is my attempt to bottle some of that pixelated magic. Its visual language borrows from street art, print-era layout experimentation, and the punchy, graphic attitude of ’90s MTV.

I call the resulting aesthetic frivobrutalism: a joyful clash of whimsy and rawness, where playful visuals meet the structural honesty of brutalist design.

Visitors can interact freely, and nearly every element on the site feels intentional and alive (I hope 😛). Some elements are draggable and dynamically stack when clicked, and colorful elements respond to interaction. Clicking them cycles through a curated palette, adding a touch of spontaneity. The rubber duck follows the mouse and switches to a cel-shaded, outlined style when clicked.

These aren’t just gimmicks. They’re carefully crafted microinteractions, where each hover, click, or drag triggers an animation, sound, or state change. The site becomes a playground, blurring the line between interface and artwork, inviting users to play, explore, and get lost. Just like we used to on the old web.

Due to the website’s colorful design and animations, it may be challenging for users with disabilities to navigate. To improve accessibility, I’ve also created a minimal version, available via the footer link, which points to https://michaelkolesidis.com/minimal/.

One Page Love

February 2023

Awarded by One Page Love, a One Page website design gallery showcasing the best Single Page websites, templates and resources.

CSS Winner

February 2023

Awarded by CSS Winner, a unique global platform awarding and showcasing the best websites and promoting innovative web designers, developers and agencies.

Best CSS

March 2023

Awarded by Best CSS, a web platform that discovers, recognizes and promotes the talent and effort of web designers, developers and agencies who create unique digital experiences that are useful, innovative, intuitive and beautiful.

In addition to the tools and technologies mentioned above, this project integrates a custom npm module I created, which handles window layering (bringing windows to the front on click) and drag-and-drop functionality for window movement.

• DOM Window Manager (created by me)

• Visual Studio Code
• Google Chrome
• Blender
• Adobe Illustrator
• Adobe Photoshop
• Inkscape
• Krita
• Ableton Live
• Audacity
• GNOME Screenshot
• KDE Spectacle
• Windows Terminal
• GNOME Terminal

• Chromium
• Mozilla Firefox
• GNOME Web
• Microsoft Edge
• Safari

The duck with cel shading and an outline.

A huge thanks to everyone who supported me, from friends and colleagues to anonymous internet users, providing valuable feedback throughout the development process.

Feel free to contact me for business inquiries, feedback, bug reports, or general comments.

If you use my code or my graphics in your projects, I’d love to hear about it! Feel free to email me — I'm always excited (and curious) to see how it's being used! Remember to use my code in accordance with the terms of the respective license!

Thank you for your interest in my project! If you'd like to go further and support my work, you can buy me a coffee:

Copyright (c) Michael Kolesidis
The code is licensed under the GNU Affero General Public License v3.0.

The graphics, images, and cursors, are licensed under the Creative Commons Attribution-ShareAlike 4.0 International, except for the duck logo.

🏳️‍⚧️✊🏿🏳️‍🌈