Hacienda Santa Inés
Client: Hacienda Santa Inés / hired via Toptal.
Role: Frontend Developer.
Timeline: 2 weeks.
Tech Stack: Astro, Tailwind CSS, Figma, Netlify.
Hacienda Santa Inés is a historic Mexican treasure, where love, tradition, and timeless elegance come together. its walls have witnessed defining moments in Mexico’s history from the Spanish viceroyalty to the War of Independence and the Revolution. This rich past lives on in every stone, making it a truly unique and meaningful place to experience.
Goals
- Translate a Figma design into a performant, modern static site.
- Have a great mobile experience and loading times.
- Launch quickly for upcoming marketing campaigns.
- Create a flexible foundation for future content updates.
Approach
- Rapid Prototyping: Worked directly with the Figma file to translate layouts and components into reusable Astro components.
- Performance-First Build: Leveraged Astro’s partial hydration and static generation to ensure quick load times and low overhead.
- Tailwind CSS: Used utility-first styling for rapid development while maintaining design accuracy.
- Deployment: Site was deployed to Netlify with simple, scalable CI setup.
- Responsive Design: Special attention to mobile optimization, given the visual nature of the location and its services.
Challenges
- Tight deadline: The entire build—from design handoff to production deployment—was completed in two weeks.
- Image-heavy content: Required performance tuning via image optimization and lazy loading techniques.
Results
- Fully deployed static site in just 2 weeks.
- Mobile-first experience with fast page loads and clear navigation.
- Visual identity aligned with the estate’s brand and luxury feel.
- Client-ready for upcoming events and marketing campaigns.