My award-winning playground / portfolio website
Welcome to my interactive portfolio website: a playful, modern homage to the early web. Discover projects, animations, and microinteractions, all crafted from scratch.
💡 Want to fork this and make it your own? Check the Customization Guide.
🛠️ Technologies Used
The website was handcrafted from scratch using TypeScript, GSAP, and Sass, with no other libraries, frameworks, or templates.
Other Technologies
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.
💡 Concept
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.
Minimal Version
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 michaelkolesidis.com/minimal.
🎨 Customization & Forking
Want to use this project as a base for your own portfolio?
A detailed step-by-step guide is available here:
👉 Portfolio Customization Guide
It covers:
- Personalizing content and metadata
- Adding your own projects and assets
- Styling and color customization
- Analytics, deployment, and license notes
Please make sure to read the license section and keep all AGPL-3.0 obligations in mind when forking or deploying.
🏆 Awards
★ DESIGN AWARD
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.
★ STAR AWARD
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.
★ SITE OF THE DAY
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.
📦 Dependencies
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.
📈 Analytics Notice
⚠️ This project now uses Google Analytics via the VITE_GA_TRACKING_ID environment variable.
If you fork or deploy this project, please set your own ID in a .env file or your deployment platform (e.g., Vercel).
If you don’t, analytics will be disabled.
💻 Software used
Development
- Visual Studio Code
- Google Chrome
- Blender
- Adobe Illustrator
- Adobe Photoshop
- Inkscape
- Krita
- Ableton Live
- Audacity
- GNOME Screenshot
- KDE Spectacle
- Windows Terminal
- GNOME Terminal
Testing
- Chromium
- Mozilla Firefox
- GNOME Web
- Microsoft Edge
- Safari
🎨 Design
Color Palette
| 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 |
📸 Screenshots
The duck with cel shading and an outline.
Cursors
🙏 Acknowledgements
A huge thanks to everyone who supported me, from friends and colleagues to anonymous internet users, providing valuable feedback throughout the development process.
Special thanks to Alexis Fiolleau (Potowai) for creating the Portfolio Customization Guide.
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!
💖 Support the Project
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:
📜 License
Copyright © 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.
🏳️⚧️✊🏿🏳️🌈🦆
评论