Context
Matteo Tirocchi is an art director. His work needed more than a grid of images: it needed a point of view. The brief was a portfolio that felt like a place you could move through — a cinematic home, a playable section, a visual archive, and bilingual IT/EN content.
The art direction and the content are Matteo's. I built the site around them: the front-end architecture, the motion layer, the content model, and the deployment.
The constraint
A portfolio that carries a lot of visual work has a predictable failure mode: it becomes a gallery template. The site had to keep the work loud without making the interface loud. It also had to stay navigable on a phone, where most of the traffic would land.
The hard part was not adding motion. It was deciding where motion earned its place.
What I built
- An architecture that can grow. Next.js App Router with a static export, a content model in Markdown, and a route structure that separates the portfolio, the play section, the creative archive, and the about page.
- A motion system, not a pile of effects. GSAP and Lenis for the cinematic home, a WebGL room sequence, and a set of transitions that stay out of the way once you start reading.
- A usable mobile version. A full-height menu, edge-to-edge image previews, and touch-friendly controls — the parts that usually break when a desktop-first portfolio is squeezed onto a phone.
- A deploy path. Static output on Cloudflare, with a build that can be published anywhere.
Result
The site is live at tirocchi.com. It shipped as a real client site with a non-standard interaction model, bilingual content, and a workflow Matteo can update without touching layout code.
What I would change
The cinematic layer is heavy. A WebGL room sequence and a full motion stack cost real milliseconds on a mid-range phone. If I rebuilt it, I would start with a performance budget before the motion design: lazy-load the 3D and motion bundle, ship a static poster for the first paint, and measure LCP per route instead of only at the end.
The lesson is not “less motion”. It is “motion with a budget”. That is the approach I would bring to a client project now.