This portfolio is also a small UX case study, and it is heavily inspired by Koto's website. I admire the precision of their digital work and wanted to give myself the chance to recreate the kind of micro-interactions that make a page feel premium: the small delays, fixed states, scroll handoffs, cursor details, and moments where motion gives the page a sense of control.

On the surface this is a place to show projects, but much of the design work sits in the transitions: the way a visitor enters and exits a case study, the way embedded work behaves inside the page, and the points where an interaction can become confusing if it does not respect the user's momentum.

I wanted the page to feel editorial and immersive. That meant treating every motion decision as a usability decision first. If an interaction made the work feel more considered but also made the page harder to move through, it needed to be simplified, contained, or given a clearer handoff.

The scroll problem

One issue showed up in the Fasterp case study. The landing page preview sits inside an iframe, so visitors can scroll the live page inside the portfolio. That keeps the interaction honest, but it also creates two scroll contexts. When the iframe reaches the end, horizontal navigation still works from the left column or from the right edge, but that is a technical affordance, not an obvious one.

The problem is discoverability. A visitor who has just finished scrolling the embedded page is likely to keep interacting inside that frame, so the next move is unclear even though the portfolio can continue. The design needs a clearer handoff at the iframe boundary: something that preserves the live preview, then makes the next horizontal scroll feel available without asking the user to hunt for the correct area of the screen.

The iframe handoff

The fix became a combination of behavior and affordance. While the visitor is inside the iframe, the page listens to wheel and touch movement and moves the embedded preview manually. If a scroll gesture goes past the iframe's bottom, the extra movement is passed straight to the parent page instead of being lost. That removes the delayed feeling where the user has to scroll again before the case study starts moving.

At the end of the preview, the iframe is intentionally deactivated so scrolling over the same area behaves like scrolling the case study page. A darker overlay makes that state visible, with a simple instruction: scroll to continue. For users who still want to inspect the embedded page, a secondary Reactivate preview control gives the iframe focus back without turning the handoff into a trap.

The small down-arrow control solves a different moment: impatience. If someone understands the preview and wants to move on, they can jump the iframe to its end immediately. From there, the same completed-preview state takes over, so the page has one consistent exit behavior whether the user scrolls naturally or chooses to skip ahead.

Designing handoffs

The horizontal transition into the next project is meant to feel like a handoff, not a surprise. The user should understand that they have finished the current case study, then feel the next project enter as a continuation of the same journey. That required tuning the start point, the fixed state, the preview width, and the copy reveal so the transition had enough time to be understood.

This is the kind of UX detail that is easy to miss in a static review. It only becomes obvious when using the page at normal speed: scrolling, pausing, changing direction, and trying to recover from a point where the interface took control.