Responses by Niccolò Miranda, interactive designer and developer.

Background: My main goal for my site has been to put together an informative, scalable and accessible portfolio over time while staying away from typical layout patterns. This site, Paper Portfolio, shows some of my featured work from the past years alongside a cool newspaper-style layout.

Design core: The idea that inspired the paper portfolio was from cinema—specifically, Harry Potter. I’ve always found the Daily Prophet from Harry Potter and the Daily Bugle from Spider-Man fascinating. So I asked myself, “Why not make a portfolio out of it?” From the beginning, I collected ideas in a Figma visual mood board to gather all the shots of those newspapers, keeping in mind four key values: global components, newspaper prompts, ripped paper animations and an informative portfolio.

Favorite details: One of the global components I conceptualized at the beginning, which I personally love, is the newspaper-style sidebars. These are primarily placed at the top and bottom to have the project links always suggested in the viewport. Moreover, the main goal was to make them change dynamically based on the page or random projects.

Challenges: The bones of the website came from a deep research on typical newspaper blocks, specifically from the Guardian’s terminology. Being a complex type of structure for a website, I had to iterate the design several times. This was my greatest challenge as I had to think about how to structure the HTML and CSS to have a scalable site on different breakpoints.

Navigation structure: Given the particularity and complexity of the design, I was aware I would lose wiggle room in the animation even before I began the project. Therefore, in order to keep the navigation straightforward, I came up with a torn paper menu effect that I built in WebGL, which enables users to land on the main pages easily.

Special navigational features: For the Work page, I wanted to create something special that could be accessible but consistent with the newspaper style. After several tests on a vertical orientation, I accidentally rotated the UI—and that’s how the bookshelf came about. I designed a book front-page template linked on the back-end project page to simulate the effect of a book being pulled off the shelf. To anchor the opened link block on the site when it’s triggered, we used GSAP.

Technology: As with most sites I develop, I used Webflow to keep the back end scalable over time. WebGL made the torn menu paper effect possible alongside GSAP for advanced animations and the Locomotive Scroll for smooth scrolling.