ARTICLE
This one's going to be another 'straight to the point' type of thought about the why's of some of the interactions and elements in this portfolio website.
Every element was built with the intention of adding real value to the browsing experience. I didn’t want this site to feel like a collection of visual experiments stitched together for the sake of novelty. That kind of approach often compromises performance and doesn’t scale well in the long-term. This could lead to dissatisfaction and the potential need to rebuild the entire site from scratch, which I certainly do not want to do at least for now.
With that out of the way, here are the components and interactions I’m genuinely proud to have built and shipped for all of you to see.
Theme switch toggle
A theme toggle is not a new concept. It's something you probably encounter on hundreds of websites. It gives the site a fresh new look, maybe help change the mood as well.
I went with the most basic option: a light theme and a dark theme. This was a crucial element for my website. Fancy names aside, the site uses varying shades of black and white - perfect for the minimal aesthetic I was aiming for. I wanted users to be able to switch between light and dark themes at any point, without hunting for settings or relying solely on system preferences.
There were several considerations regarding its placement. I thought about placing it in one of the bottom corners, but then that would interfere with a really cool element that I'll talk about later on in this blog. Then I thought maybe near the navigation menus? But if I do that, it would look like a really weird component that looks completely different from the menu items. Besides, in mobile breakpoint, users will have to go through the menu button to change the theme. That would have been a 2-step process that would undermine ease of use.
I wanted users to view the page according to their preference right from the first glance. So, I decided to place the toggle near my logo. The toggle is always accessible, subtle and consistent across pages. It also subtly reads like a period after the logo — a small visual detail I really liked.
Time component
Have you ever felt anxious waiting for a reply to an important message? Maybe it's something urgent, yet you have no idea on whether the other person has read the message. This time component shows my current local time, and while it’s a small detail, it adds a meaningful context.
For anyone visiting the site and they want to connect or collaborate, this subtly communicates availability. People can check whether it's a good time to reach out? Or are we even in a similar time zone? Instead of stating this explicitly, this component communicates the idea of connecting with people passively—adding personality without interrupting the experience.
Continuous infinite vertical scroll
This interaction was added after the site was completed, as part of an experiment page. You could say, it was the first 'major update' to the site. My initial goal was to display images and videos of the interaction. However, I faced a few challenges: too many images and videos could impact performance, while too few would make the page appear empty. Well, how can I design this page then?
Then I remembered there were few sites that showcased their projects in a similar infinitely scrollable canvas where projects would repeat after a cycle. This was my Eureka moment! It could address both of the challenges without me doing anything crazy. This infinitely scrolling interaction allows the page to feel alive and fun.
All of this without sacrificing speed or smoothness since this component simple duplicates the original media files visually.
Preventing over-scroll behavior
Infinite scroll works best when the layout stays stable. On mobile and tablet, browser UI elements like the address bar can expand or collapse during scroll, causing layout shifts. Additionally, the infinite vertical scroll interaction I implemented allows users to override the auto-scroll and manually scroll up or down.
I intentionally disabled over-scroll behavior. This does disable pull-to-refresh on mobile, but it was a conscious trade-off. But now due to this function, there is no more conflict between the infinitely scrollable interaction and the browser trying to scroll down for the default refresh function. This keeps the experience focused, predictable and visually consistent which is especially important for interaction-driven sections where layout movement can feel distracting or broken.
Gyro-based physics particle interaction
This component exists purely for play and engagement. Placed after the footer, it rewards users who scroll a bit further. Think of it as my way of saying, "Hey! Thanks for checking out my website and making it all the way down to the end of the page." This was my first time using a device’s built-in gyroscope for a web interaction to allow users to interact with an element. Not only that, but this interaction adapts to the user's preferred permissions so that they are always at ease.
If you are on desktop or any device with a keyboard and mouse, hover-based interaction will take over and you can use the mouse cursor to play around. If you are on a touch device, you will have two options depending on your preference.
If you allow access to your device gyroscope sensor, then motion and gyro-based interaction will take over. You can tilt your device and see the particles move! If you don't allow the access, I haven't forgotten about you. Users will get a tap based interaction. So, just tap anywhere on the component and see the particles jump randomly!
There’s also a small calibration trick built into the gyroscope interaction. I know not everyone has a same way of holding their device and that could affect the gyro interaction. So, if you keep your device still for a couple of seconds, that tilt state will be your default state and any movement you make will be calculated from that default state. It's honestly amazing! Try holding your device still for a moment and see it in action.
The result is a unique experience on every device. No two interactions feel the same, and it leaves users with a sense of curiosity and exploration without interfering with core navigation or content.
Wrapping it up
Every interaction on this site was built keeping every user in mind no matter what device they are using. This post was about showing why I build things the way I do without taking away the experience from the users. Some solve usability problems, others add context and a few exist simply to create moments of joy.
Together, they reflect how I think about design not as decoration, but as a series of thoughtful decisions that shape how people experience a product.