The detailed case study is available in Spanish.
Logros
- Publiqué en producción un portfolio construido desde cero
- Diseñé y desplegué un chat con IA verificado en el servidor (Melissa)
- Construí un generador que convierte Markdown en datos de la web
- Automaticé la publicación con verificación en un entorno de pruebas
Contexto
Necesitaba una presencia profesional propia que permitiera a una empresa entender en pocos segundos quién soy, qué sé hacer, qué he construido y por qué debería hablar conmigo. El CV en PDF no bastaba para mostrar proyectos con contexto, y quería un sitio que pudiera actualizar rápido y que sirviera a mi posicionamiento profesional sin convertirse en un proyecto interminable.
Mi rol
Proyecto propio de principio a fin. Definí los requisitos, la arquitectura y el diseño, dirigí el desarrollo con Claude y Claude Code siguiendo reglas escritas en un archivo de instrucciones del proyecto, validé cada entrega con evidencia del servidor y me encargué yo mismo de la infraestructura: el servidor, los permisos y el despliegue.
Qué construí
Sistema de contenido y generación de datos
Separé el contenido de la presentación. Cada proyecto, cada formación y el catálogo de tecnologías viven en archivos Markdown con una cabecera de datos, y un generador en PHP los convierte en la web:
- Contenido en Markdown → generar-json.php → datos en JSON → páginas de la web.
El generador normaliza los nombres de tecnologías para evitar duplicados por errores de escritura, avisa si falta una imagen referenciada por un proyecto y extrae los logros de cada caso desde su propia sección. Añadir un proyecto nuevo es escribir un Markdown y ejecutar un comando; no hace falta tocar HTML.
Interfaz orientada a conversión
Construí un stack tecnológico organizado en siete áreas (Lenguajes y Backend, Frontend, CMS y WordPress, Datos e Integración, Infraestructura y Cloud, IA y Software) que funciona como filtro: al fijar una tecnología se resaltan los proyectos donde la usé, de modo que el stack es una prueba y no una lista de palabras clave. El resto de la interfaz sigue el mismo criterio: encabezado con tres llamadas a la acción (hablar con Melissa, contactar por WhatsApp, descargar el CV), carrusel de proyectos con enlace al caso completo y una sección de contacto sin formulario, para no depender de un backend adicional.
Elegí un stack sin framework, HTML, CSS y JavaScript, con PHP solo donde el servidor ya lo ofrecía para las plantillas compartidas, después de evaluar y descartar Astro con Tailwind y un enfoque con Bootstrap: ninguno aumentaba la probabilidad de conseguir una entrevista lo suficiente como para justificar el paso de compilación o una identidad genérica.
Melissa: asistente de IA con límites
Construí un chat que responde preguntas sobre mi trayectoria, conectado a modelos de lenguaje mediante OpenRouter, con una cadena de varios modelos gratuitos por si uno falla o tarda demasiado. Solo responde con datos que yo he verificado: lee un perfil y resúmenes de mis proyectos que mantengo aparte del contenido público de la web, y las experiencias marcadas como confidenciales quedan excluidas de lo que el modelo puede leer. Se presenta siempre como una IA y avisa de que puede equivocarse. Añadí un límite de preguntas por hora y por día por visitante, y guardo las IP solo como huella, nunca en claro.
Infraestructura y despliegue
Administro yo mismo el servidor donde vive la web, sobre Apache y Linux. Automaticé el despliegue con una cadena de scripts:
- Desarrollo local en XAMPP → repositorio Git → copia en staging protegido con contraseña → verificación automática → producción.
El script de verificación comprueba que el entorno de pruebas rechaza el acceso sin clave, que responde con la clave correcta, que todos los recursos cargan y que el chat contesta bien a dos preguntas de control. Antes de publicar en producción, hago una copia de seguridad y evito borrar otras carpetas que conviven en el mismo servidor.
Método: nada cuenta como hecho sin evidencia
Llevo un registro del proyecto con estados explícitos para cada pieza: construida, verificada en el servidor, verificada en el navegador, pendiente o descartada. La norma nació de un error real: en una sesión anterior se dio por publicado un archivo del chat que en realidad nunca había llegado al servidor. Lo detecté al exigir una verificación con evidencia real, lo corregí y convertí la lección en regla: nada se marca como terminado sin una prueba del servidor o del navegador.
Resultado
- El portfolio está publicado en producción en patrickjoel.com
- Actualizar el contenido es editar un archivo Markdown, no tocar HTML
- Melissa quedó verificada en el servidor, respondiendo con mis datos reales
- Cada publicación pasa antes por staging y se verifica con el mismo script
Qué demuestra
- Tomar decisiones técnicas por impacto y no por moda: descarté frameworks cuando no aportaban
- Diseñar para el mantenimiento: separar contenido, datos y presentación
- Integrar IA en un producto con criterios de fiabilidad, privacidad y coste
- Administrar infraestructura propia: servidor, permisos, entornos y despliegue
- Dirigir desarrollo con IA mediante reglas escritas, validación y evidencia
Nota
No hay repositorio público: el proyecto convive con datos personales y con el contenido privado que alimenta a Melissa. Puedo enseñar el código y el pipeline de despliegue en una entrevista.