Guillermo Domínguez García · Portfolio (versión rápida)

Qué he construido y cómo

Seis demos, cada una con la tecnología que le corresponde y sus buenas prácticas. Puedes probarlas aquí mismo: cada una solo se descarga al abrir su desplegable.

Vue

La tienda de ingredientes del pueblo, hecha con Vue 3 + Pinia.

Tienda de ingredientes del juego: catálogo con buscador y filtros, carrito que se paga con el oro de la partida compartida y venta de pociones al 50 %.

Vue 3.5
Pinia
JavaScript
@nanostores/vue

Cómo está hecho

<script setup>: Componentes concisos; las props se declaran con su tipo y si son obligatorias, y Vue avisa en desarrollo si llega algo inesperado.
defineModel(): El buscador y los filtros exponen v-model directamente, sin boilerplate de prop + emit.
Composables: useDebouncedRef y useItemFilter aíslan la lógica reutilizable fuera de los componentes.
Pinia + nanostores: El carrito es estado local en un setup store de Pinia; el oro y el inventario llegan de la partida compartida con useStore de @nanostores/vue.
SSR sin desajustes: La partida guardada se aplica tras onMounted: hasta entonces se pinta el estado inicial, igual que el HTML del servidor.
<TransitionGroup>: Las animaciones de entrada y salida de la lista se declaran, no se programan a mano.

React

El tablón de misiones del gremio, hecho con React 19.

Tablón de misiones: entregas las pociones que piden a cambio de oro y XP, y puedes publicar misiones propias contra un "servidor" simulado con respuestas optimistas.

React 19
JavaScript (JSX)
CSS Modules
@nanostores/react

Cómo está hecho

Store externo + Context: La partida vive en nanostores: useStore (useSyncExternalStore) se suscribe una vez en el Provider y la reparte por contexto. Con ssr: "initial" la hidratación coincide con el servidor.
Acciones de formulario: <form action> con useActionState para validar y devolver errores; useFormStatus desactiva el botón sin pasar props.
useOptimistic: La misión aparece al instante mientras el "servidor" responde, con la misma id que la guardada para no duplicarse. Si falla (prueba con un dragón), se deshace sola.
useDeferredValue: El buscador responde en cada tecla y el filtrado se procesa con prioridad baja; la lista se atenúa mientras tanto.
Estado derivado: El nivel, lo que falta para cada misión y los filtros se calculan durante el render: sin useEffect ni estado duplicado que sincronizar.
memo + CSS Modules: Las tarjetas solo se re-renderizan si cambia su misión o el inventario, y los estilos tienen nombres únicos por componente.

Svelte

El caldero del alquimista, hecho con Svelte 5.

Laboratorio de alquimia: mezclas ingredientes de tu inventario y el caldero calcula en vivo color, estadísticas, rareza y si la mezcla coincide con una receta.

Svelte 5 (runas)
JavaScript
nanostores

Cómo está hecho

