Visión general del proyecto y rol

Este es el proyecto de creación del sitio teaser oficial para el anime de TV "Kaori-san quiere seguir peleando incluso después de reencarnar", programado para emitirse en 2026. Los objetivos eran los fans de la obra original y los fans del anime que buscan información sobre nuevas series, y se requirió la combinación de una rica expresión visual para transmitir al máximo el encanto de la obra y una alta mantenibilidad gracias a un entorno de desarrollo moderno.

En este proyecto, estuve a cargo de todo, desde la construcción de la infraestructura hasta el desarrollo frontend y el diseño de temas personalizados de WordPress.

Pila tecnológica utilizada

En este proyecto, seleccionamos la siguiente pila tecnológica para maximizar la experiencia de desarrollo, el rendimiento y la mantenibilidad.

• Entorno de desarrollo: Docker, Docker Compose
• Servidor: MariaDB, Apache (Contenedor Docker)
• CMS: WordPress (Desarrollo de tema personalizado)
• Frontend: Vite, TypeScript, Sass (SCSS)
• Build/Control de calidad: npm scripts, PostCSS, ESLint, PHP CodeSniffer

A pesar de ser un desarrollo de WordPress, introdujimos HMR (recarga en caliente) con Vite y seguridad de tipo con TypeScript, aprovechando al máximo los conocimientos modernos de desarrollo frontend.

Diseño e implementación en los que me enfoqué

Entorno de desarrollo portátil con Docker

Definimos docker-compose.yml y gestionamos estrictamente cada versión de MariaDB, Apache, PHP y WordPress en contenedores. Esto eliminó las diferencias de entorno entre los miembros del equipo y construyó un entorno de desarrollo portátil y altamente reproducible que previene problemas como "no funciona en mi entorno".

Experiencia de desarrollo moderna con Vite + TypeScript

Introdujimos Vite en el desarrollo de temas de WordPress. Implementamos HMR (recarga en caliente) donde los cambios de Sass y TypeScript se reflejan instantáneamente en el navegador, acelerando drásticamente el ciclo de desarrollo. Además, todo el JavaScript se escribió en TypeScript, asegurando la seguridad de tipos y manteniendo una base de código robusta con pocos errores en tiempo de ejecución.

Diseño robusto de Sass basado en PRECSS/BEM

Considerando la mantenibilidad y la reutilización, dividimos la estructura de directorios de Sass en foundation (base), layout (diseño), components (componentes genéricos) y project (específico de página). Aplicamos rigurosamente convenciones de nombres (PRECSS/BEM) como _c-title (componente) y _l-container (diseño) para prevenir conflictos de estilos y lograr un diseño CSS predecible.

Dedicación exhaustiva a la UI/UX

Como sitio web oficial del anime, enfatizamos una experiencia que elevara las expectativas del usuario.

• Animación de apertura: Implementamos op-animation.ts y añadimos una rica puesta en escena donde los elementos se muestran secuencialmente al cargar la página. Al mismo tiempo, prevenimos estrictamente el FOUC (Flash of Unstyled Content) para lograr una primera impresión sofisticada.
• Desplazamiento inercial: Con inertia-scroll.ts, implementamos un desplazamiento inercial suave y agradable al navegar en PC. Esto creó una diversión sensorial de "tocar" el sitio y aumentó la inmersión en el universo de la obra.
• Desplazamiento suave: Introdujimos smooth-scroll.ts para hacer que el movimiento a los enlaces de anclaje dentro de la página fuera fluido.

Build y gestión de calidad automatizados

Preparamos npm scripts y automatizamos el flujo de trabajo, desde el desarrollo (npm run dev) hasta la compilación para producción (npm run build) y la generación de archivos zip para entrega (npm run deploy:zip). Además, introdujimos ESLint y PHP CodeSniffer para establecer un sistema que mantuviera la calidad del código a un alto nivel en todo momento.