Paul Warren
I built Paul Warren’s website, originally known as PW Associates. It brings together his business growth services, experience and ventures in a site with a strong visual character: bold blue, oversized typography and a softer palette of mint, pink and lilac.
My role was website development. I built the WordPress templates, custom content blocks and interactive features that carry the identity through the site, from the moving shapes behind the opening message to the service cards and scrolling layouts.
A playful opening, built with real physics
The hero needed to have some personality without competing with the message. I used Matter.js to give the background icons weight, movement and boundaries. The shapes are bodies in a small physics simulation, rendered on a canvas behind the heading, with mouse interaction built into the scene.
That is a different kind of work from a simple looping animation. The icons need somewhere to move, walls to contain them and a relationship with the size of the viewport. The headline remains ordinary page content above the canvas, keeping the main message separate from the decorative movement.
Starting with the visitor’s problem
The site gives visitors two ways into the content. They can explore a service directly, or start with a familiar business problem, such as a growth ceiling, an unclear strategy or too much reliance on the founder. Each topic has its own page, so the short labels on the homepage can lead into a fuller explanation.
I built these sections as part of the WordPress publishing system, with configurable headings, links and content. The visual treatment helps separate the topics while keeping the routes through the website consistent.
Giving the interactions their own structure
The service cards combine imagery, a short explanation and a clear next step. Elsewhere, the About page uses a stack of cards to introduce different parts of Paul’s experience as someone scrolls. I used GSAP and ScrollTrigger for that sequence, with separate layouts for desktop and smaller screens.
The card content is editable through ACF fields. Titles, descriptions, colours and rotations belong to the block’s settings, while the JavaScript handles their positioning and movement. Keeping those responsibilities apart makes the interaction easier to maintain as the content changes.
An editable foundation behind the visual detail
I built the site on a custom WordPress child theme, using Timber/Twig templates and ACF blocks. Shared components handle recurring details such as headings, buttons and video, while the individual blocks provide the different page layouts.
Alpine.js handles smaller pieces of interface state, alongside JavaScript modules for the more specific interactions. Tailwind CSS and Sass provide the styling, with assets compiled through Laravel Mix. The result brings together a distinctive public website and a structured set of publishing tools behind it.
Technologies
WordPress, PHP, ACF, Timber/Twig, JavaScript, Alpine.js, Matter.js, GSAP, ScrollTrigger, Tailwind CSS, Sass and Laravel Mix.