Diego ArrudaSoftware Engineering
PTEN

Brasa Alta

A concept website for a fictional wood-fired burger restaurant, with a menu, search, a build-your-order tray and simulated customer service by message. Brasa Alta is a fictional brand: the brand, images and video were created with AI, the address and prices are fictional and no message ever leaves the site.

Screenshot of the Brasa Alta website. At the top, a notice that it is a portfolio project with a brand and images created with AI. Below, the menu with Cardápio, Na casa and Endereço and the Bandeja button. Over the image of a burger on the grill, the title Brasa Alta, the opening hours and the Montar meu pedido button.

On small screens the site is not embedded here. Open the full version in a new tab.

View site
Purpose
Restaurant website with a menu, search and a build-your-order tray
Technologies
  • HTML
  • CSS
  • JavaScript
Brand and images
Fictional brand. Brand, photos and video generated with AI
Code
Public repository on GitHub
Status
Published on Cloudflare Pages

The project

Brasa Alta shows how I build a complete restaurant website: the visitor reads the menu, searches for an item, builds the order and sees what customer service by message would look like.

The brand is fictional and was created for this project. The address and prices are also fictional, based on craft burger restaurants in southern Brazil in 2026. Sending the order is a simulation: no message ever leaves the site.

What the site does

  • A menu of 51 items in 9 categories, generated from a data list, with a fixed category bar that follows the scroll.
  • Search that ignores accents and letter case, by name, description, category and tag.
  • Order tray: the Adicionar (add) button becomes a quantity control, draft beers have a 300 and 500 ml selector, and the total, the note and the pickup option update in real time. On mobile, the tray is a draggable sheet.
  • Simulated sending: the order becomes a conversation with a reply from the restaurant, which changes with Brasília time, the pickup option and whether there is an alcoholic drink.
  • Chat with ready-made answers: opening hours calculated on the spot, address, pickup time, vegetarian options and draft beers, all read from the same menu data.
  • Undo for 10 seconds, with a keyboard shortcut (Ctrl+Z or Cmd+Z).

Design decisions

  1. Concept

    The kraft paper of the tray becomes the page. The grill video opens the site and the menu appears on the very first scroll.

  2. Typography

    Big Shoulders Display for headings, condensed like a painted sign, and Archivo for text. The fonts are served by the site itself.

  3. Motion

    Clips from the video become live photos that only play while on screen, and a disc flies to the tray when you add an item. Everything stops when the system is set to reduce motion.

  4. Product feel

    Printed-menu lines instead of cards, real states (empty, removed, undo, nothing found) and copy written like a real menu.

Accessibility and quality

  • Contrast checked per color pair (WCAG), 44 px touch targets, visible focus and a single announcement region for screen readers.
  • Tested in Chrome at 320, 360, 390, 768 and 1440 px and in landscape, with no horizontal scrolling and no console errors.
  • Independent review in three rounds.

How it was built

  1. Page

    Plain HTML, CSS and JavaScript, with no framework and no external runtime dependency.

  2. Data

    The menu, the search, the tray and the chat read the same data list.

  3. Images

    The brand, photos and video were generated with AI. The price and menu research behind the values is in the repository.

  4. Publishing

    The site is hosted on Cloudflare Pages.