Runas: $state y $derived: El color, las estadísticas, la rareza y la receta que coincide con la mezcla se derivan solos de los ingredientes.
Estado en una clase .svelte.js: La lógica del caldero vive fuera de los componentes, en una clase con campos reactivos y métodos.
$props, callbacks y $bindable: Props con valores por defecto, eventos como funciones (onpick) y bind:value bidireccional solo donde hace falta.
Snippets: {#snippet} y {@render} reutilizan marcado con parámetros sin crear componentes nuevos; children sustituye a los slots.
Movimiento y transiciones: Tween.of anima las barras, y fly/scale con animate:flip mueven los ingredientes y el recetario.
Stores con $store: nanostores cumple el contrato de store de Svelte: $playerStore se suscribe y se limpia solo. Un $effect marca el montaje para hidratar sin desajustes.

CSS

La sastrería del pueblo: CSS puro, sin una sola línea de JavaScript.

Sastrería sin JavaScript: personalizas al héroe (ropa, sombrero, capa y pose) y el personaje del pueblo se viste igual.

CSS moderno
:has()
@property
Container queries
@layer + @scope

Cómo está hecho

:has() como estado: Los radios marcados cambian colores, accesorios y pose: el selector padre sustituye al JavaScript.
@property: Las variables registradas como <color> se pueden animar: la ropa cambia de color a saltos con steps(4).
Container queries: La sastrería se reorganiza según el ancho de su panel, no el de la pantalla.
@layer + @scope: Capas para ordenar la cascada y @scope para aislar los estilos de forma nativa, con anidamiento sin preprocesador.
Contadores CSS: Las estadísticas se calculan con counter-increment en cada prenda marcada y se pintan con counter().
HTML nativo: Acordeón exclusivo con <details name>, botón type="reset" y radios reales: accesible con teclado y lector de pantalla. El juego escucha el formulario y viste al héroe del pueblo.

Estadísticas

Defensa
Magia
Estilo

¿Dónde está el JavaScript?

En ningún sitio. Cada opción es un <input type="radio"> y el resto lo hace:has():

.tailor:has([name='shirt'][value='r']:checked) {
  --shirt: var(--color-px-r);
}

¿Por qué el color cambia a saltos?

Una variable CSS normal no se puede animar: el navegador no sabe qué tipo de dato es. Con@property se registra --shirt como <color> y ya admitetransition; steps(4) le da el aire de 8 bits.

Ciberseguridad

El cuartel de la guardia: seguridad web con Web Components nativos, sin framework.

Tres estaciones: analizador de contraseñas con k-anonymity, laboratorio de XSS (innerHTML vs textContent vs saneado) y cabeceras de seguridad.

Web Components
Shadow DOM
Web Crypto
JavaScript sin framework

Cómo está hecho

Nunca innerHTML: Todo el DOM se crea con createElement y textContent: lo que escribe el visitante nunca se interpreta como HTML.
Análisis inerte + lista blanca: DOMParser crea un documento donde nada se ejecuta; el saneado construye nodos nuevos solo con etiquetas permitidas. Probado contra XSS y mXSS clásicos.
Nada sale del navegador: La contraseña no se envía ni se guarda, se borra al cerrar y el corrector está desactivado (el de Chrome puede enviar el texto a un servidor).
k-anonymity: Have I Been Pwned solo necesita los 5 primeros caracteres del SHA-1 para decirte si una contraseña se ha filtrado.
Custom Elements + Shadow DOM: Componentes nativos con estilos aislados y una hoja compartida por adoptedStyleSheets. Se cargan con import() al entrar en el edificio.
Declarative Shadow DOM: Las tarjetas de cabeceras traen su sombra en el HTML del servidor: Shadow DOM sin una línea de JavaScript.

Python

La biblioteca del mago: Python 3.14 de verdad, ejecutándose en tu navegador con Pyodide.

Editor que ejecuta Python 3.14 real en el navegador, en un sandbox sin red. Uno de los ejemplos analiza tu partida del juego.

Python 3.14
Pyodide (WebAssembly)
Web Workers
JavaScript

Cómo está hecho

Pyodide en un Web Worker: CPython compilado a WebAssembly corre fuera del hilo principal: ni un bucle infinito congela el pueblo.
Sandbox verificado: Antes de ejecutar nada se eliminan fetch, WebSocket, IndexedDB, eval y Function, y se comprueba. Si algo falla, no se ejecuta.
La página no se fía: Cada mensaje del worker se valida con un protocolo estricto y la salida se pinta como texto, nunca como HTML.
Límites: 5000 caracteres de código, 10 segundos (luego se termina el worker y se crea otro) y 20 000 de salida.
Carga bajo demanda: Unos 6 MB que solo se descargan al entrar, desde jsDelivr y con la versión fijada.
Python moderno: f-strings, comprensiones, dataclasses, match y collections, sobre una copia de lectura de tu partida.

Arquitectura

Las tres primeras demos, cada una con un framework distinto, forman un único juego con estado compartido:

Tienda (Vue)compras ingredientes
Laboratorio (Svelte)preparas pociones
Tablón (React)las entregas por oro y XP

…y el oro vuelve a la tienda. El HUD del juego muestra el oro y el nivel, y avisa de cada logro.

Astro con islas
Una sola página estática. Cada demo es una isla con su framework que se hidrata al verla (client:visible): quien solo pasea descarga el juego y poco más.
Estado compartido entre frameworks
Vue, React y Svelte leen el mismo store de nanostores. Toda la lógica son funciones puras con tests, la partida se guarda validada en localStorage y el SSR no se rompe al hidratar.
Motor de juego propio
JavaScript y Canvas 2D sin librerías: mapa, colisiones, cámara y escalado pixel-perfect. Todos los sprites están dibujados con código.
Seguridad desde el diseño
Nada de innerHTML con texto del visitante, saneado por lista blanca y Python en un sandbox sin red verificado antes de ejecutar.
Calidad
JavaScript moderno, con la lógica en funciones puras probadas con Vitest y todo lo que llega de fuera (partida guardada, mensajes del worker) validado en tiempo de ejecución.
Documentado
Una guía de arquitectura por tecnología y decisiones registradas como ADR, con los problemas que aparecieron y cómo se resolvieron.

Repositorio ↗Guía de arquitectura ↗ADR 001 ↗

Sobre mí

Guillermo Domínguez García

Vue.js · Python · Ciberseguridad

Clase: Desarrollador Full Stack
Nivel: 5 (años de experiencia)
Origen: Sevilla, España

Descargar CV:PDF Markdown ver en la web

Perfil

Desarrollador web con 5 años de experiencia y una progresión constante: del bootcamp al front-end, y de ahí a la IA aplicada al desarrollo y la ciberseguridad. Me adapto con rapidez a áreas nuevas y las convierto en aportación real al equipo. Combino lo técnico con una buena base en diseño y UX/UI (Figma), lo que me permite cuidar la experiencia de usuario y colaborar con perfiles de diseño y producto. Trabajo bien en equipo, con autonomía y ganas de seguir creciendo.

Misiones completadas

Desarrollador web y seguridad
OpenWebinars · Dic 2021 – Oct 2026
- ▸ Construcción de interfaces front-end con Vue.js y Astro, basadas en APIs REST.
- ▸ Desarrollo asistido por IA con Claude Code para acelerar la creación, revisión y mejora del código.
- ▸ Experiencia integrando backends Django mediante API REST y OAuth.
- ▸ Realización de pentesting sobre el entorno de la empresa y aplicación de prácticas de seguridad.
- ▸ Colaboración en tareas de cumplimiento y documentación de normativa ISO 27001.
Desarrollador de proyectos web (Full Stack)
Don Bosco F5, Sevilla · Abr 2021 – Oct 2021
- ▸ Desarrollo de varios proyectos web con distintas herramientas y tecnologías (HTML5, CSS3, JavaScript, Vue.js, Laravel).

Habilidades

Front-end: HTML5CSS3JavaScriptVue.jsPiniaAstroTailwind CSSBootstrapAxiosFigmaReactSvelte
Back-end: PythonDjango (integración vía API REST y OAuth)Laravel (formación inicial)
Herramientas: GitClaude CodeGitHub Copilot (revisión de PRs)CloudflareLinuxKali Linux
Integraciones: APIs RESTBrevoClientifyGoogle AnalyticsElevenLabsAlgolia
Seguridad: PentestingBuenas prácticas de seguridadNormativa ISO 27001
Competencias: ProactividadAutonomíaTrabajo en equipoEmpatíaAdaptación

Formación

Bootcamp de Desarrollo Full StackDon Bosco F5, Sevilla · 2021
BachilleratoI.E.S. Nervión, Sevilla · 2011 – 2014

▶ Certificaciones

Ciberseguridad: Onboarding en Ciberseguridad · IA para Ciberseguridad · Desarrollo Seguro · Fundamentos legales de la ciberseguridad y protección de datos
Normativa: Formación obligatoria ISO 27001: seguridad y protección de datos · Implementación de la ISO 27001 · Introducción al Esquema Nacional de Seguridad (ENS) · Protección de datos y seguridad de la información (avanzado) · Protección de datos y seguridad de la información
Desarrollo: Técnicas de refactoring y Clean Code · Vibe Coding: prototipar apps con IA · Planificación y ejecución de proyectos ágiles

Certificaciones

12 certificaciones · 138 horas de formación. Pulsa una para verla en grande y comprobarla en la web de quien la emite.

Ciberseguridad (4)

IA para Ciberseguridad
Curso · 9 h · 29 oct 2025
IA para Ciberseguridad · OpenWebinars · 29 oct 2025
Verificar ↗
Desarrollo Seguro
Curso · 15 h · 29 oct 2025
Desarrollo Seguro · OpenWebinars · 29 oct 2025
Verificar ↗
Onboarding en Ciberseguridad
Curso · 7 h · 10 dic 2024
Onboarding en Ciberseguridad · OpenWebinars · 10 dic 2024
Verificar ↗
Fundamentos legales de la ciberseguridad y protección de datos
Curso · 5 h · 10 dic 2024
Fundamentos legales de la ciberseguridad y protección de datos · OpenWebinars · 10 dic 2024
Verificar ↗

Normativa (5)

Formación obligatoria ISO 27001: seguridad y protección de datos
Itinerario · 47 h · 17 dic 2025
Formación obligatoria ISO 27001: seguridad y protección de datos · OpenWebinars · 17 dic 2025
Verificar ↗
Implementación de la ISO 27001
Curso · 10 h · 17 dic 2025
Implementación de la ISO 27001 · OpenWebinars · 17 dic 2025
Verificar ↗
Introducción al Esquema Nacional de Seguridad (ENS)
Curso · 7 h · 17 dic 2025
Introducción al Esquema Nacional de Seguridad (ENS) · OpenWebinars · 17 dic 2025
Verificar ↗
Protección de datos y seguridad de la información (avanzado)
Curso · 7 h · 17 dic 2025
Protección de datos y seguridad de la información (avanzado) · OpenWebinars · 17 dic 2025
Verificar ↗
Protección de datos y seguridad de la información
Curso · 11 h · 1 abr 2025
Protección de datos y seguridad de la información · OpenWebinars · 1 abr 2025
Verificar ↗

Desarrollo (3)

Técnicas de refactoring y Clean Code
Curso · 10 h · 29 oct 2025
Técnicas de refactoring y Clean Code · OpenWebinars · 29 oct 2025
Verificar ↗
Vibe Coding: prototipar apps con IA
Curso · 2 h · 29 oct 2025
Vibe Coding: prototipar apps con IA · OpenWebinars · 29 oct 2025
Verificar ↗
Planificación y ejecución de proyectos ágiles
Curso · 8 h · 29 oct 2025
Planificación y ejecución de proyectos ágiles · OpenWebinars · 29 oct 2025
Verificar ↗

Proyectos

🚧 Próximamente

Aquí irán mis proyectos personales, con su código y una demo. Los estoy preparando.

Aficiones

La tienda del pueblo donde recargo energía. Cada afición da un bonus que también llevo al trabajo.

CrossFit
+ Constancia
Entrenamiento funcional de alta intensidad. Cada WOD es una pequeña meta que superar.
Pádel
+ Trabajo en equipo
Mi forma favorita de desconectar: partido con amigos y a por la siguiente bola.
Cine
+ Creatividad
Me encanta descubrir películas y comentarlas después.
Series
+ Narrativa
Siempre tengo alguna serie a medias y otra en la lista de pendientes.
Warhammer
+ Atención al detalle
Modelismo y pintura de miniaturas: paciencia y precisión, igual que con el código.

Qué he construido y cómo

Cómo está hecho

Seta roja

Hierba lunar

Cristal azur

Pluma de grifo

Flor de fuego

Baba de slime

Cómo está hecho

Cómo está hecho

Ingredientes

Recetario 0/5 listas

Cómo está hecho

Cómo está hecho

1 Analizador de contraseñas

2 XSS: el mismo texto, tres formas de insertarlo

3 Cabeceras de seguridad

Content-Security-Policy

Strict-Transport-Security

X-Content-Type-Options

frame-ancestors (CSP)

Referrer-Policy

Permissions-Policy

Cómo está hecho

Arquitectura

Astro con islas

Estado compartido entre frameworks

Motor de juego propio

Seguridad desde el diseño

Calidad

Documentado

Sobre mí

Perfil

Misiones completadas

Habilidades

Formación

Certificaciones

Ciberseguridad (4)

Normativa (5)

Desarrollo (3)

Proyectos

Aficiones

CrossFit

Pádel

Cine

Series

Warhammer