Saidl (Website)
Creating my own portfolio website to showcase my work. After developing my own brand identity, I started building the website using HTML, CSS, and JavaScript. Together with the brand identity, this is one of my biggest solo projects to date.
About the project
When I decided to create a portfolio website, one thing was very important to me: I didn’t want to use a website builder. I wanted to code the website myself, since the portfolio website itself is also part of my portfolio. Before I started programming, I first worked on the design. I already had a design from a few months earlier, but my design skills and coding abilities had improved significantly since then. Because of this, I decided to start over with a new design. Below, you can see a glimpse of the old design.
The new design
I wanted to create a completely new design, so I started by researching similar projects on Dribbble, CSS Design Awards, and Awwwards. After gathering plenty of inspiration, I created a simple paper prototype. I mainly used this to map out the overall layout and test whether people could easily navigate and maintain an overview of the website. I then moved on to Figma, where I designed the home, about, and project pages. For elements such as the footer, menus, and forms, I created multiple variations to see which options worked best within the overall design.
Executing the design
After the design was finished, I started programming the website. I wanted to create a highly interactive experience with lots of scroll-based and hover animations. For the scroll-based animations and a smooth-scroll plugin, I used GSAP, which made it relatively easy to add professional-looking animations. I also added a few Easter eggs. For example, try typing “invert4me” on your keyboard while the website is focused. On devices without a keyboard, you can find a form field and enter it there instead. The rest of the Easter eggs are yours to discover.
Challenges
One of the things I found most challenging was making the website responsive. I wanted users on mobile devices to have an experience that was just as good as those on larger screens. I achieved this by completely reworking certain layouts and removing less significant elements that added visual value but little else. I also paid close attention to performance. Since a portfolio website contains a lot of images and videos, I carefully compressed my media and optimized how it was loaded to keep the website fast and efficient.
