Three letters that already spelled something

My initials — o, l, d — spell "old". That felt like too good a detail to waste on a static logo. The idea was to make those three letters physically travel down the page as you scroll, landing and expanding into the full name: olle / lomberg / davegård.

The wordmark and the about section become one continuous thing. The animation isn't decorative — it's the connection between identity and introduction.

The collapse

As you begin scrolling, the wordmark at the top of the page starts contracting. The suffixes — "lle", "omberg", "avegård" — collapse letter by letter while the spaces between the initials close. The three anchor letters remain visible throughout, carrying the brand mark through the transition.

Once collapsed, "old" slides to a fixed position in the left column where it stays for the rest of the page. The layout shifts with it — the single-column view opens into a three-column grid as the scroll threshold is crossed.

The expansion

Further down the page, as the about section approaches, the three letters in the left column detach and fly to their target positions in the heading below — "o" becomes "olle", "l" becomes "lomberg", "d" becomes "davegård". The movement is built on the FLIP technique — measuring each letter's start and end position in the DOM, then interpolating between them as scroll progresses rather than relying on CSS transitions.

Each letter follows a staggered path with spring easing, switching its text content mid-flight at 65% through the scroll. The sidebar wordmark fades out as the clones move. On landing, the about heading fades in and the clones disappear. The two animations — collapse and expansion — form a single arc across the full page.

Knowing what you want before knowing how to build it

I used Claude and Perplexity as collaborators throughout the build — describing the behaviour I wanted in plain language and working through the technical approach iteratively. The creative decisions were mine: the concept, the timing, the feel. The AI helped me move faster through the parts where implementation detail would otherwise have slowed the work down.

All the JavaScript is vanilla — no animation libraries, no frameworks. The scroll-scrubbing, the DOM cloning, the rect measurements, the spring physics — written directly, so I understand exactly what each piece does and can adjust it when something doesn't feel right.

Using AI as a development partner changed how I think about building interactions. Lead with the design intention, use the tool to move faster through the technical parts, and stay in control of every decision that actually matters.

A portfolio that demonstrates what it describes

The goal was a site that showed an understanding of motion, layout, and front-end behaviour — not by listing those skills, but by being an example of them. Building it without frameworks meant every interaction had to be reasoned through rather than configured, which is a more honest way of demonstrating that the understanding is actually there.