michaelkolesidis.com is an open-source, award-winning portfolio website template handcrafted with TypeScript, GSAP, and Sass that recreates the playful, interactive aesthetics of the early web.
What is michaelkolesidis.com?
michaelkolesidis.com is a single-page portfolio website built entirely from scratch using TypeScript, GSAP (GreenSock Animation Platform), and Sass, with no other libraries, frameworks, or templates. The only exceptions are a custom WebGL shader that generates a TV signal noise effect and a 3D rubber duck rendered with three.js through React Three Fiber. It is the live personal site of developer Michael Kolesidis and is published as a forkable template with a dedicated customization guide. As a static Vite project, it takes personal content and project data as input and produces a fully animated, interactive portfolio page as output.
Key Features
- Drag-and-drop windows — The site integrates a custom npm module called DOM Window Manager, created by the author, that handles window layering and drag-and-drop for moving on-screen windows.
- Click-to-cycle color palette — Colorful elements respond to clicks and cycle through a curated palette of seven colors: #ff90e8, #ffc900, #ff7051, #3ecfc1, #90a8ed, #ffffff, and #0a0a0a.
- Interactive 3D rubber duck — A three.js model, rendered via React Three Fiber, follows the mouse and switches to a cel-shaded, outlined style when clicked.
- WebGL TV noise effect — A custom WebGL shader creates a retro TV signal noise effect on the page.
- Microinteractions — Hovering, clicking, or dragging triggers animations, sounds, or state changes, turning the site into a playground.
- Minimal accessibility version — Because the colorful design can challenge users with disabilities, a minimal version is available via the footer link at /minimal.
- Forkable with customization guide — A detailed CUSTOMIZATION_GUIDE.md covers personalizing content and metadata, adding projects, styling and color customization, analytics, and deployment.
- Google Analytics integration — Analytics can be enabled by setting the VITE_GA_TRACKING_ID environment variable; if left unset, analytics stays disabled.
Who is it for?
- Front-end developers looking for a distinctive, code-based portfolio template they can fork, modify, and deploy without starting from scratch.
- Creative professionals such as designers, illustrators, and artists who want to present their work in a non-conventional, interactive format that stands out from standard gallery sites.
- Animation enthusiasts interested in a real-world example of GSAP and three.js (via React Three Fiber) combined in one single-page project.
What can you do with it?
- Developers: Fork the repository, follow the customization guide to replace content and metadata, then deploy the static site to platforms like Vercel or Netlify.
- Designers: Use the provided color palette and visual language as the foundation for a personal brand site, or strip out the supplied graphics and swap in their own.
- Learners: Study the source to see how TypeScript, Sass, GSAP, a WebGL shader, and React Three Fiber can work together inside a Vite build.
How does it work?
The site is a static Vite project. The core code is written in TypeScript with styles in Sass and animations powered by GSAP. A WebGL shader renders the TV noise effect, and a 3D duck is handled by three.js via React Three Fiber. A custom DOM Window Manager module provides the window dragging and layering behavior.
Pricing
The template is free and open-source. The code is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0), and the graphics, images, and cursors are licensed under Creative Commons Attribution-ShareAlike 4.0 International, except for the duck logo.
FAQ
Is michaelkolesidis.com free to use?
Yes. The template's code is released under AGPL-3.0, so you can freely fork and use it for your own portfolio. If you modify and deploy it publicly, AGPL-3.0 requires you to make your modified source available under the same license.
How do I customize the template?
A step-by-step CUSTOMIZATION_GUIDE.md is included in the repository. It explains how to personalize content and metadata, add your own projects and assets, customize styling and colors, set up analytics, and deploy the site.
Can I disable Google Analytics?
Yes. Analytics only activate when you set the VITE_GA_TRACKING_ID environment variable in a .env file or on your deployment platform. If you don't set an ID, analytics is completely disabled.
What license covers the graphics?
The graphics, images, and cursors are licensed under CC BY-SA 4.0, which requires attribution and share-alike. The rubber duck logo is an exception to this license.
Who created this template?
The template was created by Michael Kolesidis as his personal portfolio website. The customization guide was contributed by Alexis Fiolleau (Potowai). The site has received awards from One Page Love, CSS Winner, and Best CSS.
