Creative Bakery — Responsive Landing Page

Responsive landing page for a bakery brand, built from scratch based on a Figma design.

🔗 Demo

Live Demo

🛠 Tech Stack

• HTML5
• SCSS (Sass)
• JavaScript (Vanilla)
• Vite

✨ Features

• Pixel-perfect layout based on Figma design (1440px) with breakpoints for Desktop (1280px), Tablet (640px), and Mobile (320px+)
• Mobile-first approach with SCSS mixins for breakpoints
• BEM methodology for structured and scalable CSS architecture
• SCSS architecture with separated partial files per block (_header.scss, _footer.scss, etc.) and a single main.scss entry point
• Animated burger menu with smooth open/close transition, scroll lock and accessibility attributes (aria-expanded, aria-hidden)
• SVG icons colored via CSS mask-image technique
• Smooth scroll navigation to page sections
• Light/dark theme switcher with localStorage persistence
• CSS Grid layout for product cards and footer
• Semantic HTML5 markup (header, nav, main, section, footer)

🚀 Getting Started

Prerequisites

• Node.js v14+
• npm

Installation

1. Clone the repository:

   git clone https://github.com/YevheniiKa/layout_creativeBakery.git

2. Navigate to the project folder:

   cd layout_creativeBakery

3. Install dependencies:

   npm install

4. Start the development server:

   npm start

📦 Build & Deploy

# Build for production
npm run build

# Deploy to GitHub Pages
npm run deploy

📐 Design

Figma design: Bakerlab FE Students