Moddie Website

The Project Overview Moddie is a premium modular home builder focused on modern families. The goal was to build a high-conversion, visually stunning landing page that mirrors the “factory-built, installed in one day” precision of the product. The project required a blend of architectural minimalism and advanced front-end functionality. Core Features & Solutions Custom Modular Range Selector: Built a bespoke, tabbed “House Selector” using HTML, CSS, and Vanilla JS. It features a standardized aspect-ratio carousel to prevent layout shifting and includes a custom lightbox gallery for high-resolution floorplan and interior viewing. Performance-Optimized Hero Section: Developed a full-screen video hero with great proportions. I engineered a custom mobile override that anchors content to the bottom of the viewport, ensuring the background video remains the focal point without being obscured by UI elements. Smart Branding Logic: Implemented a “Smart Header” that detects scroll depth to toggle between transparent and solid states, including a dynamic logo-swap system (white-to-black) to maintain perfect contrast at all times. Interactive Location Badge: Designed a compact, responsive Google Maps integration with a custom “Moddie” aesthetic. It features a grayscale-to-color hover transition to maintain the site’s monochrome palette while remaining functional. Lead Retention Strategy: Designed and coded a custom “Thank You” page with automated redirect logic. The page uses lead-retention links (Pricing/Range) to keep users engaged in the sales funnel even after form submission. Technical Toolkit Framework: Elementor (WordPress) with heavy Custom HTML/CSS/JS overrides. Languages: CSS3 (Flexbox/Grid), JavaScript (DOM Manipulation, Preloading), SVG. UX Focus: Mobile-first responsiveness, Layout Stability (CLS optimization), and fast-loading image preloading scripts. The Result A seamless, fast-loading digital experience that translates the luxury and efficiency of modular build