Creative Bakery 🎂

Description

A responsive landing page built using HTML, SCSS, and JavaScript, following modern frontend development practices. The project represents a promotional website for a bakery brand and was created based on a Figma design. It emphasizes visual aesthetics, adaptive layout, and clean, maintainable code using the BEM methodology and SCSS architecture. The build process is automated via Gulp for efficient development and deployment.

Live Demo

Experience the live website: Creative Bakery Demo

Design Reference

The landing page was built based on this Figma design:

• Creative Bakery — Figma Design

Technologies Used

• HTML5
• CSS3 / SCSS
• JavaScript (ES6+)
• BEM methodology
• Gulp (build tool)
• Git

Features

• Responsive Design: Fully responsive layout adapted for various screen sizes, providing a consistent experience across desktop, tablet, and mobile devices.
• SCSS Architecture: Modular SCSS structure for better scalability and maintainability.
• BEM Methodology: Clear and consistent class naming for styling and reusability.
• Gulp Automation:
  • SCSS compilation
  • File minification
  • Autoprefixing
  • Live-reloading development server
• Custom Scroll Animations: Scroll-triggered animations implemented manually using the IntersectionObserver API.

Getting Started

Follow these steps to run the project locally:

1. Clone the repository

git clone https://github.com/VladTk/creative-bakery.git
cd creative-bakery

2. Install dependencies

npm install

3. Run the development server

npm start

Preview