CREATIVE TECHNOLOGIST
& DESIGN SYSTEMS ARCHITECT

> Bridging High-Fidelity Design (Figma) and High-Performance Code (GSAP).
WHO_AM_I --human_mode

I SPEAK PIXEL
AND I SPEAK LOGIC.

I am a Designer who learned to code to protect the integrity of my designs.

I don't just hand off code; I build the internal tools (plugins, automations) that save agencies €50k/year in manual labor. My mission is to automate the boring stuff so your creative team can actually create.

As a Teacher at NEOLAND, I train designers to think in systems. I bridge the gap between the Creative Director's vision and the Ad Server's logic.

> UX_AUDIT.log

Design decisions that ship with purpose, not accident.

PROBLEM
Static design mockups
Touch targets 32px below WCAG AA
No responsive touch feedback
ANALYSIS
48×48px minimum for mobile
Spacing logic in Figma Variables
CSS Grid for perfect alignment
SOLUTION
Applied Design Tokens system
100% WCAG AA compliance
Device-agnostic responsive layout
PROBLEM
Colors inconsistent across states
No component library documentation
Figma to React mismatch
ANALYSIS
Built Figma Variables for all tokens
Exported to Tailwind config
Atomic design principles
SOLUTION
Single source of truth established
Bi-directional sync (Figma ↔ Code)
40% faster component creation
PROBLEM
CSS animations cause jank
45fps instead of 60fps
Scrollytelling feels sluggish
ANALYSIS
Switched to GSAP + GPU acceleration
ScrollTrigger for scroll sync
Will-change and transform optimization
SOLUTION
Consistent 60fps performance
Core Web Vitals passed
Micro-interactions feel native
EFFICIENCY_ESTIMATOR

Are you burning budget on manual versioning?

Agencies bleed profit in the "Versioning Phase." Use this calculator to see how much manual HTML/Design production is costing you per campaign vs. an Automated Pipeline.

  • Designers copy-pasting text into 50 Figma frames.
  • Developers manually tweaking CSS for every language.
  • QA team checking every banner size manually.
  • Project managers tracking versions in spreadsheets.
  • Back-and-forth revisions eating days of billable hours.
  • Exporting assets one-by-one from design tools.
INTERACTIVE
50 assets
2 hrs
85/hr
Potential Savings:
8,075
Per Campaign

> PEER_VALIDATION --linkedin_verified

"As a cornerstone of our development team... he was instrumental in creating high-quality HTML ads for key LCS and GCS clients (Google). He built new workflows that improved the team' efficiency... and directly contributed to exceeding client ROI expectations."

KB
Kristina Brown
Senior Program Manager @ Monks

"From building automated pipelines and writing smart scripts... Xavier always finds a way to add value. On a large client project his framework allowed us to render assets at massive scale in a fraction of the time, saving the team countless hours."

TW
Tim Wolters
Design Lead @ Monks

"He masterfully organizes and delivers on large-scale projects, ensuring they are built to scale. Beyond excellent technical skills in areas like web animation, Xavi is a natural leader who genuinely supports the development of his colleagues."

PC
Pablo Carreira
Lead Display Developer

"Highly focused professional who seamlessly bridges business objectives with client needs... ensuring that expectations are met with precision. His leadership consistently sets the standard."

JM
Jordan Maders
Director / Post Production

> SYSTEM_CAPABILITIES

Bridging the Design-Dev gap.

VISUAL_ENG.exe

Standard designers use video; I use code. Leveraging GSAP/WebGL to create physics-based, interaction-driven experiences that load instantly.

GSAPWebGLScrollytellingMicro-interactionsPerformance

DESIGN_SYS.config

Bridging Figma and React. I build Living Style Guides and Token Systems that ensure the design intent survives the development process. From atomic components to dark-mode architecture.

Design TokensFigma VariablesComponent LibrariesScalability

AD_TECH.sys

Building scalable, data-driven ad architectures that serve personalized content globally.

Display & Video 360DCO ArchitectureDynamic RemarketingCampaign Manager 360

WORKFLOW_OPS.bat

The 20-Hour Week Saver. I build custom scripts and plugins that automate your grunt work so your team can focus on what matters.

Python ScriptingAsset Generation PipelinesCustom Figma PluginsWorkflow Automation

MENTORSHIP.edu

Your designers and devs speak different languages. I teach them a common one. Upskilling teams on both sides.

Product Design Teacher @ NEOLANDDev-Design BridgeTeam TrainingWorkshops

WEB_ENGINEERING.lib

Modern frontend development focused on Core Web Vitals and component scalability.

Next.js / ReactTypeScriptPerformance TuningPWA Development

> EXECUTION_PROTOCOL

How we collaborate. Async. Efficient. Transparent.

01

Ingest & Queue

Submit requests via your private Trello/Linear board. Queue up DCO scripts, banner sets, or React components. Unlimited backlog.

02

Sprint & Execute

I execute tasks linearly. 15+ years of experience means faster turnaround on complex architectures. Daily commits and async updates.

03

Deploy & Optimize

Previews delivered via Vercel or Ad Verification links. We iterate until the creative meets your strict brand standards.

> COMMERCIAL_PACKAGES

Fixed outcomes. No hourly surprises.

WORKFLOW AUDIT

€995 one-time

The Tripwire. Identify the bottlenecks costing you money.

  • Codebase Review (Git)
  • DCO Feed Stress Test
  • Performance Profiling
  • Strategy PDF Report
RECOMMENDED

SYSTEM REBOOT

€2,950 package

The "Figma Rescue" Package.

  • Design System Audit & Refactor
  • Figma Variables & Tokens Setup
  • Ready-to-Dev Handover Guide
  • Ad Template Standardization
  • 1-Week Sprint Delivery

FRACTIONAL ARCHITECT

€3,500 /month

Ongoing Leadership & Architecture.

  • Unlimited Request Queue
  • Async Trello/Linear Workflow
  • Direct Slack Access
  • Pause/Cancel Anytime
  • Full Stack & Ad Tech Access

BRIDGE WORKSHOP

€1,500 half-day

Design for Devs / Dev for Designers.

  • Team Training Session
  • Dev-Design Communication
  • Figma for Developers
  • Code for Designers
  • NEOLAND Certified

>CASE_STUDIES_LOG

Client
BMW / MINI
Project
Global Asset Scale

Streamlining global creative production. Developed a scalable asset management system enabling rapid localization across 40+ markets.

75% reduction in production time
40+ markets served
500+ variants per campaign
AdobeFigma APIAutomationReact
READ_CASE_LOG
Client
GTECH
Project
Data-to-Creative Pipeline

AI-powered pipeline analyzing user signals to generate optimized ad variants for Search, Display, and YouTube in real-time.

300% ad relevance increase
45% CTR improvement
Real-time optimization
Machine LearningGoogle Ads APINode.jsAnalytics
READ_CASE_LOG
Client
FBTO
Project
Rich Media Experience

Interactive rich media campaigns explaining complex insurance products through animated storytelling and calculators.

250% engagement increase
85% conversion bump
Award-winning creative
HTML5 CanvasGSAP AnimationSVGInteractive
READ_CASE_LOG
Client
HUAWEI
Project
Color Takes Over

Immersive color-interactive experience allowing users to explore device variants with 3D-like rotations and dynamic backgrounds.

400% product interaction
95% completion rate
Cross-platform consistency
3D CSS TransformsWebGLColor TheoryMobile Opt
READ_CASE_LOG

INITIATE_CONTACT

Select your mission profile to route your request.