Portafolio Web
Plataforma web personal diseñada bajo un concepto temático híbrido entre la consola de administración de Google Cloud Platform y una enciclopedia técnica tipo Wikipedia. Permite la gestión, documentación y presentación interactiva de proyectos de software, arquitectura de sistemas y certificaciones profesionales
Arquitectura Hexagonal y Desacoplamiento en /server
A pesar de que el proyecto utiliza Next API Routes para la exposición de endpoints, se estructuró un directorio interno denominado /server implementando el patrón de Arquitectura Hexagonal (Puertos y Adaptadores). Esta decisión desacopla la lógica de negocio central de las dependencias directas del framework web Next.js y del ORM, facilitando el mantenimiento, el escalado y la ejecución de pruebas sin afectar la capa de presentación.
Estructura Interna del Servidor
La capa /server se dividió conceptualmente en tres pilares fundamentales que garantizan el principio de responsabilidad única (SRP) y la inversión de dependencias:
Capa de Dominio (Domain): Contiene los modelos, entidades puras y reglas de negocio sin ninguna librería externa. Define la estructura base de los proyectos, certificaciones y bloques de contenido sin conocer cómo ni dónde se almacenarán.
Capa de Aplicación (Ports / Use Cases): Define los casos de uso del sistema (ej. CreateProject, GetDocumentationBySlug, AuthenticateUser) e impone interfaces estrictas (Puertos) que la infraestructura debe cumplir.
Capa de Infraestructura (Adapters): Alberga las implementaciones concretas de los puertos. Aquí conviven los adaptadores de Prisma ORM para las consultas a PostgreSQL, los servicios de almacenamiento con Vercel Blob para los archivos multimedia y la integración de utilidades criptográficas.
Interfaz Temática y Experiencia de Usuario (UX)
El sistema combina tres estéticas clave del ecosistema de Google y la web abierta para transformar la exploración de un portafolio común en un entorno interactivo y profesional:
Portafolio Web Profesional-imagen1
La puerta de entrada simula la interfaz limpia y mínima del motor de búsqueda de Google. Permite realizar búsquedas globales por proyectos, habilidades o tecnologías, así como navegar mediante accesos rápidos en la parte inferior (Quién soy, Experiencia, Conocimientos, Currículum).
Portafolio Web Profesional-imagen2
Organiza la información en pestañas dinámicas (Todo, Proyectos, Imágenes, Certificados, CV, Skills, Sobre mí). Presenta los proyectos como tarjetas destacadas (Featured Snippets) e imita el carrusel de imágenes para explorar certificados de forma visual e intuitiva.
Portafolio Web Profesional-imagen3
Diseñada al estilo de Google Cloud Platform, sirve como el panel principal para gestionar y visualizar el estado del portafolio. Muestra paneles de bienvenida, IDs de proyecto simulados, estimaciones de costos en tiempo real y accesos rápidos a los recursos del sistema.
Portafolio Web Profesional-imagen4
La vista detallada de cada proyecto adopta la interfaz clásica de Wikipedia. Ofrece una maquetación enfocada en la lectura de larga duración con tablas de contenido flotantes, barra lateral de configuración (Apariencia: tamaño de texto, ancho de contenedor y temas Claro/Oscuro), infoboxes con metadatos del proyecto y accesos directos a GitHub o la web en vivo.
Maquetación Legible y Controles de Apariencia
El módulo de lectura Codepedia recrea la maquetación de Wikipedia para presentar la arquitectura, problemas resueltos y manuales de proyectos de manera estructurada. Incluye herramientas de accesibilidad para personalizar la interfaz en tiempo real según la preferencia del usuario.
Barra de herramientas para ajustar el tamaño de fuente, ancho de lectura y esquemas de color (Claro / Oscuro / Automático).
Tablas de contenido dinámicas e infoboxes con metadatos técnicos y enlaces a repositorios.
Diseño adaptable (responsive) diseñado para facilitar la lectura técnica fluida desde cualquier dispositivo.
Portafolio Web Profesional-imagen5
Estrategia de Renderizado Server-Side (SSR) e Hidratación Eficiente
Optimización del rendimiento general de la plataforma mediante la precarga de datos directamente en la capa del servidor.
Reducción de Latencia y Componentes de Servidor
Mediante el uso de React Server Components (RSC), la plataforma consulta la base de datos y entrega el contenido renderizado directamente desde el servidor, eliminando pantallas de carga en blanco (spinners). Los componentes cliente (Client Components) se mantuvieron en módulos aislados únicamente para capas estrictamente interactivas como editores de texto, controles de apariencia y formularios de administración.
Arquitectura de Rendimiento & Flujo de Datos
Para maximizar la eficiencia en la entrega de contenido y garantizar tiempos de respuesta óptimos, se estructuró un flujo de renderizado en tres etapas clave:
Fetch a Nivel de Servidor (Server-Side Data Fetching): Las consultas de proyectos, certificaciones y contenidos de la base de datos se ejecutan directamente en el servidor utilizando Prisma dentro de los Server Components. Esto evita múltiples viajes de ida y vuelta (waterfalls) entre el navegador y el backend.
Hidratación Selectiva & Bundle Size Mínimo: Al enviar un HTML completamente estructurado y listo para pintar, el navegador solo descarga e hidrata el código JavaScript estrictamente necesario para las partes interactivas (como el editor TipTap o la barra de temas).
Caching y Revalidación Inteligente: La arquitectura aprovecha el sistema de almacenamiento en caché nativo de Next.js para invalidar la caché bajo demanda cuando se crea o actualiza un recurso desde el panel de control, garantizando datos siempre frescos sin penalizar la velocidad de lectura.
Motor de Documentación Dinámico con TipTap y Prisma ORM
Sistema de creación y edición de documentación técnica enriquecida integrado directamente en la plataforma.
Edición Rich-Text y Persistencia Estructurada
Integración del editor headless TipTap para permitir la creación de bloques de documentación en tiempo real. Los documentos se transforman y persisten tanto en JSON (para mantener el estado editable dentro del panel de administración) como en HTML optimizado (para un renderizado server-side ultrarrápido) dentro de una base de datos PostgreSQL gestionada mediante Prisma ORM.
Profundización Técnica & Ciclo de Vida del Contenido
Para ofrecer una experiencia de redacción técnica fluida sin perder la integridad ni el rendimiento de los datos, se diseñó un flujo de trabajo estructurado en tres niveles:
Extensibilidad Headless con TipTap (ProseMirror): Al ser un editor sin estilos predefinidos (headless), se personalizaron las extensiones nativas para incluir resaltado de sintaxis en bloques de código, tablas complejas, citas técnicas, listas de tareas e incrustación de medios.
Estrategia de Persistencia Dual (JSON/HTML): Cada guardado en la base de datos genera y almacena simultáneamente el Árbol del Sintaxis Abstracta (AST en JSON) para permitir reediciones exactas, y la cadena HTML limpia compilada que consume directamente la vista "Codepedia" durante el SSR.
Carga de Archivos Multimedia Serverless: La inserción de imágenes o esquemas de arquitectura dentro del editor intercepta el evento de upload, procesa el archivo mediante Vercel Blob y devuelve una URL global optimizada distribuida por CDN.
Sistema de Autenticación Híbrido, Biometría e Integración JWT
Diseñado para ofrecer una experiencia de acceso rápida y con altos estándares de seguridad en entornos web y dispositivos móviles iOS.
Seguridad Perimetral y Manejo de Tokens en Edge Runtime
La autenticación combina un flujo tradicional de credenciales con soporte de autenticación biométrica (Face ID / Touch ID) para la experiencia móvil/web en iOS. Para el manejo de sesiones se utilizó la librería jose, optimizada para ejecutarse sobre Edge Runtime sin depender del runtime pesado ni de los módulos nativos de Node.js, almacenando los tokens JWT en cookies con atributos HttpOnly, Secure y SameSite=Strict.
Implementación de un Middleware actuando como Firewall Proxy para la validación de tokens en milisegundos antes del renderizado de componentes.
Firma e inspección ligera de tokens JWT mediante la librería jose en entornos distribuidos.
Reducción de la fricción de inicio de sesión mediante la API WebAuthn / LocalAuthentication para biometría nativa.
Apariencia