An HTML prototype from Figma that lives on in a TYPO3 site

A German training centre was getting a new TYPO3 site, designed in Figma. The TYPO3 team needed each section working in the browser first, with styles and scripts they could take over. I built the prototype for them.

I made it from small PHP files, one per section, put together on a full page and on a page with every section filled with the real German text from the design. The layout is in Tailwind. I collected the design’s colours, colour schemes, headings and buttons for mobile and desktop in one prefixed SCSS class system, with nothing hard-coded.

The JavaScript is plain, one file for each section that needs it: text that animates on scroll, counting numbers, the gallery, testimonials and the mega menu. I refined the responsive layouts in several passes over the breakpoints, with breadcrumbs and the mega menu on every page. For similar sections I prototyped one configurable layout as an alternative to static copies, for the team to choose, and the rest stayed static files.

Another team did the TYPO3 integration. I supported them with a short video that shows which script drives a text animation and what to bring over. The live site uses the prototype’s class system and section names and loads two of its scripts in adapted form.