Kitchen Mix

Project description

The project was developed using a clean layout from a design mockup, then deployed on the WordPress CMS as a unique custom theme.

🎥 Core Technology Stack

• Frontend: HTML5, CSS3 (Flexbox & Grid Layout), native JavaScript (ES6+).
• Backend: WordPress CMS.
• Plugins: Custom Fields Suite (CFS), Contact Form 7 (CF7).

📱 Layout Features and Adaptability

• Responsive Layout: The interface displays correctly on all device types thanks to three breakpoints for smartphones, tablets, and desktops.
• Modern Grid: The page structure is built using a combination of Flexbox (for inline components and alignment) and CSS Grid (for product grids and complex galleries).

📄 Website Structure (4 pages)

• Homepage — company presentation, key advantages, and interactive elements.
• Catalog — structured product grid with current prices.
• Product Page — detailed product card with description, specifications, and a contact form.
• Contacts — contact information, interactive map, and quick request form.

⚙️ Interactive JavaScript Functionality

• Mobile Menu — responsive "hamburger menu" for easy navigation on smartphone screens.
• Accordion (Homepage) — compact FAQ block with smooth opening animation.
• Tabs (Product Page) — conveniently switch between descriptions, specifications, and delivery terms.
• Product Sorting (Catalog) — client-side script for quickly filtering/sorting product cards by price or alphabetically.

🛠 WordPress Integration (CMS Landing)

• A unique theme was developed from scratch without the use of complex website builders (Elementor, Divi, etc.), ensuring fast loading speed.
• Custom Fields Suite (CFS): All product specifications, prices, banners, and text blocks are displayed in custom fields. The content manager can easily edit the site through the admin panel without any coding knowledge.
• Contact Form 7: Contact forms have been configured and styled (on the contact page and in the product card for quick price requests or consultations).