Portfolio: Portfolio website

PortfolioMy own portfolio, built around motion you can feel: the type swells near your cursor, pages change behind a coloured curtain and the work slides sideways as you scroll.

Overview

A portfolio should feel like the work it shows. This one is built around movement: the hero letters swell as the cursor passes, pages change behind a blue curtain, and the work glides sideways as you scroll.

It is built with React and Vite. Smooth scrolling comes from Lenis, and every other animation uses the browser's own Web Animations API, so there is no animation library to load.

The type

Two fonts, each with one job. Archivo has a width axis as well as weight, so a single font can go from narrow and heavy to wide and light. It is used only for the animated display type. Neue Montreal handles everything you read.

The bits that move

First load: Letters rise in, a counter runs from 000 to 100 and the blue logo box floods the screen before landing in the header. It plays once per visit, and a click or Esc speeds it up.
Page changes: Blue bars wipe up, the next page's name sets in huge type, and the new page rises in underneath.
Cursor: A dot with a trailing ring that grows into a labelled circle (View, Next, Visit) over anything you can open.
Hover preview: On the work and services lists, an image follows the cursor and tilts with its movement.
Up close: A pinned strip of frames slides sideways as you scroll, can be dragged with the mouse, and leans into the direction of travel.
Quick jump: Press Ctrl or ⌘ + K, or /, to jump to any page or project from the keyboard. On a project page the arrow keys browse to the next one.

On every screen

Every page is designed for phones as well as desktops: layouts reflow, the cursor effects switch off on touch screens, and videos keep their own proportions.

Accessibility

Motion respects the visitor's reduced-motion setting, and there is a Pause motion switch. There is a skip link, a keyboard-friendly menu, a quick-jump palette and clear focus states, and every video has play/pause and a seek slider.