Published: 25 February 2026 · 5 min read · Author: Shoaib Sarwar
When I started this portfolio, I knew I didn't want another standard vertical layout. The idea was to present each part of my experience like a slide in a story, while still keeping the site fast and simple. Horizontal scrolling turned out to be a good fit – but only if it stayed intuitive on both desktop and mobile.
The core trick is to keep the browser's normal vertical scroll, then map that to a horizontal translation of the sections container. This keeps the scrollbar behaviour users expect while making the content move sideways. In my case a wrapper tracks the total scroll height and a `requestAnimationFrame` loop animates the `translate3d` of the horizontal track.
Each section is sized to almost fill the viewport (`98–99vh`) and uses a glassmorphism style so the moving background is still visible. The scale and opacity are adjusted based on how close a section is to the centre, which creates the focus effect you see as you scroll.
Horizontal layouts often feel wrong on phones if you rely on horizontal swipe only. Here the same vertical scroll mapping is used on touch, with some extra logic to distinguish between vertical swipes inside grids and true horizontal gestures. That way content like project cards can still scroll naturally.
The walker character, crystal background and soft scaling are all fun details, but they only work if the frame rate stays smooth. I kept everything in a single animation loop, avoided expensive layout thrashing and used GPU-friendly transforms where possible.
A horizontal portfolio is definitely more work than a simple column layout, but it matches how I want to present my work: one focused section at a time, with small playful details in the background.
Veröffentlicht: 25. Februar 2026 · 5 Min. Lesezeit · Autor: Shoaib Sarwar
Als ich dieses Portfolio geplant habe, war klar: Es sollte nicht noch ein Standard‑Layout mit vertikalem Scrollen werden. Die Idee war, jede Station meiner Erfahrung wie eine Folie in einer Geschichte zu zeigen – und trotzdem Performance und Einfachheit zu behalten. Ein horizontales Scroll‑Layout passte dazu gut, aber nur, wenn es sich auf Desktop und Mobile intuitiv anfühlt.
Der Kern‑Trick ist, das normale vertikale Scrollen des Browsers beizubehalten und dieses in eine horizontale Translation des Abschnitt‑Containers umzusetzen. So bleibt das Scroll‑Verhalten vertraut, während sich die Inhalte seitlich bewegen. In meinem Fall trackt ein Wrapper die gesamte Scroll‑Höhe und eine `requestAnimationFrame`‑Schleife animiert das `translate3d` der horizontalen Spur.
Jeder Abschnitt füllt fast den gesamten Viewport (`98–99vh`) und nutzt einen Glassmorphism‑Stil, damit der bewegte Hintergrund sichtbar bleibt. Skalierung und Deckkraft hängen davon ab, wie nah ein Abschnitt an der Mitte ist – so entsteht der Fokus‑Effekt beim Scrollen.
Horizontale Layouts fühlen sich auf dem Handy schnell falsch an, wenn sie nur auf horizontale Wischgesten setzen. Hier wird dieselbe vertikale Scroll‑Abbildung auch auf Touch verwendet, ergänzt um Logik, die vertikale Gesten in Grids von echten horizontalen Bewegungen unterscheidet. So können Inhalte wie Projekt‑Karten weiterhin natürlich gescrollt werden.
Die Walker‑Figur, der Kristall‑Hintergrund und die sanfte Skalierung sind nette Details – funktionieren aber nur, wenn die Framerate stabil bleibt. Ich habe alles in einer Animations‑Schleife gehalten, teures Layout‑Thrashing vermieden und GPU‑freundliche Transforms eingesetzt, wo es möglich war.
Ein horizontales Portfolio ist definitiv mehr Aufwand als ein einfaches Spalten‑Layout, passt aber besser dazu, wie ich meine Arbeit zeigen möchte: ein fokussierter Abschnitt nach dem anderen, mit kleinen spielerischen Details im Hintergrund.