Portfolio
The site you’re looking at: a SvelteKit portfolio and blog, with a purpose-built CMS and beams of light in Three.js that give depth to scrolling.
- Role
- Design and development
- Year
- 2026
- Stack
- SvelteKit
- TypeScript
- Three.js
- GLSL
- Sass
- Vite
- Node.js
- PostgreSQL
- Prisma
- Better Auth
- Zod
- Docker
- Playwright
The idea
A redesign of my personal site with an editorial, restrained feel: light typography, a single accent colour and plenty of space. No calls to action: the site shows what I do, and the contact details wait at the bottom for whoever is looking for them.
Depth with Three.js
Behind the content there are volumetric beams of light at different depths, with streaks and a flicker like sunlight through leaves, and dust that takes on the colour of the beam it drifts through. As you scroll, the camera orbits the beams while descending, the focus shifts and each section brings its own beams forward: warm, cool or ivory. Out-of-focus motes turn into bokeh. The scene starts only once the browser is idle and a real GPU is available, caps the pixel ratio and settles on a still frame when reduced motion is on.
Architecture
SvelteKit with Svelte 5 and TypeScript on Node, in Italian and English with dedicated URLs linked by hreflang. Content lives in PostgreSQL through Prisma; article Markdown becomes HTML on save, code highlighting included, so pages only read ready-made HTML. A scheduled article goes out on its own at the chosen time: visibility is decided on every read, with no scheduled jobs.
A purpose-built CMS
The whole site is managed from an admin area written from scratch. The article editor has a side-by-side live preview, an SEO panel that shows the Google result and flags long titles or images without alt text, version history and a private preview link to share a draft. Uploaded images are resized and converted to AVIF and WebP, without metadata such as GPS location. Deleted items stay in a trash for 30 days, Ctrl+K searches everywhere and comments can be moderated from the keyboard, with push notifications sent by the server itself.
Performance
Pages are rendered by the server in a few milliseconds and travel compressed, with their styles already in the HTML. The technology logos are a single cached SVG sprite instead of hundreds of paths repeated on every page: the home page HTML, styles included, went from over 170 to about 35 KB. The portrait and uploaded images come in AVIF and WebP at every size, and the production image holds only the files the server actually uses.
Security and privacy
Sign-in with two-factor verification, a lock after failed attempts and a list of signed-in devices. A Content Security Policy with a per-request nonce and no third-party resources. Visitors get no cookies, so no banner is needed; comments use anti-spam without external CAPTCHAs and keep only a hash of the IP address, deleted after 30 days. A test tries every route of the restricted area without signing in, future ones included.
Quality and delivery
Oxlint, Prettier and svelte-check with warnings as errors. More than seventy Playwright end-to-end tests: five viewports, keyboard, both languages, reduced motion, the no-JavaScript page and automated accessibility checks on every page, public and restricted. In CI the same tests also run against the production Docker image; deployment to the VPS is automatic, with nightly backups of the database and images.