test

Marco Zaninelli

Project type:
Website
Year:
2025
Client:
Marco Zaninelli
Libraries:
  • React
  • Next JS
  • Tailwind CSS
  • Sanity Studio
Design:
Figma
Code:
Git Hub

Welcome to my playground.
This is the website I built for myself. The goal is to showcase the projects I’ve worked on and, more broadly, to share some of what I do – including photography.

The site is built with Next.js and Sanity Studio: I chose this stack because it gives me full creative freedom for the visual design, strong SEO optimization, and the ability to easily update content via Sanity without touching the code. My main focus was on accessibility and mobile adaptability rather than pure SEO. I also added subtle animations to make the experience more dynamic, even though – as a photographer – I personally love static compositions.

The site is composed of three main pages and a project template used for individual works:

Website homepage just with text and MZ logo in the background.

Homepage

For this page, I wanted to break away from the usual homepage layouts and initially removed the navigation menu (which I later reintroduced to maintain familiarity and accessibility). I decided to use only text to present myself, keeping everything minimal. Links to other pages are embedded within the text and underlined to remain clear and accessible.

Projects webpage with grid of projects on the right side and thumbnail image on the left.

Portfolio page

This page lists my work and personal projects, mainly focused on web development but also product design – and perhaps photography in the future. I designed an interactive grid: projects are listed, and when selected, their images appear to the side, offering a quick preview. Adapting this to mobile was a challenge since there’s no “hover” function like on desktop, so I introduced a scroll-and-tap interaction to make navigation smooth.

Post web page with thumbnail image on top and title underneath, left sidebar with metadata and content on the right side of it.

Individual Project Page

Each project page is generated automatically with data pulled directly from Sanity Studio. The sidebar highlights key metadata: technologies used, links to the code, and initial design drafts. The project description keeps a colloquial and personal tone rather than a purely technical one, while still prioritizing accessibility.

invalid

Gallery

This page is still a work in progress. The idea is to break away from traditional grid-style galleries and create something more creative and original.