Contact me
Case studies Real project, live

This website, a demo in production

A personal website built like a product: particle portrait, working demos, pages for each profile, live.

For
Founders and startups, SMEs and operations, Business teams, Agencies and firms
Service
Build + AI
Hover over or tap a block to see its role in the system.

01Problem

A Product Engineer who introduces himself with an online CV proves nothing.

The site had to show the ability to design, build and ship, and speak to each decision-maker about their own problem.

02Context

Users
Founders, operations managers, product and tech teams, agencies.
Current process
A positioning and a target audience defined in two strategy documents.
Constraints
Fast on mobile, keyboard accessible, respects "reduce motion", no server dependency.
Tools in place
  • Vite
  • Three.js
  • GSAP
  • Lenis

03Solution

A static multi-page site built with Vite. On the home page, the real photo breaks apart into WebGL particles as you scroll, then becomes a production flow, a starfield and a planet.

The demos genuinely run in the browser, and the messaging is split by decision-maker profile.

Why this approach. Prove rather than claim: every promise the site makes is demonstrated by the site itself.

04Architecture

Infrastructure

  • Vite Multi-page build, shared HTML includes, code split per page.

Interface

  • Static HTML Pages generated in advance: fast, indexable, no server.

AI

  • Three.js Portrait rebuilt from tens of thousands of particles, with GLSL shaders written for the purpose.

Automation

  • GSAP + Lenis Smooth scrolling, pinned sections, reveals that follow the pace of reading.

Data

  • Demos Agent, workflow, portal and dashboard that work with sample data.

Output

  • Hosting Static files that can be deployed on Vercel, Hostinger, OVH or a VPS.

05Features

  • A photo that dissolves into particlesThe same noise drives the photo and the particles: they break away exactly where the photo disappears.
  • On-device cut-outThe photo was cut out locally with the Vision framework, with no online service.
  • Four working demosNot screenshots: real components you can use.
  • Pages for each profileFounders, SMEs, business teams, agencies: one message per problem.
  • Keyboard quick menu⌘K or Ctrl K to go anywhere.
  • AccessibilityKeyboard navigation, checked contrast, reduced motion on request.
  • Script-generated identityVectorised logo, favicons and share image produced by code.

06Result

  • Be understood by a decision-maker in under ten seconds.
  • Show rather than describe.

How it is measured

  • Qualified contact requests
  • Pages viewed by profile
  • Time spent on case studies

07What I did

  1. Positioning and messaging
  2. Art direction
  3. Development
  4. 3D and shaders
  5. Motion design
  6. Launch
Next case study WBF Wine Business Fashion, a prestige website in seven languages

A system like this one, for your business?

Contact me All case studies