My own website, a development lab

Personal website · Nuxt lab

My own website, a development lab

My website had been frozen for fifteen years. I rebuilt it from scratch in Nuxt 4 as a lab: 3D scene, light and dark theme, animations, two languages, blog, AI assistant, automatic deploys, speed and security. What I can do, in a single project.

Tools used

  • Nuxt 4
  • Tailwind CSS v4
  • three.js
  • Nuxt Content
  • i18n
  • Claude API
  • Netlify

For fifteen years my website stayed as it was: an outdated design and abandoned content, because time always went to client projects. In the end I decided to start over and use the quiet moments to study and experiment. The result is a project I'm proud of: more than a portfolio site, it's a testing ground, where anyone who wants to see what I can do sees it working, without browsing a portfolio.

Architecture and technologies

A modern foundation: Nuxt 4, Tailwind and Markdown content

The site is built with Nuxt 4 and Tailwind CSS v4, with server-side rendering. Services, case studies and articles are Markdown files managed with Nuxt Content and validated by a schema, in Italian and English with localised routes. Sitemap, RSS feeds and blog pagination are generated automatically: adding content means writing a file, not touching code.

3D scene, light and dark theme, animations

The background is a WebGL network of nodes built with three.js, loaded client-side only. Each section of the page has its own pose, made of position, rotation and shape of the network, and the scene moves from one to the next as you scroll. The theme toggle switches Tailwind colour tokens in a single place and the 3D scene adapts too, with a different blending mode on the light background. Reveal animations use a single observer and respect users who ask the system to reduce motion.

Technical SEO and AI assistant

Every page has titles, meta, canonical and hreflang, with JSON-LD structured data for the professional profile, breadcrumbs, FAQs and articles, and each page targets a single main search, so pages don't compete with each other. The chat answers through the Claude API, but only from a hand-written knowledge base: what isn't there, it doesn't make up. The key stays on the server and requests are rate-limited.

Automatic deploys, speed and security

Every change lives on a branch and becomes a pull request on GitHub; Netlify builds a preview to check it and publishes automatically on merge. The 3D scene and heavy libraries load only when needed, thumbnails use smaller images and fonts are optimised. Keys never reach the browser and the contact form has spam protection.

The outcome

A website frozen for fifteen years became a tool I actually keep up to date, and a portfolio you can try: the technologies and solutions I offer clients are here, at work.

My thanks to Marzia Bianchi for the information architecture: the way pages and content are organised grew out of our discussions.

// Contact

A project, a problem or just a question?

Agency, business or professional: choose how you'd rather talk to me. I reply within one working day, no strings attached.