Portfolio website2026Live

A site with two brains.

sararuffini.com is my main site. I edit video for a living, so the homepage had to move before anyone read a word. This page is me looking at it from the other side: what I wanted it to feel like, and what I had to build to get there.

ScopeConcept, art direction, copy, motion, frontend, CMS, deployment.

I've been editing since I was 13. A homepage is just another cut. You get about three seconds before someone scrolls.

sararuffini.com
The homepage of sararuffini.com: 'I talk fast, I edit faster' above the showreel
Side quest / 001my other brain lives hereweb design, apps, experiments

Claim, then proof.

The homepage starts like a good edit. Two lines, I talk fast and I edit faster, and right under them my showreel. Nobody has to trust the words, the video is already playing. The About page can wait.

I do talk fast. Ask anyone who has met me. If the site felt slow it would be lying about me.

Scene 02 · The stitch

Not a grid. A route.

My featured work is eight polaroids sewn onto a curve. A playhead rides it while you scroll sideways, the cards swell when it passes them, the labels tilt, a few doodles spin in the background. Grab the playhead if you want to drive.

Urban Chronicles01Website design02Retro Call!03Nonna's Kitchen04Call Me05Neon Nights06Biotech07Summer Heat08Featured projects · scroll or grab to explore →

Grids are for archives. I wanted my projects pinned on a wall, a bit crooked, with a thread running through them.

Scene 03 · Split screen

Half of me wanted it. The other half built it.

What I wanted

  • Heart, creativity, storytelling. Three words, three colours, one rail you can drag.
  • Stickers, cut paper, thick borders, hard shadows.
  • One loud colour per section, never three.
  • A hand drawn scribble as the signature. It is always the last thing to appear.

What I built

  • A CMS that lives in git. I can edit every word from /admin, no database, nothing to pay each month.
  • An image pipeline that turns each upload into three WebP sizes.
  • Presets, so a new project page starts from one that already works.
  • My old hand written HTML pages wrapped in Next.js. I threw nothing away.
Text remixthe site’s rail, replayed

A collection of work made with heart, creativity and storytelling.

I'm equal parts creative and nerdy about tech. I get genuinely excited when something breaks and I get to figure it out. Half of the CMS exists because of that.

Scene 04 · End credits
FrameworkNext.js 15React 19
MotionGSAPScrollSmootherScrollTriggerDraggableDrawSVGMotionPathSplitTextTextPlugin
ContentSveltia CMS, in gitsharp image pipelineTemplate presets
StylingTailwindInterSpace GroteskPermanent Marker
HostingVercelsararuffini.com
Concept, design, codeSara Ruffini

Nothing here costs money to keep online. That's a design decision too.

Fin

Everything in this Lab started as a side quest from this site.

The note on the homepage says it: my other brain lives here. PlayTribe, Squadar, 3Days. All of them began as things I wanted to try after building my own site.

Next: PlayTribe app