Back to projects

Manuel Albarracín — Legal Website

High-performance professional web platform for attorney Manuel Albarracín. Built with Astro and Tailwind CSS v4, focusing on extreme optimization, i18n, and premium aesthetics.

Astro Tailwind CSS v4 SEO TypeScript CI/CD Vercel

As part of my freelance work, I developed the professional web platform and digital portfolio for attorney Manuel Albarracín. The legal sector demands an impeccable digital presence that projects trust, seriousness, and prestige from the very first second. The main challenge was to design a visually elegant, bilingual interface with high-quality animations, while guaranteeing ultra-fast loading times on mobile devices and a static infrastructure with zero maintenance costs.

1. Site Architecture (Astro v7 + Tailwind CSS v4)

The project is built under a Static Site Generation (SSG) architecture using Astro v7 and Tailwind CSS v4. By rendering all HTML on the server during build time, the final user’s browser receives 0 bytes of JavaScript by default, ensuring flawless Core Web Vitals performance. For responsive interactivity and client-side control, lightweight code in JavaScript and TypeScript was used (without the need to load heavy client-side frameworks), processed by Vite v8 to achieve site build times under 600 ms.

2. Project Structure

The source code organization strictly follows Astro’s native standard, cleanly separating components, physical internationalized routing (i18n) pages, and global assets:

├── astro.config.mjs          # Integrations configuration (Vite + Tailwind v4)
├── package.json              # Optimized dependencies without React
├── public/                   # Static assets (Favicons and CV PDFs)
│   └── justice-scale.png     # Optimized scale graphic
└── src/
    ├── layouts/
    │   └── Layout.astro      # Base template (SEO metadata and control scripts)
    ├── pages/
    │   ├── index.astro       # Spanish Router & Homepage
    │   ├── cv.astro          # Spanish Online Resume
    │   ├── redes.astro       # Spanish Quick Links Landing
    │   └── en/
    │       ├── index.astro   # English Homepage
    │       ├── cv.astro      # English Online Resume
    │       └── redes.astro   # English Quick Links Landing
    ├── components/
    │   ├── Navbar.astro      # Responsive header with JavaScript and TypeScript switcher
    │   ├── Hero.astro        # Main welcome banner
    │   ├── About.astro       # About Me section and professional pillars
    │   ├── Experience.astro  # Interactive timeline
    │   ├── Education.astro   # Academic background cards
    │   ├── Skills.astro      # Skills and languages progress bars
    │   ├── Contact.astro     # Integrated contact form
    │   ├── CvPage.astro      # Unified view for the online Resume
    │   └── RedesPage.astro   # Unified view for the quick links landing
    ├── index.css             # Global styles and theme CSS variables
    └── translations.js       # Central translation dictionary

3. Key Features & Infrastructure

To offer a seamless and maintenance-free user experience, I implemented the following integrated solutions in the static infrastructure:

  • Static Bilingual Routing (i18n): Compiling independent paths for Spanish (/) and English (/en/) allows Google to index and position both languages independently without duplicate content penalties.
  • Automated Language Redirects: The base layout runs an optimized script checking navigator.languages. If English is preferred and no preference is saved, it automatically redirects the user to /en/, respecting user choice if changed manually.
  • Bidirectional Theme Sync: The dark/light toggler in Navbar.astro synchronizes desktop and mobile menu states in real-time using JavaScript and TypeScript code, storing preferences in localStorage.
  • Anti-FOUC Blocking Script: Placed at the top of the <head>, this synchronous inline script evaluates the theme and applies the .dark class to the <html> element before DOM rendering begins, preventing white screen flashes.

4. Structuring & Modularity across Three Key Pages

Content architecture is distributed in a modular way using decoupled components:

  • Homepage (Landing Page): Acts as the lawyer’s professional business card, highlighting his service pillars (About.astro) and an interactive timeline of his career (Experience.astro).
  • Online Resume (CV): An interactive space unified by the CvPage.astro component, presenting the lawyer’s professional background and competencies in a structured manner.
  • Quick Links (Linktree-style): Implemented in the RedesPage.astro component, it serves as a landing page optimized for mobile devices and social networks, allowing direct routing to key contact channels.

5. Asset Optimization & Technical SEO

Optimizing assets and metadata was fundamental to maximize speed and organic reach:

  • LCP Optimization: The main hero balance scale graphic initially weighed 816 KB. Through intelligent compression and conversion to the modern WebP format, I reduced its size to under 50 KB (a savings of over 90%) with no visual degradation.
  • SEO & JSON-LD: I implemented structured metadata using the LegalService / Attorney schema in the <head>, providing search engines with specific details about the attorney and his professional services to enable rich snippets in search results.

6. Automated Deployment (CI/CD) with Vercel

To simplify maintenance and ensure maximum availability, I integrated a continuous deployment (CI/CD) pipeline connected to a Git repository on Vercel. Every change in the codebase triggers an automated build that generates and distributes the final static version in seconds across a global CDN network, ensuring ultra-fast response times and global redundancy.

Manuel Albarracín — Legal Website

malbarracin.com