Remasterización del portfolio alejandroperellon.es

Contexto

Estado inicial

La web tenía navegación dispersa: muchas secciones (desarrollo, administración, ideas de blog que no siguieron) con solapamiento y rutas que no contaban una sola historia. El tono comercial se mezclaba con lo que debe ser un portfolio personal. Había páginas poco alineadas entre sí y demos (por ejemplo de automatización) con más superficie expuesta de la conveniente en un sitio personal. Los estilos y archivos tampoco estaban bien acotados respecto a lo que realmente se publica.

Problema

Problemas detectados

• Demasiadas rutas e ideas duplicadas entre URLs: cuesta orientarse y cuesta mantener enlaces y redirecciones.
• Textos desalineados con el objetivo del sitio: se mezclaba tono de venta de servicios con portfolio personal.
• Demasiada superficie expuesta: partes públicas y demos que aumentaban riesgo sin aportar al mensaje principal.
• SEO irregular: faltaba un criterio estable de URLs canónicas, mapa del sitio y metadatos coherentes por tipo de página.
• Estructura mejorable: no ayudaba a comparar casos ni a separar el detalle en profundidad (notas) de la presentación general.

Qué resolvía el sistema o proyecto

Un portfolio claro para quien evalúa perfiles y para perfiles técnicos: pocas secciones con nombres entendibles (inicio, perfil, experiencia, proyectos, contacto, aviso legal y notas), menos URLs que mantener, más claridad sobre qué leer primero y un tono acorde con un portfolio personal. En la operación diaria, buscaba publicar y mantener con control: estilos generados aparte de lo que ve el visitante, archivos ordenados y cambios que se puedan revisar y deshacer sin sorpresas.

Mi rol

Autor del análisis, de los textos principales, de la estructura del sitio (qué va en cada sección y cómo se enlaza con proyectos y notas) y de la puesta en marcha en PHP, HTML y CSS con Tailwind generado en un entorno de trabajo acotado. Prioricé visión de conjunto frente a parches sueltos: cada bloque tiene su sitio en el mapa del sitio y en el mensaje que recibe quien valora un encaje profesional.

Stack

PHP en servidor con una plantilla por página, Tailwind CSS generado en compilación (no desde CDN en producción), JavaScript reducido al formulario de contacto y al aviso de cookies, fuentes alojadas en el propio sitio; Apache para redirecciones y cabeceras (.htaccess).

Decisiones técnicas

Arquitectura y rutas

• Mapa de secciones reducido y patrones repetibles (misma lógica de lectura en fichas de proyecto).
• Redirecciones 301 desde URLs antiguas a slugs canónicos para no dejar huérfanos enlaces externos.
• Notas en apartado propio para decisiones puntuales sin ensuciar la presentación general.

Textos y presentación

• Reescritura orientada a quien busca talento, sin confundir portfolio personal con página de servicios.
• Paleta y tipografía consistentes y jerarquía clara: lo visual refuerza legibilidad, no sustituye al mensaje.
• Componentes reutilizables (migas, fichas, bloques de caso) para mantener coste de cambio bajo.

SEO y descubrimiento

• URLs limpias, URL canónica por página, mapa del sitio y archivo robots que dejan fuera lo que no debe indexarse.
• Metadatos enriquecidos para buscadores, solo donde aportan y sin inventar datos.

Estilos, archivos y mantenimiento

• Generación de CSS separada de lo que se publica en la web; archivos y dependencias alineados con el objetivo del sitio.

Seguridad, contacto y privacidad

• Mayor control: cierre o restricción de accesos públicos que no aportaban al sitio.
• Formulario de contacto con protección antispam, límites de envío y remitente coherente con el dominio; política de seguridad de contenidos (CSP) primero en modo informe para validar.
• Privacidad razonable: aviso legal y cookies claros; sin publicar datos sensibles, rutas internas ni detalles del alojamiento.

Restricciones o NDA

Sitio personal: no hay cliente externo. Límites de tiempo y de alojamiento; no publico credenciales ni configuración sensible.

Resultado o aprendizaje

• La web personal también es un producto: merece mapa claro, criterio de cambio y consciencia de riesgo.
• Simplificar mejora más que añadir: menos rutas y menos superficie suelen reducir mantenimiento y confusión.
• Contenido y arquitectura de información pesan tanto como lo visual para que el sitio cumpla su objetivo frente a quien lee con prisa.