Simply Chocolate 🍫
A technical showcase of a premium chocolate landing page. This project focuses
on implementing complex frontend features using a clean, professional
architecture and modern JavaScript practices.
Live Demo
✨ Key Features
- Performance & SEO 100/100: Fully optimized for lightning-fast loading
speeds and high search engine visibility.
- Full Responsiveness: Seamlessly adapts to all screen sizes (Mobile,
Tablet, Desktop).
- Interactive UX: Smooth animations, modal windows, and intuitive
navigation.
- Custom Form Elements: Enhanced form interaction using modern selection
libraries for a premium feel.
🛠 Tech Stack
- HTML5 – Semantic and accessible markup.
- SCSS – Modular styles with variables, mixins, and a clear architecture.
- JavaScript (ES6+) – Interactive UI logic and data handling.
- Vite – Modern build tool for optimized asset bundling.
- TomSelect – Integrated for advanced, styled, and user-friendly dropdown
menu (delivery selection).
- Swiper.js – Used for smooth, touch-enabled feedback sliders.
🚀 Optimization Results
According to Google Lighthouse, the project achieves perfect scores in core
metrics:
- Performance: 100 — Optimized assets, fast Time to Interactive, and
efficient resource loading.
- SEO: 100 — Proper metadata, header hierarchy, and crawlable structure.
Key optimizations included:
- Image Optimization: Using next-gen formats (WebP) and responsive image
sets.
- Clean Code: Minified CSS/JS and efficient DOM management.
- Accessibility (A11y): Proper ARIA labels and keyboard navigation support.
🚀 Quick Start
- Clone the repository:
git clone ...
- Install dependencies:
npm install
- Start development server:
npm run dev
👤 Project by
Oleksandra Starovatova Frontend Developer & Computer Science Student.