Florent Le Page
Florent drawn as an anime character, standing, relaxed

Personal site

This portfolio

A static site that opens with an anime-style animation of me, drawn from real motion capture.

In progress

15 drawings animated in code
2 languages
0 framework, cookie or third-party request

The site you are reading. The intro is real motion: a gesture taken from Carnegie Mellon University's motion capture database, redrawn as 15 frames with ChatGPT in an action anime style, then animated in code, with no video. The two paths, SAP Run and Web products, then read like manga chapters.

Stack: HTML, CSS, JavaScript, Node.js, ChatGPT for the drawings, Claude Code.

Portfolio home page: Florent drawn as an anime character, his two cats and サイバーサムライ

The intro: he grabs the loading window and throws it off screen

The intro

  • A gesture picked from real motion capture, matched frame by frame on a 3D mannequin.
  • 15 color drawings sharing one character sheet; the loading bar follows the real image loading.
  • Plays once per page load, can be skipped with the keyboard, stays still when the device asks for less motion.

The chapters

  • SAP Run: a night of production support in five panels, three drawings and two HTML screens.
  • Web products: one panel per project, sized by rank, with focus lines drawn in code.
  • Each panel is inked as it enters the screen; Japanese sound effects are stamped in.

Under the hood

  • HTML, CSS and JavaScript with no framework, generated by a Node script from the site's and the resume's content files, in French and English.
  • Drawings in AVIF with WebP fallback, other images in WebP; self-hosted fonts, subset to the characters in use.
  • The SAP content comes from the same file as the resume.