In Juba’s vibrant culinary scene, Amigos Restaurant carved out a niche with its unique fusion of local and international flavors. While their menu was a success, they needed a digital presence that matched the quality of their food and the warmth of their "cozy African vibes."
Inspired by the clean, visually-driven design of sites like La Barraca, the goal was to build a website that would serve as a true digital extension of the restaurant itself—a place that felt welcoming, artistic, and appetizing from the very first click.
Navigating New Technologies
This project was a significant learning opportunity. It was my first deep dive into Sass, and I had to quickly get up to speed with its powerful features like variables, mixins, and nested syntax. It was a challenge, but it ultimately led to much more organized and maintainable stylesheets.
Additionally, I made a deliberate choice to build the scroll animations from scratch using the native Intersection Observer API instead of relying on a third-party library. I wanted to understand the underlying browser technology, and this project was the perfect opportunity to do so. This resulted in a lightweight, high-performance solution for triggering animations as users scroll through the page.
The Challenge: An Adaptive Video Header
The initial plan for the homepage was a large hero video showcasing the restaurant's unique ambiance. However, the restaurant was undergoing renovations at the time, making it impossible to capture the intended atmosphere.
We pivoted. Instead of the space, we decided to feature the food. We filmed the creation of a classic pizza, a universally loved dish. The resulting four-minute video was beautiful but far too large for a website header; it would have severely impacted loading times.
The solution was two-fold:
Performance: I edited the video into six short, bite-sized clips, each highlighting a key moment in the pizza-making process.
Engagement: To keep the experience fresh, the website randomly selects and displays one of these six clips each time a user visits the homepage.
Share Project
Cooking Up a Digital Feast: Tales from the Amigos Website Project
Amigos Restaurant in Juba: Savor the blend of local and global flavors at a friendly spot where every meal is a celebration of community.
In Juba’s vibrant culinary scene, Amigos Restaurant carved out a niche with its unique fusion of local and international flavors. While their menu was a success, they needed a digital presence that matched the quality of their food and the warmth of their "cozy African vibes."
Inspired by the clean, visually-driven design of sites like La Barraca, the goal was to build a website that would serve as a true digital extension of the restaurant itself—a place that felt welcoming, artistic, and appetizing from the very first click.
Navigating New Technologies
This project was a significant learning opportunity. It was my first deep dive into Sass, and I had to quickly get up to speed with its powerful features like variables, mixins, and nested syntax. It was a challenge, but it ultimately led to much more organized and maintainable stylesheets.
Additionally, I made a deliberate choice to build the scroll animations from scratch using the native Intersection Observer API instead of relying on a third-party library. I wanted to understand the underlying browser technology, and this project was the perfect opportunity to do so. This resulted in a lightweight, high-performance solution for triggering animations as users scroll through the page.
The Challenge: An Adaptive Video Header
The initial plan for the homepage was a large hero video showcasing the restaurant's unique ambiance. However, the restaurant was undergoing renovations at the time, making it impossible to capture the intended atmosphere.
We pivoted. Instead of the space, we decided to feature the food. We filmed the creation of a classic pizza, a universally loved dish. The resulting four-minute video was beautiful but far too large for a website header; it would have severely impacted loading times.
The solution was two-fold:
Performance: I edited the video into six short, bite-sized clips, each highlighting a key moment in the pizza-making process.
Engagement: To keep the experience fresh, the website randomly selects and displays one of these six clips each time a user visits the homepage.
This approach solved the performance issue while creating a dynamic and engaging introduction to the site.
The Solution: A Custom Scroll Animation Hook
To implement the scroll animations, I built a reusable React hook called useIntersectionObserver. This hook encapsulates the logic for the Intersection Observer API, making it easy to apply animations to any element across the site.
The hook works by observing a set of DOM elements. When an element enters the viewport (crossing a specified visibility threshold), the hook adds a CSS class to it, which in turn triggers a slide-up animation.
This custom hook was applied to the menu section to create a staggered, cascading effect, where each dish gracefully animates into view as the user scrolls.
Adapting to a Scope Change
Projects evolve, and the Amigos website was no exception. The initial vision included a full ordering system and delivery app, but due to financial constraints, the scope was scaled back to a showcase-only website.
While I could have migrated the project to a more traditional CMS, the timeline was tight. I made the pragmatic decision to stick with our existing Firebase setup. It wasn't the most elegant solution for a content-only site, but it was the most efficient path to delivering a finished product on schedule.
Key Takeaways
This project was a masterclass in both technical skills and project management.
React and SEO: I learned firsthand that client-side rendered React applications require specific attention to SEO. This led me to implement React Helmet, a library that allows you to manage the document head and add the necessary meta tags for search engine crawlers and social media sharing.
Adaptability: The biggest lesson was the importance of collaboration and adaptability. Working closely with the Amigos team through shifting requirements and constraints was essential to the project's success.
A Bittersweet Farewell
Though Amigos Restaurant has since closed its doors, its digital presence remains online. The website serves as a living archive of a beloved local business and a testament to the power of food in bringing people together.
The journey was full of valuable lessons about development, design, and the unpredictable nature of the restaurant industry. The skills I gained and the experience of capturing a brand's essence in pixels will continue to influence my work for years to come.
This approach solved the performance issue while creating a dynamic and engaging introduction to the site.
The Solution: A Custom Scroll Animation Hook
To implement the scroll animations, I built a reusable React hook called useIntersectionObserver. This hook encapsulates the logic for the Intersection Observer API, making it easy to apply animations to any element across the site.
The hook works by observing a set of DOM elements. When an element enters the viewport (crossing a specified visibility threshold), the hook adds a CSS class to it, which in turn triggers a slide-up animation.
This custom hook was applied to the menu section to create a staggered, cascading effect, where each dish gracefully animates into view as the user scrolls.
Adapting to a Scope Change
Projects evolve, and the Amigos website was no exception. The initial vision included a full ordering system and delivery app, but due to financial constraints, the scope was scaled back to a showcase-only website.
While I could have migrated the project to a more traditional CMS, the timeline was tight. I made the pragmatic decision to stick with our existing Firebase setup. It wasn't the most elegant solution for a content-only site, but it was the most efficient path to delivering a finished product on schedule.
Key Takeaways
This project was a masterclass in both technical skills and project management.
React and SEO: I learned firsthand that client-side rendered React applications require specific attention to SEO. This led me to implement React Helmet, a library that allows you to manage the document head and add the necessary meta tags for search engine crawlers and social media sharing.
Adaptability: The biggest lesson was the importance of collaboration and adaptability. Working closely with the Amigos team through shifting requirements and constraints was essential to the project's success.
A Bittersweet Farewell
Though Amigos Restaurant has since closed its doors, its digital presence remains online. The website serves as a living archive of a beloved local business and a testament to the power of food in bringing people together.
The journey was full of valuable lessons about development, design, and the unpredictable nature of the restaurant industry. The skills I gained and the experience of capturing a brand's essence in pixels will continue to influence my work for years to come.
