Arquitectura
Contenido concentrado en una sola página, recursos y reglas acumulados, y una estrategia de idioma que convivía con más de un enfoque.
Caso de estudio · Desarrollo web · Marca personal
Activo y en evolución
Portfolio profesional multipágina
Evolución de un portfolio estático hacia un sitio multipágina bilingüe, con identidad visual propia, navegación accesible y componentes interactivos desarrollados con tecnologías web nativas.
Contexto
Una base funcional que necesitaba integrarse
La base del proyecto ya reunía una página principal en español, una versión en inglés, secciones de perfil, capacidades, proyectos y contacto, además de CSS propio, JavaScript modular, tema oscuro y elementos animados.
La oportunidad no era reemplazarla sin motivo, sino convertir piezas existentes en una experiencia coherente. La revisión se enfocó en reducir inconsistencias técnicas, contenido provisional y comportamientos desincronizados.
Problema
Cinco frentes para estabilizar antes de crecer
La intervención agrupó los hallazgos para corregir la base sin perder las ideas que ya aportaban valor.
Funcionalidad
HTML residual, datos de contacto inconsistentes, un formulario externo sin configuración completa y una rueda tecnológica desincronizada.
Accesibilidad
La navegación móvil dependía de :target y necesitaba controles con estados, teclado y foco más claros.
Contenido
Mensajes profesionales genéricos o provisionales que no explicaban con precisión el enfoque de Alfredo.
Diseño
El efecto visual de la rueda existía, pero requería una relación más clara con la fotografía y con la jerarquía del hero.
Mi responsabilidad
Decisiones, implementación y validación
Alfredo participó en la definición de objetivos, la revisión del proyecto, las decisiones visuales y técnicas, el ajuste de HTML, CSS y JavaScript, la organización multipágina, la selección de contenido y la iteración del wheel.
También coordinó la validación de rutas, comportamiento responsive y navegación, priorizando cambios por etapas en lugar de una reescritura indiscriminada.
Las herramientas de inteligencia artificial se utilizaron para acelerar auditorías, proponer implementaciones y revisar el código. Las decisiones, restricciones, pruebas y aprobación final permanecieron bajo responsabilidad de Alfredo.
Restricciones
Ambición visual dentro de límites técnicos
- Mantener HTML, CSS y JavaScript nativo.
- No migrar a un framework ni reemplazar todo el proyecto sin justificación.
- Conservar hosting estático, español e inglés.
- Evitar acciones automáticas de Git y despliegue durante el proceso.
- Trabajar por etapas y validar antes de avanzar.
- Mantener rendimiento y accesibilidad pese a una dirección visual ambiciosa.
Proceso
De auditoría a una base preparada para crecer
Auditoría integral
Se revisaron estructura, contenido, enlaces, estilos y módulos para separar errores confirmados de mejoras posteriores.
Estabilización técnica
Se priorizaron rutas, comportamiento residual, etiquetas y dependencias antes de construir sobre la base.
Arquitectura multipágina
El contenido se distribuyó por secciones y el inglés se organizó dentro de
/en/, con unindex.htmlpor ruta.Navegación y tema
Se consolidaron enlaces reales entre documentos, menú móvil con teclado y una preferencia de tema persistente.
Nueva identidad visual
El hero pasó a concentrar la presentación profesional, con una paleta semántica y jerarquía visual más clara.
Wheel tridimensional
La órbita se dividió en capas posterior y frontal para integrar los iconos con la fotografía y sugerir profundidad.
Estrategia de marca personal
Inicio y Perfil se reorientaron hacia aplicaciones web, procesos, datos y experiencia de ingeniería.
Jerarquía de proyectos
La página de Proyectos pasó de catálogo de ejercicios a evidencia organizada por madurez y contexto.
Validación manual
Las revisiones de rutas, interacción, tamaños de pantalla y movimiento reducido orientan los ajustes antes de cada siguiente bloque.
Decisiones técnicas
Componentes simples, responsabilidades claras
Arquitectura multipágina
Carpetas por sección, inglés dentro de /en/, un documento por ruta y enlaces relativos compatibles con subdirectorios.
Idioma
Dos conjuntos de páginas reales. El selector navega al documento equivalente sin reemplazar el DOM de forma dinámica.
Navegación
Botón móvil real con aria-expanded, cierre con Escape, retorno de foco y aria-current para la sección actual.
Tema
data-theme, preferencia del sistema y persistencia de la elección explícita en localStorage.
Wheel
Capas posterior, fotografía y frontal. La posición angular determina visibilidad, escala, opacidad y rotación; se pausa con pestaña oculta y compone una alternativa estática con movimiento reducido.
CSS y JavaScript
Variables semánticas, componentes encapsulados y módulos por responsabilidad. Sin librerías de animación, WebGL ni desplazamiento artificial.
/projects//projects/portfolio//en/projects/portfolio/Evolución visual
Más narrativa, menos acumulación
La comparación describe una evolución de estructura y propósito; no simula capturas de versiones anteriores.
Antes
- Portfolio de una sola página.
- Contenido concentrado.
- Wheel como efecto independiente.
- Mensajes profesionales provisionales.
Después
- Sitio multipágina con jerarquía narrativa.
- Identidad visual clara en tema oscuro y claro.
- Hero protagonista y órbita integrada a la fotografía.
- Proyectos organizados por madurez y contenido más preciso.
Antes
/index.htmlContenido concentradoDespués
/Contenido distribuido por rutas/profile//capabilities//projects//services//contact/
/en/Rutas equivalentes en inglésResultado actual
Una base estática con espacio para documentar mejor
La estructura base reúne doce rutas estáticas de sección en español e inglés; este caso añade una ruta por idioma. La navegación es responsive, el tema persiste, la página de Proyectos está jerarquizada y el contenido principal está disponible directamente en HTML.
El sitio utiliza una arquitectura preparada para más casos de estudio, una identidad adaptable a ambos temas y una órbita tecnológica que trabaja con profundidad visual en lugar de limitarse a una fila de iconos.
Aprendizajes
La integración importa tanto como el código
Arquitectura
No todo código funcional está integrado correctamente; la estructura condiciona el mantenimiento.
Diseño
Los efectos visuales aportan más cuando tienen una función narrativa y no compiten con el contenido.
Accesibilidad
Los controles, sus estados y el teclado deben considerarse desde el inicio de la interacción.
Contenido e IA
El contenido profesional necesita evidencia. La IA aporta más valor cuando opera bajo restricciones y validación humana.
Próximos pasos
Profundizar donde ya existe evidencia
- Completar casos de estudio de proyectos autorizados.
- Actualizar Capacidades y Servicios.
- Preparar un CV orientado a desarrollo.
- Mejorar SEO internacional.
- Optimizar imágenes y fuentes.
- Validar rendimiento con métricas reales.
- Publicar proyectos aplicados cuando haya autorización.
Siguiente exploración