☕ Bitebloom Cafe is a mock cafe created for the purpose of showing my UI/UX and Frontend skills.
Type: Mock Cafe
Purpose: Portfolio project to showcase layout, spacing, UI/UX and Frontend skills
- Frontend: Next.js
- UI Components: shadcn/ui
- Styling: TailwindCSS
- SEO / Meta: Next (Internal Metadata)
- Playfair Display (used for headings)
- Inter (used for body and paragraphs)
Dark Mode
| Element | HSL |
|---|---|
| Background | 10, 10, 5 |
| Shade 1 | 10, 10, 10 |
| Shade 2 | 10, 10, 15 |
| Text | 10, 10, 95 |
| Text Paragraph | 10, 10, 85 |
| Text De-emphasize | 10, 10, 75 |
Light Mode
| Element | HSL |
|---|---|
| Background | 10, 10, 95 |
| Shade 1 | 10, 10, 90 |
| Shade 2 | 10, 10, 85 |
| Text | 10, 10, 5 |
| Text Paragraph | 10, 10, 15 |
| Text De-emphasize | 10, 10, 25 |
Primary / Secondary Colors
| Color | HSL |
|---|---|
| Primary | 10, 60, 35 |
| Secondary | 190, 60, 35 |
/– Landing page/products– All the available products (Mock)/about– Information about founder, team and history (Mock)/find-us– Information about location, contact, social media, and opening hours/credits- Credits for all the images used
- Pastries – The bread and butter of Café's life
- Cakes – Sweet and tasty, another bread and butter of life
- Coffee – From bitter to sweet and tasty coffee.
- Beverages – An alternative to people who don't want caffeine
- Clone repo
- Install dependencies:
pnpm install - Start dev server:
pnpm run dev - Open browser at
http://localhost:3000
- This project is mock Café for portfolio purposes only.
- Illustrates portfolio-frontend thinking, page designs, UI/UX, and deployment flow.
- Built to showcase UI/UX skills rather than operate as a live Café website
- Photo by Lisa from Pexels: https://www.pexels.com/photo/leather-chairs-in-restaurant-2193600/
- Photo by Mihai Moisa on Unsplash
- Photo by Kavita Joshi Rai on Unsplash
- Photo by Mink Mingle on Unsplash
- Photo by Alina Matveycheva: https://www.pexels.com/photo/sweet-cakes-and-coffee-on-table-20818064/
- Photo by tabitha turner on Unsplash
- Image by drobotdean on Freepik
- Image by drobotdean on Freepik
- Image by dit26978 on Freepik
- Photo by Nathan Dumlao on Unsplash
- Photo by Bhuwan Bansal on Unsplash
- Photo by Abiwin Krisna on Unsplash
- Photo by Sid Saxena on Unsplash
- Photo by Marcus Ganahl on Unsplash
- Photo by Kouji Tsuru on Unsplash
- Photo by Chevanon Photography: https://www.pexels.com/photo/close-up-of-coffee-cup-on-table-312418/
- Photo by Fallon Michael: https://www.pexels.com/photo/cup-of-brown-coffee-3551717/