Journey so far

The theme

The first home page. Warm chart paper, a navy serif headline and copper italics, laid out like a printed page.

CSS keyframes and a small IntersectionObserver

Animation

• Slow grid drift behind the hero
• Dots orbiting the portrait ring
• Skill bars that grow into place
• Timeline entries that fade up on scroll

Colour scheme

• Paper#f4f0e8
• Ocean#0e3a5a
• Wave#1a7da8
• Foam#c8e8f5
• Copper#c47c2f
• Rust#d65c3a
• Ink#0b0f14

The theme

The same colours, taken below deck. The hero turned to ink with blue and copper glows, and the page gained real motion.

GSAP 3.12 with ScrollTrigger

Animation

• Hero text that rises in, line by line
• Blue and copper glows drifting behind the grid
• Skill bars and the career line filling as you scroll
• Top bar that shrinks into a floating pill

Colour scheme

• Ink#0b0f14
• Ocean#0e3a5a
• Wave#1a7da8
• Foam#c8e8f5
• Copper#c47c2f
• Paper#f4f0e8
• Muted#5a6470

The theme

A navigator's chart. The portrait sits in a compass, contour lines fill the sea, and a dotted course links each port of Hunter's career.

Anime.js 4.5 with jQuery

Animation

• Headline words that slide up into place
• A course line that draws itself through each career port
• Compass bezel that turns as you scroll
• A paper boat that sails the course and rocks on the wave

Colour scheme

• Ink#0b0f14
• Ocean#0e3a5a
• Wave#1a7da8
• Foam#c8e8f5
• Copper#c47c2f
• Copper ink#9b5e22
• Paper#f4f0e8

The theme

The current home page. A bold cartoon sea map where every service, project and port of call is an island to sail to.

Three.js and GSAP

Animation

• A 3D sea with ships, gulls, clouds and shore foam
• Camera that glides to each island you open
• Day to dusk lighting, with lamps that glow at night
• Passing storms and a sea serpent now and then

Colour scheme

• Sea#0f5fb4
• Yellow#ffd23f
• Orange#ff7a2f
• Pin#ff5a5a
• Outline#0d1f3c
• Foam#c8e8f5
• Paper#eef7fc