Engaging discerning coffee enthusiasts
Calypso Café bakes authentic French pastries and brews responsibly sourced coffee for coastal destinations. They needed to redefine their brand identity to reflect the casual yet polished preferences of their users and offer menu items for takeout on a new menu and redesigned website.
Challenge
Code a responsive website using semantic HTML, writing all styles in CSS. Alt tags for user accessibility needed to be included sitewide. Use JavaScript for interactivity. Design a new Breakfast and Lunch menu as well as a Drink menu.
Model
B2C
Category
Responsive Web Development
Year
2025
Process
Research
Different frameworks were explored to determine the best method for development. Since I was interested in a site with a varied-column layout, hero carousel, parallax on larger breakpoints, mosaic section, and a carousel for press reviews, I opted to build a custom solution.
Mobile navigation right-slide drawer
There were a number of unique behaviors and functionality that I used to improve user engagement. I wrote the mobile navigation right-slide animation using JavaScript since many users are right handed. The righthand menu focus was implemented to improve the user experience of the site and keep the menu drawer for placing online orders near the hamburger menu.
Menu design
In order to appeal to product target users, two custom menus were designed. One featured all menu food, and the other featured cafe drinks.
I opted to build a from-scratch product without the use of a framework based on the functionality needed. I used Flexbox and CSS Grid for my mobile, tablet and desktop grid system. I wrote semantic HTML, coded all styles separately in CSS, and wrote JavaScript and JQuery for some of the interactivity.
I created all site content and compiled all media by page. I wireframed the site and then developed in Visual Studio Code, previewing in liveserver at all major breakpoints.
Final site integrations included mosaic, 4-column, 3-column, and 1-column layout sections, hero image carousel, Press carousel, designed breakfast, lunch and drink menus, and an order takeout menu for placing online orders.
