Museum 🏛️

Description

A modern and responsive landing page developed with HTML, SCSS, and JavaScript. The project serves as a promotional website for a fictional museum, inspired by a Figma design. It follows contemporary frontend practices, focusing on a visually engaging interface, adaptive layout, and structured, maintainable code using BEM and SCSS modules. The development workflow is streamlined with Gulp for automation and optimization.

Live Demo

Check out the live website: Museum Demo

Design Reference

The landing page was built based on this Figma design:

• Museum — Figma Design

Technologies Used

• HTML5
• SCSS / CSS3
• JavaScript
• BEM
• Gulp
• Git & GitHub Pages

Features

• Fully Responsive Layout: Optimized for desktops, tablets, and smartphones to ensure consistent display and usability across devices.
• Structured SCSS: Component-based SCSS for better modularity and future scaling.
• BEM Methodology: Clear class naming to improve readability and reusability of styles.
• AOS Integration: Smooth scroll animations implemented using the AOS library for an engaging browsing experience.
• Gulp-Powered Workflow:
  • SCSS compilation
  • CSS and JS minification
  • Autoprefixing
  • Live development server with automatic reloading
• Version Control: Project tracked with Git and deployed via GitHub Pages.

Getting Started

Follow these steps to run the project locally:

1. Clone the repository

git clone https://github.com/VladTk/museum-2.git
cd museum-2

2. Install dependencies

npm install

3. Run the development server

npm start

Preview