This is my portfolio website / playground.
It is yet another love letter to the Internet of the old<, the era of naïve (web) art, the era of the romantic amateur, the era of Geocities. I first encountered the magical world of the world wide web in the 90's and I hope I have captured a glimpse of that time. My design is also influenced by print publication layouts and the bold graphics of 90s MTV.
I call this style frivobrutalism, placing emphasis on the blend of the playful frivolity of the design/experience with the brutalist aesthetic.
Visitors can move things around and customize the colors of all colorful elements: clicking on an element generates a new color, from the predefined color palette. The rubber duck responds to mouse movement.
Most of the elements are part of microinteractions and hovering over them or interacting with them in other ways triggers some animation (and in one case it also triggers sound).
The website is responsive for desktop and mobile.
Since the website is quite colorful and full of animations, it might be difficult for people with disabilities to navigate through it. That's why I decided to create a minimal version as well, to assist people with color blindness and/or other disabilities with their experience. The minimal version can be accessed from the website's footer, which points to https://michaelkolesidis.com/minimal/.
February 2023
Awarded by One Page Love, a One Page website design gallery showcasing the best Single Page websites, templates and resources.
February 2023
Awarded by CSS Winner, a unique global platform awarding and showcasing the best websites and promoting innovative web designers, developers and agencies.
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.
This project uses the following npm packages:
- Vite
- TypeScript
- Sass
- Howler.js
- DOM Window Manager (created by me)
The following library is imported via CDN:
- 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
| HEX | RGB |
|---|---|
| #ff90e8 | 255, 144, 232 |
| #ffc900 | 255, 201, 0 |
| #ff7051 | 255, 112, 81 |
| #3ecfc1 | 62, 207, 193 |
| #90a8ed | 144, 168, 237 |
| #ffffff | 255, 255, 255 |
| #0a0a0a | 10, 10, 10 |
Note: Note: The following screenshots are outdated and reflect older versions of the website:
Note: Note: The following screenshots are outdated and reflect older versions of the website:
For the minimal version of my website I tried to replicate the styling of my printed CV.
Note: Note: The following screenshots are outdated and reflect older versions of the website:
A huge thanks to everyone who supported me, from friends and colleagues to anonymous internet users, providing valuable feedback throughout the development process.
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
Licensed under the GNU Affero General Public License v3.0.