Skip to content

Leonardo Berselli's Portfolio

2026

Obsess

Leonardo Berselli is a Machine Learning Engineer. His portfolio features a highly interactive, techy aesthetic inspired by the world of informatics.

The main site is built using Next.js, Tailwind, and Motion, with custom Three.js WebGL integrated as refined interactive details.

Design

Palette
(copied)
#0a0a0aRGB 10 10 10PMS Black 6 C
(copied)
#262626RGB 38 38 38PMS 426 C
(copied)
#737373RGB 115 115 115PMS 424 C
(copied)
#e5e5e5RGB 229 229 229PMS 663 C
(copied)
#f7f7f7RGB 247 247 247PMS 7436 C
Typefaces
AasansPP Neue Montreal
Light 300Regular 400Semibold 600
AamonoPP Neue Montreal Mono
Thin 100Book 400Bold 700
Components
Cool S***t

Code

Technologies

Next.js (opens in new tab) and Tailwind CSS (opens in new tab) drive the project’s performance and structure, while Motion (opens in new tab) and WebGL (opens in new tab) power the interactive visual experiences.

Mostly pnpm install and good intentions.

Architecture

Click or hover on a folder to explore the project structure.

Implementation
1
2
3
4
5
6
7
8
9
10
11
12
"use client";

export default function CodePlaceholder() {
  return (
    <div className="my-auto flex size-full flex-col items-center justify-center p-8 select-none">
      <p className="text-body font-normal text-neutral">
        Select a file to view its implementation.
      </p>
    </div>
  );
}

CodePlaceholder.tsx

Ship

Vercel provides the ideal hosting environment for Next.js portfolios. The source code resides on GitHub, utilizing GitHub Actions to manage the CI/CD pipeline and automate every deployment.

The portfolio seamlessly integrates with GitHub to manage projects. Each case study directly links back to its corresponding repository, allowing visitors to easily dive into the actual source code.

Say Hello

If you have a project in mind, feel free to reach out - I'd be glad to help bring your vision to life.