Manuel Albarracín — Sitio Web Jurídico

Como parte de mi trabajo independiente, desarrollé la plataforma web profesional y el portafolio digital para el abogado Manuel Albarracín. El sector jurídico exige una presencia digital impecable que proyecte confianza, seriedad y prestigio desde el primer segundo. El desafío principal consistió en diseñar una interfaz visualmente elegante, bilingüe y con animaciones de alta calidad, garantizando tiempos de carga ultrarrápidos en dispositivos móviles y con una infraestructura estática libre de costos de mantenimiento.

1. Arquitectura del Sitio (Astro v7 + Tailwind CSS v4)

El proyecto está construido bajo una arquitectura de Generación de Sitios Estáticos (SSG) utilizando Astro v7 y Tailwind CSS v4. Al procesar todo el HTML en el servidor durante la compilación, el navegador del usuario final recibe 0 bytes de JavaScript por defecto, asegurando un rendimiento impecable en las métricas de Core Web Vitals. Para la interactividad responsiva y el control del cliente, se utilizó código en JavaScript y TypeScript (sin necesidad de cargar frameworks pesados en el cliente), procesado por Vite v8 para obtener tiempos de build del sitio de menos de 600 ms.

2. Estructura del Proyecto

La organización del código fuente se adapta de forma estricta al estándar nativo de Astro, separando limpiamente la capa de componentes, las páginas físicas de enrutamiento internacionalizado (i18n) y los recursos globales:

├── astro.config.mjs          # Configuración e integraciones (Vite + Tailwind v4)
├── package.json              # Dependencias optimizadas sin React
├── public/                   # Archivos estáticos directos (Favicons y PDFs de CVs)
│   └── justice-scale.png     # Gráfico optimizado de la balanza
└── src/
    ├── layouts/
    │   └── Layout.astro      # Plantilla base (metadatos SEO y scripts de control)
    ├── pages/
    │   ├── index.astro       # Enrutador e Inicio en Español
    │   ├── cv.astro          # Hoja de vida online en Español
    │   ├── redes.astro       # Landing de enlaces rápidos en Español
    │   └── en/
    │       ├── index.astro   # Inicio en Inglés
    │       ├── cv.astro      # Hoja de vida online en Inglés
    │       └── redes.astro   # Landing de enlaces rápidos en Inglés
    ├── components/
    │   ├── Navbar.astro      # Cabecera responsiva y control de tema en JavaScript y TypeScript
    │   ├── Hero.astro        # Banner principal de bienvenida
    │   ├── About.astro       # Sección "Sobre Mí" y pilares profesionales
    │   ├── Experience.astro  # Línea de tiempo interactiva
    │   ├── Education.astro   # Bloques de formación académica
    │   ├── Skills.astro      # Barras de progreso de competencias y lenguajes
    │   ├── Contact.astro     # Formulario de contacto integrado
    │   ├── CvPage.astro      # Vista integrada para la Hoja de Vida
    │   └── RedesPage.astro   # Vista unificada de enlaces rápidos
    ├── index.css             # Estilos globales y variables de temas
    └── translations.js       # Diccionario centralizado de traducción

3. Funcionalidades Clave e Infraestructura

Para ofrecer una experiencia de usuario fluida y libre de mantenimiento técnico, implementé las siguientes soluciones integradas en la infraestructura estática:

Enrutamiento Estático Bilingüe (i18n): Al compilar rutas independientes para español (/) e inglés (/en/), permito a Google indexar y posicionar de forma independiente ambos idiomas sin penalizaciones por contenido duplicado.
Redirección de Idioma Automatizada: El layout base implementa un script que comprueba el idioma preferido en navigator.languages. Si es inglés y no hay una preferencia guardada, redirige al usuario a /en/, respetando la autonomía del usuario si cambia de idioma manualmente.
Sincronización Bidireccional de Temas: El conmutador de modo claro y oscuro de Navbar.astro sincroniza los estados del menú de escritorio y el menú lateral móvil en tiempo real a través de código en JavaScript y TypeScript, almacenando las preferencias en localStorage.
Script de Bloqueo Anti-FOUC: Colocado al inicio del <head>, este script síncrono evalúa el tema y aplica la clase .dark al elemento <html> antes de que se inicie el renderizado visual del DOM, evitando destellos blancos en la pantalla.

4. Estructuración y Modularidad en Tres Páginas Clave

La arquitectura del contenido se distribuye de forma modular a través de componentes desacoplados:

Página de Inicio (Landing Page): Actúa como carta de presentación profesional del abogado, destacando sus pilares de servicio (About.astro) y una línea de tiempo interactiva con su trayectoria (Experience.astro).
Hoja de Vida Online (CV): Un espacio interactivo unificado mediante el componente CvPage.astro que presenta la trayectoria y competencias profesionales del abogado de forma estructurada.
Enlaces Rápidos (Linktree-style): Implementado en el componente RedesPage.astro, sirve como una landing page optimizada para dispositivos móviles y redes sociales, permitiendo un direccionamiento directo a canales clave de contacto.

5. Optimización Crítica de Recursos y SEO Técnico

La optimización de activos y metadatos fue fundamental para maximizar la velocidad y el alcance orgánico:

Optimización LCP: El logotipo principal (un emblema de la balanza de la justicia) pesaba inicialmente 816 KB. Tras realizar una compresión inteligente y convertirlo al formato moderno WebP, reduje su peso a menos de 50 KB (un ahorro de más del 90%) sin ninguna degradación visual.
SEO y JSON-LD: Implementé metadatos estructurados utilizando el esquema de tipo LegalService / Attorney en el <head>, proporcionando a los buscadores detalles específicos sobre el abogado y sus servicios profesionales para habilitar fragmentos enriquecidos (rich snippets) en los resultados de búsqueda.

6. Despliegue Automatizado (CI/CD) con Vercel

Para simplificar el mantenimiento y garantizar la máxima disponibilidad, integré un flujo de despliegue continuo (CI/CD) conectado a un repositorio de Git en Vercel. Cada modificación en la base de código gatilla un build automatizado que genera y distribuye la versión estática final en cuestión de segundos a través de una red CDN global, garantizando tiempos de respuesta ultrarrápidos y redundancia global.

Manuel Albarracín — Plataforma Jurídica

malbarracin.com