Fairmont Polymers

Fairmont Polymers necesitaba renovar su presencia digital y disponer de una página web más moderna, clara y fácil de mantener.

El proyecto consistió en el diseño y desarrollo completo de una nueva plataforma corporativa, construida con Nuxt y pensada para organizar toda la información de la empresa: productos, aplicaciones, soluciones, casos de éxito y proyectos realizados.

Además de desarrollar la parte visual y técnica, se creó un sistema de gestión de contenidos que permite al cliente modificar textos, imágenes y fichas de proyectos sin necesidad de acceder directamente al código.

Concepto

La web se diseñó alrededor de tres objetivos principales:

• Presentar los productos y materiales de Fairmont de forma clara.
• Mostrar sus aplicaciones mediante ejemplos y proyectos reales.
• Facilitar la actualización del contenido por parte del cliente.

El resultado es una plataforma corporativa que combina información técnica, contenido comercial y una identidad visual moderna.

Arquitectura de contenidos

La información de la web se organizó en diferentes colecciones:

• Productos
• Aplicaciones
• Soluciones
• Casos de éxito
• Proyectos
• Páginas corporativas y legales
• Contenido de la página de inicio

Esta estructura permite mantener el contenido ordenado y reutilizar componentes en diferentes secciones de la web.

Cada página está construida mediante bloques independientes con campos editables, como títulos, descripciones, botones, imágenes y galerías.

Diseño y experiencia de usuario

La interfaz se desarrolló con una estética limpia y contemporánea, utilizando el color como elemento principal de identificación.

La navegación permite acceder rápidamente a las áreas más importantes de la empresa:

• Productos
• Aplicaciones
• Proyectos
• Sobre Fairmont
• Contacto

La web incorpora composiciones visuales amplias, fotografías de proyectos, tipografías de gran formato y elementos de color relacionados con la identidad gráfica de Fairmont.

También se diseñaron versiones adaptadas para escritorio, tablet y móvil.

Desarrollo con Nuxt

La plataforma está desarrollada con:

• Nuxt 4
• Vue
• Nuxt Content
• Tailwind CSS
• Nuxt Studio
• Vercel
• GitHub Actions

Nuxt permite generar una web rápida, optimizada y escalable, mientras que Nuxt Content se utiliza para gestionar el contenido mediante archivos estructurados.

Gestión de contenidos

Uno de los objetivos más importantes del proyecto era permitir que el cliente pudiera modificar la web de forma autónoma.

Para ello se integró Nuxt Studio, desde donde es posible:

• Modificar textos de la página de inicio.
• Editar páginas existentes.
• Cambiar imágenes.
• Gestionar aplicaciones y soluciones.
• Añadir nuevos proyectos.
• Crear galerías de imágenes.
• Revisar los cambios antes de publicarlos.

El contenido está conectado con GitHub, por lo que cada modificación queda registrada y puede recuperarse si fuera necesario.

Sistema de publicación

Cuando el cliente publica un cambio desde el editor, el contenido se envía automáticamente al repositorio de GitHub.

A continuación, GitHub Actions ejecuta el proceso de compilación y despliegue en Vercel.

El flujo completo es:

Nuxt Studio → GitHub → GitHub Actions → Vercel → Web actualizada

Este sistema permite mantener el repositorio privado y publicar cambios sin necesidad de utilizar un plan colaborativo de Vercel.

Optimización y rendimiento

La web se desarrolló priorizando:

• Velocidad de carga
• Generación estática de páginas
• Optimización de imágenes
• Código reutilizable
• SEO técnico
• Sitemap
• Archivo robots
• Metadatos por página
• Diseño responsive

La arquitectura permite que el contenido se genere durante el proceso de despliegue, reduciendo el trabajo necesario en el servidor y mejorando el rendimiento general.

Retos

Algunos de los principales retos fueron:

• Crear una estructura de contenidos sencilla para el cliente.
• Adaptar Nuxt Studio a un repositorio privado.
• Resolver las limitaciones de colaboración de Vercel Hobby.
• Automatizar los despliegues mediante GitHub Actions.
• Mantener sincronizados GitHub, el editor y la versión publicada.
• Organizar proyectos e imágenes de forma escalable.
• Convertir contenido técnico en una experiencia visual clara.

Resultado

El resultado es una plataforma corporativa moderna, rápida y preparada para crecer.

Fairmont Polymers cuenta ahora con una web capaz de mostrar sus productos, aplicaciones y proyectos de forma profesional, mientras mantiene un sistema de edición accesible para el cliente.

El proyecto combina:

• Diseño UI/UX
• Desarrollo frontend
• Arquitectura de contenidos
• Automatización
• Gestión multimedia
• Documentación
• Despliegue continuo

Más que una página corporativa, se ha creado una herramienta digital preparada para acompañar la evolución de la empresa.

Conclusión

Fairmont Polymers representa un proyecto completo donde diseño, desarrollo y gestión de contenidos trabajan como un único sistema.

La plataforma no solo mejora la imagen digital de la empresa, sino que permite mantener la web actualizada de forma autónoma, segura y organizada.

Fairmont Polymers — Diseño, tecnología y contenido en una plataforma corporativa escalable.