Home About Work Services Writing Contact ES
#include<iostream>

Frontend Design Engineer // System Architect

I design and develop interfaces that connect product vision with flawless technical execution. My approach bridges the gap between design and engineering to deliver measurable results.

0X01 // PORTFOLIO

What I've Built.

21 GEAR HEAD WORKS
Web

GEAR HEAD WORKS

The e-commerce uses a dark theme with high-quality product photography on textured backgrounds that evoke terrain and metal. The filter system allows searching by category, material, and usage context, reducing catalog exploration time. Product pages include high-resolution zoom, multi-angle views, and detailed technical specifications with model comparisons. A restrained color palette and condensed typography reinforce the tactical identity without compromising readability.

UIE-COMMERCEWEB
02 BLACKHOLE DEFI
Crypto

BLACKHOLE DEFI

The premium dark interface employs visual gravity effects where elements "orbit" around the focal point of each screen, reinforcing the black hole metaphor. The palette combines deep blue and purple tones with cyan accents that guide the eye toward primary actions. Particle animations simulate gravitational absorption during transactions, and each swap confirmation displays a visual collapse effect that reinforces the brand identity in every interaction.

UICRYPTODEFI
33 G2A REDESIGN
Web

G2A REDESIGN

The implementation progressed section by section: header with responsive navigation and hamburger menu, hero section with a promotional image carousel, product grid with hover effects that reveal price and discount, and footer with links organized by category. All CSS was written without preprocessors or frameworks, using custom properties to maintain color consistency. Media queries cover three main breakpoints, ensuring functionality from 320px to desktop screens.

HTMLCSSFRONTEND
15 REAL MADRID APP
App

REAL MADRID APP

The premium design adopts the white and gold tones of the club's identity, with serif typography for titles that evokes Real Madrid's institutional tradition. The news feed presents visual cards with high-quality editorial photography, while player profiles display interactive statistics with radial performance charts by competition. The calendar includes a countdown to the next match and direct access to live mode, which transforms the interface into a tracking dashboard with scoreboard, lineup, and minute-by-minute events.

UIAPPSPORTS
16 HOTEL SYSTEM
App

HOTEL SYSTEM

The solution proposes a dual design: a clean and modern guest interface for reservations, room service requests, and express check-out, paired with a staff interface optimized for speed through keyboard shortcuts and condensed occupancy views. The push notification system connects both profiles in real time, reducing response times to requests. Additionally, the management dashboard consolidates occupancy, satisfaction, and per-room revenue metrics in a single view.

UIUXAPP
12 CALL OF DUTY
Gaming

CALL OF DUTY

The design incorporates functional military HUD elements — tactical corners, decorative coordinates, and animated telemetry data — that frame each section like a combat visor. Character sections employ depth parallax with fast, aggressive transitions that replicate the frenetic pace of the gameplay. Condensed bold typography ensures readability over the dark theme, while orange accents — Black Ops 3's signature color — guide the visual hierarchy and highlight CTAs and interactive elements across every screen.

UIGAMECOD
0X02 // AREAS_OF_EXPERTISE

How I Can Help.

Execution protocols designed to eliminate technical uncertainty and guarantee measurable results.

PROTOCOL 01

DESIGN SYSTEMS

Visual Scalability

Building atomic component libraries and technical documentation. I ensure visual consistency and system integrity.

PROTOCOL 02

INTERFACE ENGINEERING

Technical Fidelity

Frontend development with React and animations. Specialized in optimizing render performance and creating micro-interactions.

PROTOCOL 03

PRODUCT STRATEGY

Vision to Execution

Technical and visual diagnostics to define the product roadmap. I eliminate operational friction between stakeholders and engineering.

PROTOCOL 04

APPLIED AI INTEGRATION

Augmented Intelligence

Integrating AI into design and development workflows. From optimized system prompts to local model deployment with zero external dependency.

0X03 // WORKFLOW

How I Work.

A structured process that transforms product vision into measurable results. Four phases, zero ambiguity.

01

Discovery

I analyze your product, audience, and technical constraints. I identify structural failure points and define measurable objectives.

02

Design

I create user flows, wireframes, and high-fidelity prototypes in Figma. Every design decision is validated before writing a single line of code.

03

Development

I build the interface with React, Astro, and Tailwind CSS. Pixel-perfect fidelity with the design, optimized performance, and accessible from day one.

04

Delivery & Iteration

I deploy, audit performance with Lighthouse, and iterate based on real data. The product launches optimized and ready to scale.

0X04 // TECHNICAL_DIAGNOSIS

Problems I Solve.

Before building, I analyze. I identify the structural failure points that prevent a digital product from scaling efficiently.

ERR_HIGH_DEBT

Inconsistent Systems

Impact: Maintenance fatigue

Visual and technical fragmentation generates technical debt that slows down releases and confuses the end user.

ERR_SYNC_FAIL

Design-Engineering Gap

Impact: Operational friction

The lack of a common language between designers and developers results in low-fidelity implementations and process friction.

ERR_NO_MODULAR

Rigid Architectures

Impact: Lack of modularity

Interfaces that cannot evolve without breaking. The absence of an atomic design system prevents efficient scaling.

0X05 // TECHNICAL_COMPETENCIES

Technical Competencies.

Technology stack and design capabilities consolidated over 7+ years of professional experience.

FRONTEND // ARQUITECTURA WEB

MK-IV

Development MODULE

React Ecosystem EXPERT
Visual Engineering EXPERT
WordPress & CMS ADVANCED

> SYSTEM IDLE // AWAITING INPUT...

BACKEND // DATOS E INFRAESTRUCTURA

MK-IV

Infrastructure MODULE

Node.js Core INTERMEDIATE
Database / BaaS INTERMEDIATE
Python BASIC

> SYSTEM IDLE // AWAITING INPUT...

HERRAMIENTAS // FLUJO DE TRABAJO

MK-IV

Workflow MODULE

Design Ops EXPERT
Dev Ops INTERMEDIATE
Environment ADVANCED

> SYSTEM IDLE // AWAITING INPUT...

INTELIGENCIA ARTIFICIAL // APLICADA

MK-IV

Intelligence MODULE

Generative AI SPECIALIST
LLM Engineering SPECIALIST
Prompt Engineering EXPERT

> SYSTEM IDLE // AWAITING INPUT...

// COLLABORATION

Let's Talk About Your Project.

Do you have a digital product that needs high-performance visual architecture? I am available for new collaborations.