bydr.studio
Designing and building my own portfolio for bydr.studio, with a strong focus on accessibility, changing colour themes and 3D interactions.
The question
My old portfolio was outdated, both visually and technically, and didn’t meet the WCAG accessibility guidelines. I wanted a new platform that can grow, works for everyone and immediately shows what I can do as a designer and a developer.
My role
Since this is my own studio, I do everything myself: from the sitemap and the UX/UI design in Figma to the frontend development with animations.
Design & development
I started with the basics: accessibility. Using Coolors and Randoma11y, I put together twelve colour themes. With the Color Contrast Analyser I checked that they all meet WCAG AA, and some even AAA. The theme changes on every page load, or with a theme button.
In Figma I then built an extensive style guide, covering typography, icons, sounds and the different states of elements. Everything lives in custom properties, so the design translates one-to-one into CSS.
The result
The platform is still in active development and can be followed on GitHub. Right now I’m adding animations with GSAP, such as a custom cursor with stagger effects. I’m also following Bruno Simon’s course to build interactive 3D elements with WebGL and Three.js.
What I learned
Designing for yourself is often the hardest. That’s why I’m treating this project as a real assignment from day one, with detailed prototypes in Figma, WCAG checks and new techniques like GSAP and Three.js. It pushes me out of my comfort zone.