Sobre el Proyecto
FieldCV nace como un proyecto profesional destinado a democratizar la creación de currículums de alta calidad. A diferencia de las plataformas tradicionales que ralentizan el navegador con frameworks masivos o exportan imágenes de baja resolución, FieldCV apuesta por el rendimiento nativo del navegador.
La aplicación divide claramente la lógica entre el editor del formulario, el orquestador de estados reactivo, y el motor de renderizado encargado de cargar de forma asíncrona la estructura de plantillas seleccionadas por el usuario. El desarrollo se ha guiado bajo un estricto control de auditoría de arquitectura para asegurar la mantenibilidad a gran escala.
Arquitectura de Cero Frameworks: Rendimiento Extremo
Para garantizar una previsualización de cambios en milisegundos sin retrasos (debounce), se ha diseñado una arquitectura basada en Vanilla JavaScript y ES Modules. Todo el peso de dependencias complejas se elimina, consiguiendo tiempos de carga instantáneos:
Inicialización y Carga de Estado
La aplicación lee el manifiesto de plantillas (templates-manifest.json) y carga el estado de edición desde localStorage para garantizar la persistencia del usuario.
Generación del Formulario Dinámico
El motor de formularios (form-builder.js) analiza las propiedades de la plantilla activa y genera de manera dinámica los controles, inputs, selectores de colores y fuentes en el panel del editor.
Escucha Reactiva
Se vinculan manejadores de eventos optimizados a todos los campos. Al escribir, el estado en state.js se actualiza de forma síncrona en memoria y desencadena el renderizado en pantalla sin recargas de página.
Renderizado del Lienzo A4
El módulo de la plantilla activa genera la estructura HTML, inyecta su respectiva hoja de estilos con anidamiento CSS y actualiza el contenedor de la hoja A4, escalando el zoom automáticamente para ajustarse al espacio de trabajo.
Renderizado y Modularidad de Plantillas
Una de las grandes ventajas competitivas de FieldCV reside en su modularidad declarativa. En lugar de acoplar la lógica del núcleo (app.js) a las plantillas disponibles mediante sentencias condicionales redundantes, la aplicación trata a cada plantilla de forma encapsulada en su propia jerarquía de archivos:
-
- index.js - render(state) -> Retorna el marcado HTML del currículum
- style.css - Estilos específicos de la plantilla con CSS Nesting nativo
- config.json - Declaración local de capacidades, colores y orden de pestañas
- thumbnail.svg - Miniatura vectorial para el selector modal de plantillas
Al seleccionar una plantilla en el modal, el orquestador lee su respectivo config.json para reconfigurar al vuelo los parámetros del editor.
Decisiones de Arquitectura y Auditoría Técnica
El desarrollo de FieldCV está regido por un conjunto de reglas paramétricas gestionadas por un agente guardián o auditor. Esto asegura que la incorporación de nuevas plantillas o características no rompa la consistencia ni introduzca dependencias espurias:
- Principio de Cero Hardcoding: Está estrictamente prohibido introducir condicionales basados en el nombre de la plantilla en el motor central. Por ejemplo, en lugar de comprobar
if (activeTemplate === 'sobrio'), la UI del formulario lee dinámicamente las capacidades (features) declaradas en elconfig.jsonlocal de la plantilla activa (comoskillLevels,personalityPercentageolanguageLevels). - Orden Dinámico de Flujo (tabOrder): El orden de visualización de las pestañas en el panel lateral se ajusta dinámicamente al flujo visual de lectura del currículum. Este orden se define individualmente mediante la clave
tabOrderde cada archivo de configuración. - Carga Asíncrona sin Bundler (fetch): Con el fin de soportar despliegues de archivos fuente directamente en entornos estáticos sin pasos obligatorios de compilación, el sistema carga los activos de las plantillas (JSON, CSS, SVG) mediante peticiones
fetch()en tiempo de ejecución. Está prohibido usar importaciones dependientes del bundler de Vite del tipoimport CSS from "./style.css?raw". - Manejo de Placeholders e Independencia de UI: Cada sección dispone de placeholders indexados. Si el usuario no escribe un nombre, el sistema inyecta un texto indicando “Habilidad 1” o “Idioma 2”, resolviendo el alias singular definido por la plantilla activa. Asimismo, se respeta la independencia de tabs (v.g., Hobbies e Información Adicional son secciones totalmente desacopladas).
- Aislamiento Móvil Estricto: Toda la lógica móvil táctil se encapsula en
mobile-ui.jsy sus estilos responsivos se aíslan bajo consultas de medios enresponsive.css, manteniendo limpio el flujo de escritorio.
Exportación de Alta Fidelidad: PDF Vectorial
En lugar de utilizar librerías de terceros basadas en capturar el lienzo del navegador en formato de imagen (lo que produce PDFs pesados e ilegibles para los sistemas ATS de las empresas), FieldCV utiliza el motor nativo del navegador:
- CSS Paged Media: La hoja de estilos define las dimensiones exactas y los márgenes de impresión mediante reglas
@page { size: A4; margin: 0; }. - Media Queries específicas de impresión: Las barras de navegación y los paneles de formularios se ocultan de forma automática al abrir el diálogo de impresión:
@media print { .navbar, .editor-panel, .toolbar { display: none !important; } .preview-container { width: 100% !important; transform: none !important; box-shadow: none !important; } } - Texto Seleccionable: Dado que el PDF resultante es 100% vectorial, el texto permanece totalmente seleccionable y legible para cualquier lector de PDFs, optimizando la indexación técnica en procesos de reclutamiento.
Corrección Gramatical e Integraciones
La aplicación incluye un sistema de auditoría ortográfica basado en integraciones directas:
- LanguageTool API: Analiza el texto redactado en los campos de experiencia y perfil, señalando errores ortográficos y sugiriendo mejoras de redacción de forma contextualizada.
- Paypal Donation Support: Mecanismo integrado para aportaciones voluntarias mediante redirecciones dinámicas seguras para el mantenimiento del proyecto.