Liza Makeup
Luxury editorial digital presence and interactive portfolio for an East Java MUA business, engineered with Astro v5, GSAP motion, and WhatsApp booking.
System Overview
Independent beauty and bridal professionals often rely solely on Instagram, where valuable portfolio work is lost in infinite feeds, pricing transparency is difficult to maintain, and local Google search visibility is virtually zero.
Liza Makeup required a bespoke digital home that reflected the elegance of bridal artistry, displayed high-resolution photography without sluggish page loads, and guided prospective clients smoothly from visual inspiration to date consultation.
Architectural & Technical Challenges
Bridal imagery requires crisp visual fidelity, yet image-heavy portfolios often suffer from severe performance penalties and mobile layout shifts. The technical challenge was achieving top-tier visual elegance and complex typography animations while maintaining near-perfect mobile performance scores and strict local SEO visibility.
Key Architectural Decisions
Static HTML generation via Astro islands
Leveraged Astro's zero-JS-by-default architecture to pre-render every page element statically, ensuring sub-second First Contentful Paint even on constrained cellular networks.
Synchronized Lenis and GSAP animation ticker
Bound Lenis smooth scroll callbacks directly into the GSAP ticker loop, eliminating micro-stutters between typography line masks and viewport scroll position.
Optimized WebP asset pipeline with lightbox zoom
Converted all portfolio photography into responsive WebP formats with native lazy-loading and custom full-screen lightbox preview.
Engineering Contributions
Visual Direction & Brand Identity
Established the luxury editorial aesthetic combining warm champagne, soft nude, and charcoal with refined typography (Playfair Display and Montserrat).
Astro v5 Frontend Architecture
Engineered the site with Astro v5 and Tailwind CSS, outputting optimized static HTML with zero unnecessary client-side JavaScript.
Motion Choreography (GSAP & Lenis)
Implemented scroll-triggered text splitting, subtle grain overlays, smooth parallax sections, and integrated Lenis smooth scroll with GSAP's ticker loop.
Structured Data SEO & Conversion Flow
Authored JSON-LD Schema.org BeautySalon structured metadata for Google Search and built seamless WhatsApp booking integration with pre-filled consultation details.
Technologies & Core Stack
Astro • Tailwind CSS • GSAP • Lenis • SEO • Creative Dev