Chef & Culinary Portfolio Booking Website Template

Quick summary

Shake is a single-page brutalist portfolio template for professional cocktail mixologists. It uses a Before/After Slider header, a cinematic bento grid body, and a monochrome steel color system to present cocktail craft as a serious discipline. One focused call to action, "Build Your Menu," drives visitors to a booking consultation page.

Who this template is for

This template is built for working mixologists who pitch to high-value clients and need a portfolio that matches the quality of their craft. If your work lives in hotel bars, launch events, or new restaurant concepts, this page speaks that language.

• Freelance mixologists building signature menus for boutique hotels and hospitality groups
• Spirits collaboration partners who need a client-ready portfolio for brand launch events
• Drinks program consultants presenting end-to-end work from first spec to final garnish

What problem this template solves

Most portfolio pages for food and beverage professionals look like resumes. They list credentials but never convey craft. Shake solves that by turning the page itself into an experience that mirrors the work.

• Generic portfolio layouts fail to communicate the sensory precision behind cocktail design
• Scattered contact forms interrupt the narrative before trust is established
• Clients in hospitality need to feel confidence before they reach out, not after filling out a form

What you get with this template

You get a complete single-page layout built around a clear visual and narrative sequence. Every section is designed to move a serious client from curiosity to a consultation click.

• A Before/After Slider header that contrasts raw mise en place with the finished cocktail in full color
• A three-row bento grid that unfolds like a continuous tracking shot through a night of service
• A fixed brutalist call to action bar that locks to the bottom of the viewport after the third scroll

Feature list

This template is structured around five distinct design and layout capabilities drawn directly from the brief.

Before/After Slider Header

The header splits the viewport into two states. The left side shows raw ingredients in desaturated monochrome. Dragging right reveals the finished cocktail in full color, with smoke, condensation, and warm light. The contrast is immediate and sets the tone for everything that follows.

Cinematic Bento Grid Layout

The bento grid body is organized into three rows, each functioning as a chapter in a single visual story. Row one features ingredient sourcing stills and macro shots of carved ice. Row two shows the shake, strain, and pour in motion with brutalist typography stamped across each tile. Row three presents finished cocktails in their environments, rooftop bars, speakeasy basements, and tasting room tables.

Fixed Bottom call to action Bar

After the visitor scrolls past the third section, a brutalist bar locks to the bottom of the viewport. It carries the primary call to action and stays visible throughout the rest of the page without interrupting the scroll experience.

Monochrome Steel Color System

The palette uses raw gunmetal, polished steel, poured concrete white, and a single liquid mercury accent. Hover states and active elements catch light through the mercury tone. The restraint of the palette is intentional: it lets the amber and copper tones of the cocktail photography carry all the visual warmth.

Press and Partner Section

The final bento row includes space for press features and partner logos. This section is positioned deliberately at the end of the scroll sequence, after the portfolio has already built the case visually.

Page sections overview

Design & branding system

The visual identity follows a Bold Brutalist theme with no decorative softening. Every design choice serves legibility and atmosphere over decoration.

• Color palette: raw gunmetal (#3B3B3B), polished steel (#71797E), poured concrete white (#E8E6E1), and liquid mercury (#C0C0C0) as the single accent
• Typography is stamped across bento tiles in a gallery placard style, treating cocktail names and process descriptions as bold structural text
• Hover states and active elements use the mercury accent to catch light, while the overall palette steps back to let cocktail photography provide all warmth and color

Mobile & speed optimization

The bento grid and slider header are designed to translate the cinematic sequence across screen sizes. The layout prioritizes the visual narrative on smaller viewports without losing the brutalist structure.

• Bento grid tiles restack responsively to preserve the chapter-by-chapter story on mobile screens
• The fixed call to action bar remains anchored at the bottom of the viewport on all screen sizes, keeping the booking prompt accessible throughout the scroll
• The Before/After Slider adapts to touch interaction so mobile visitors can still drag through the raw-to-finished reveal

How this template helps you convert

The page earns trust before it asks for anything. There is no form, no interruption, and no pressure until the portfolio sequence has already made the case.

1. The Before/After Slider creates an immediate strong impression that signals the mixologist's precision and visual command, compelling the visitor to keep scrolling.
2. The cinematic bento grid builds credibility across three progressive rows, moving from sourcing and process to finished work in real venues, so clients understand the full scope of the offer before reaching the call to action.
3. The fixed "Build Your Menu" bar appears only after the third scroll, arriving at the moment the visitor is already convinced, making the click a natural next step rather than a cold ask.

Other information about this template

Shake is part of the Portfolio and Agency category under the Chef and Culinary Portfolio subcategory. It is built specifically for the cocktail mixologist portfolio niche and uses a combination of design patterns rarely applied to food and beverage work.

• The template style is a bento grid, a layout format borrowed from editorial and tech contexts and applied here to hospitality portfolio work for a distinctive, modern result
• The header concept, creative direction, and landing page direction are all drawn from the same intersection match, making the template highly coherent across visual identity, narrative structure, and conversion goal
• This landing page template is suitable for use on portfolio builder platforms, hosted web tools, and no-code page editors that support custom HTML and CSS layouts
• The Intersection Match Score for this template is 13, reflecting strong alignment between the niche, theme, and design system choices

Show more