A portfolio that changes colour for every project

My previous portfolio was a light, editorial site: italic serif type on cream. For the redesign I wanted the projects to lead, each one on its own terms, and the site to stay easy to update when a new project ships. It had to feel like a piece of work in itself, because agencies judge a front-end developer by the front end they can see.

Industry: Web design · Services: UI/UX design, art direction, motion, custom WordPress theme · Tools: WordPress, GSAP (SplitText, ScrambleText), Lenis, Anybody and Familjen Grotesk

Vertical scroll moves a horizontal track of 13 panels: the hero, seven projects, the archive, services, reviews, about and contact. A counter and a progress line show where you are. Each project preview is a real page in a small frame, and a custom "Scroll" cursor lets you scroll inside it. GSAP drives the motion and Lenis smooths the scroll. On phones the panels stack vertically.

Every project has its own accent colour. When its panel arrives, the whole site takes it on: logo, navigation, counter, frame border, cursor, and a light tint of the background. The project title widens from condensed to full width through Anybody's variable width axis. The case-study page keeps the same colour, so each project reads as its own space inside one system.

The theme is custom, with no page builder. Each project is a WordPress post with its own fields (role, year, stack, accent) and its own case-study page. The home panels and the All projects archive are built from those posts, so adding a project means adding a post, not editing layouts.

The site loads fast despite the motion. PageSpeed Insights on 9 November 2026 gave Performance 95 on mobile and 96 on desktop, Accessibility 97 and Best Practices 100. The work now leads: the first scroll after my name is a project.