Santiago Ramirez

Tag: WordPress

  • Ánima Village — From Webflow to a Bilingual Headless Stack

    Ánima Village — From Webflow to a Bilingual Headless Stack

    Project Overview:

    Migration of Ánima Village — a luxury open-air retail, gastronomy, art and wellness destination in Los Cabos, Mexico — from Webflow to a fully headless architecture: WordPress as the content management system, exposed through WPGraphQL, with a Next.js (App Router) frontend.
    The entire site is bilingual (Spanish / English).

    The goal was to give the client full ownership of the frontend and a cleaner bilingual content workflow, with better performance and SEO — while preserving the existing visual design pixel for pixel and migrating a large amount of live CMS content without losing search rankings.

    The Challenge:

    The site lived entirely in Webflow. As the catalog of brands, events and programming grew, the team needed more control than a visual builder allows — custom components, third-party integrations, and a bilingual model that didn’t fight the tooling — plus faster load times and full control over technical SEO. The migration had to keep the design identical, keep every piece of content bilingual (ES/EN), move dozens of CMS records across brands, events and news, and stand up a new art-program section — all without breaking existing URLs or SEO.

    Key Features:

    • Bilingual headless architecture. WordPress + WPGraphQL on the backend; Next.js (App Router) on the frontend with next-intl for /es and /en routing. Content translations are handled with WP Multilang and requested per locale, with a lightweight frontend parser to resolve the few fields the plugin didn’t expose through GraphQL.
    • Reusable content model. A standalone WordPress plugin registers the custom post types (brands, events, deals), their ACF fields and taxonomies, and exposes them all to WPGraphQL — deliberately decoupled from the theme so the same content model is portable to other retail/destination projects.
    • Automated, re-runnable content migration. Idempotent WP-CLI import scripts pulled the brand directory, 37 bilingual events and 6 bilingual news posts straight from the Webflow CMS, downloaded every image into the WordPress media library, mapped ACF fields, taxonomies and event dates, and wrote bilingual content using WP Multilang tags — all safe to re-run without creating duplicates.
    • Faithful page migration. Marketing pages (home, about, brands, and the Arte Abierto art program) were rebuilt in React to mirror the original Webflow design, including responsive behavior and hand-tuned mobile details.
    • Performance & SEO. Static generation with Incremental Static Regeneration and on-demand revalidation (WordPress notifies a Next.js route the moment content changes), plus hreflang, per-locale metadata and sitemaps.

    Technologies Used:

    • Front-end: Next.js (App Router), React, TypeScript, next-intl, Tailwind CSS, shadcn/ui
    • Back-end / CMS: WordPress, WPGraphQL, ACF Pro, WP Multilang, a custom CPT/taxonomy plugin
    • Tooling & infra: WP-CLI migration scripts, the Webflow API for data export, Vercel (frontend), managed WordPress (backend)

    Outcome:

    A fully bilingual, headless site: the content team edits everything in a familiar WordPress admin, while visitors get a fast, SEO-friendly Next.js frontend. The project also produced two reusable assets — a portable “mall” content-model plugin and a repeatable migration toolkit — that shorten the path for future retail and destination builds.

    Source code:

  • FamilyAssets.com – 2023

    FamilyAssets.com – 2023

    Project Overview:

    Revamp and optimization of FamilyAssets.com, a leading online resource helping families connect with care providers and navigate elder care options. The primary objective was to enhance user experience, improve accessibility, and streamline the information architecture to support the site’s vast amount of data.

    Key Features:

    • Redesigned User Interface: Simplified navigation and modernized design to improve readability and engagement.

    • Advanced Search and Filtering: Implemented a robust search system to help users quickly find care providers and resources tailored to their needs.

    • Performance Optimization: Reduced page load times and improved site performance for a seamless browsing experience.

    • Content Management: Integrated WordPress CMS with WPGraphQL to streamline the management of extensive resources and provider profiles.

    Technologies Used:

    • Front-end: React, Tailwind CSS

    • Back-end: Node.js, WordPress CMS with custom integrations

    • Additional Tools: Google Maps API for location-based search

  • Healthination – 2019 -2022

    Healthination – 2019 -2022

    Project Overview:

    Ongoing development and maintenance of HealthiNation, a platform delivering high-quality health and wellness videos. Collaborated with cross-functional teams to enhance platform scalability and ensure content availability for millions of users.

    Key Features:

    • Video Streaming Optimization: Upgraded the video delivery system to improve playback performance and reduce buffering.

    • CMS Integration: Leveraged WordPress for managing video content, with custom APIs for seamless integration.

    • Mobile-First Design: Ensured all features were fully optimized for mobile devices.

    Technologies Used:

    • Front-end: Custom WP theme, CSS

    • Back-end: WordPress, PHP

    • Video Hosting: JW Player

    • Additional Tools: Google Ads integration for revenue generation

  • Epic Elevator – 2019

    Epic Elevator – 2019

    Project Overview:

    Developed the official website for Epic Elevator, a leading provider of innovative elevator solutions. The project aimed to create a professional and informative site showcasing the company’s services and products.

    Key Features:

    • Product Showcase: Designed an interactive catalog to highlight various elevator models and their features.

    • Lead Generation Forms: Integrated custom contact and inquiry forms to capture leads efficiently.

    • SEO Optimization: Enhanced the site structure and metadata to improve search engine visibility.

    • Responsive Design: Ensured a polished and functional user experience across all devices.

    Technologies Used:

    • Front-end: HTML5, CSS3, JavaScript, Custom WP Theme

    • Back-end: PHP, WordPress CMS

    • Additional Tools: Elementor for dynamic page building

  • THE RIVER CAFE – 2018

    THE RIVER CAFE – 2018

    The River Café Website Redesign (2018)

    This project involved the complete redesign and redevelopment of the website for The River Café, an iconic restaurant known for its waterfront dining experience. The goal was to create a visually stunning and highly functional website that captured the restaurant’s elegance and provided an excellent user experience for visitors.

    Key Features:

    • Responsive Design: Optimized for all devices, ensuring a seamless experience on desktops, tablets, and smartphones.

    • Interactive Menu: A beautifully designed menu section with high-quality images and detailed descriptions of dishes.

    • Reservation System Integration: Enabled users to easily book tables through an intuitive online reservation system.

    • Dynamic Content Management: Built on WordPress to allow the client to easily update content, such as seasonal menus and special events.

    • SEO Optimization: Implemented best practices to improve the website’s visibility on search engines.

    Technologies Used:

    • Front-end: HTML5, CSS3, JavaScript, jQuery

    • Back-end: PHP with WordPress CMS

    • Additional Tools: WPGraphQL for advanced content querying and integration.

    Outcome:

    The new website successfully enhanced The River Café’s online presence, driving increased reservations and providing visitors with an engaging preview of the dining experience. The design has stood the test of time, reflecting the café’s elegance and charm.

    https://rivercafe.com/