Gata at Baga
A menu, hours and reservation-request site for a fictional Filipino grill and cafe in Kapitolyo, Pasig.
Concept project
The problem
Diners decide on a phone, often from an Instagram post or Google Maps. They want four things quickly: the menu, whether the place is open, where it is, and a way to ask for a table. Many restaurant sites make them hunt for these, or hide the menu in a PDF.
This is a concept project: Gata at Baga is a fictional restaurant, and its address, phone number and menu are samples.
What I did
A menu that filters
Diners with dietary needs can filter by vegetarian, vegan, no pork or not spicy. Each filter is a real link to a pre-rendered page, so it works without JavaScript.
Hours and location first
Opening hours, an open-now indicator and an illustrated map answer the question most visitors arrive with. There are no real addresses or map pins for a fictional business.
A reservation request
The form collects date, time, party size and contact details, and says plainly that it is a request. Mondays are rejected with a clear message.
Built with
- AstroStatic pages that load fast on mobile data, with a structured menu rendered at build time.
- TypeScriptA typed menu with dietary tags, so every dish carries the same fields and the filters are generated from data.
- Self-hosted fontsBig Shoulders Display and Commissioner served from the same origin, with no call to Google.
Results
- Performance: not measured yet.
- Accessibility: not measured yet.
- Best Practices: not measured yet.
- SEO: not measured yet.
- Page weight: not measured yet.
- LCP: not measured yet.
Scores appear here only once they are measured, dated and linked to a report.
Concept projects show technical results only, because there are no real customers to measure.
See how this site loads and runs, step by step: a lab replay with an emulated network, and a diagram of every step. These are lab timings, separate from the scores above.
Watch it load: how this site works (external site)
Screens
Menu with a filter on, 390 px
Reserve form, 390 px
Visit page, 1440 px
If this were a real engagement
- For a real restaurant: connect the reservation request to its own inbox or booking tool.
- For a real restaurant: add a click-to-load Google Maps embed and directions link for its real address.
- For a real restaurant: replace the illustrative food photos with its own photography.
fernbill.ibaocchristian.com
A conversion-focused landing page for a fictional invoicing and payment-reminder SaaS for small service teams.
Have a project in mind?
Tell me what you need. I reply within one business day, usually sooner.