NoorPlate: High-Performance Astro UI Slicing Project

Welcome to one of my featured portfolio projects! NoorPlate is a beautifully designed, high-performance restaurant landing page. This project demonstrates my expertise in transforming static designs into fully interactive, responsive, and blazingly fast web applications.

🚀 Live Website: noonplate.dimasaditya.net

Project Overview

In this project, the goal was to take a stunning design for a modern restaurant and bring it to life using Astro and Tailwind CSS. I focused heavily on ensuring that the final output was not just visually appealing, but also technically flawless.

A major priority was performance. I ensured that there was zero speed degradation, resulting in perfect Lighthouse and PageSpeed scores. The website loads instantly, providing an exceptional experience for users regardless of their device or network connection.

Key Highlights

• Pixel-Perfect UI Slicing: Translated intricate design details into clean, maintainable code.
• Astro Framework: Leveraged Astro’s zero-JS frontend architecture to ship minimal and fast HTML.
• Tailwind CSS: Utilized utility-first CSS for rapid styling, ensuring a fully responsive layout across all screen sizes.
• Image Optimization: All assets were strictly optimized to .webp format to drastically reduce payload sizes and improve load times.
• SEO & Performance: Achieved top-tier Lighthouse scores with meticulous attention to Core Web Vitals.

Performance Results

As performance was a primary focus, here are the PageSpeed Insights results for both Desktop and Mobile, demonstrating the blazing-fast load times:

PageSpeed Insights Desktop Score: 100/100, ensuring maximum speed and zero degradation.

PageSpeed Insights Mobile Score: 100/100, providing an exceptional experience across all devices.

Showcase

Here is a closer look at the final UI/UX developed for the NoorPlate project:

The beautifully crafted layout designed for maximum user engagement, fully responsive and interactive.

Conclusion

Building NoorPlate was an excellent opportunity to showcase the power of Astro for content-rich websites. By prioritizing performance and adhering to modern web development best practices, I created a web experience that is both delightful to look at and incredibly fast to navigate.