Newport Mansions – WordPress Theme Development & Frontend Architecture

Led frontend development for the Newport Mansions website, architecting new layouts and experiences on a custom WordPress theme built with Timber and Twig. The project involved collaborating with design teams to bring a modernized vision, originally created in Adobe XD, into a performant, scalable, and easily maintainable codebase.

Highlights of my contributions:

• Homepage Redesign with Vimeo Integration:
  Transformed the homepage from a traditional image carousel to a dynamic video background powered by Vimeo, improving load times and performance by offloading video hosting. Integrated the new layout using a reusable Twig structure, optimizing for both maintainability and performance.
• Interactive UI with Slick Slider & SVG Animation:
  Built a custom carousel using Slick Slider and developed a fully redesigned “Plan a Visit” section. Each mansion was represented as a tile with custom SVG backgrounds and animated hover states, all powered via ACF to allow non-technical admins full control over the content.
• Modular Mansion Templates with Flexible Layouts:
  Redesigned the single mansion template from the ground up. Implemented custom carousels with Slick Slider and Lightbox integration for viewing images and videos in modal format. Built in the flexibility to toggle between legacy and new templates on a per-page basis, allowing for a phased rollout by the client.
• Advanced ACF Integration:
  Managed all content using Advanced Custom Fields, including flexible content blocks and field groups tailored for dynamic media elements, galleries, and mansion-specific metadata. Created custom field logic to support conditional rendering and enhanced content curation across templates.
• Ongoing Maintenance & Feature Enhancements:
  Regularly handled updates, bug fixes, and performance improvements across the codebase. Provided recommendations on caching strategies, plugin audits, and general site hardening to ensure long-term stability and maintainability.
  

Tech Stack: PHP, Timber/Twig, Advanced Custom Fields, Slick Slider, JavaScript, SCSS, Git, Webpack, WordPress, Adobe XD