PNJ Export: Website WordPress & Figma To Code

"A luxury digital showroom for Vietnam's biggest jewelry exporter, turned from design drawings into a fast, beautiful website that loads in the blink of an eye worldwide."

1. The Problem (Why I Built This)

International B2B jewelry clients expect world-class visual presentation, but the existing platform had major challenges:

• Heavy High-Res Images: High-resolution jewelry photos caused long loading times and high bounce rates for overseas buyers.
• Design Fidelity: Complex Figma design grids and subtle typography needed to match the brand's luxury identity with pixel-level precision.
• Mobile Responsiveness: B2B partners viewing catalogs on mobile devices encountered awkward layout shifts.

2. How I Solved It (Under The Hood)

I translated Figma designs into clean, high-performance code:

• Pixel-Perfect Figma to Code: Handcrafted custom responsive layouts with modern CSS and Tailwind, matching typography and spacing exactly.
• Next-Gen Image Pipeline: Converted assets to lightweight WebP formats with native lazy-loading and blur placeholders, slashing page weight by 70%.
• Clean WordPress Architecture: Built modular custom templates without bloated plugins, keeping page execution lean and secure.
• Global Technical SEO: Configured OpenGraph tags and Schema.org structured data to ensure high visibility on Google search.

3. Key Takeaway & Results

• Design Match: 100% pixel-perfect fidelity with original Figma designs.
• Global Performance: Sub-second page loads for international clients across the US and Europe.