Skip to content

jega1312/spicehaven

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

16 Commits
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Spice Haven - Conceptual Luxury Fine Dining Restaurant WordPress Website ⭐🍽

WordPress Elementor WPCode LocalWP InfinityFree

A fictional luxury fine dining restaurant website built using WordPress and Elementor. Designed as a frontend portfolio project to demonstrate premium restaurant branding, luxury UI design, responsive layouts, and practical WordPress development workflow.


πŸ”— Live Demo

🌐 View Live Site


πŸ“Έ Preview

Desktop View πŸ–₯

Home Menu Gallery Reservation

Mobile View πŸ“±

Home Gallery


πŸ’‘ About The Project

Spice Haven is a fictional luxury fine dining restaurant website created to simulate the online presence of a luxury culinary brand. The project focuses on delivering a premium digital dining experience through elegant layouts, immersive visuals, and modern frontend structure.

The website showcases:

  • Luxury restaurant branding
  • Signature gourmet dishes
  • Fine dining atmosphere
  • Elegant visual storytelling
  • Premium landing page sections
  • Responsive user experience
  • High-end restaurant presentation

This project was also used to practice:

  • WordPress website building
  • Elementor page design
  • Local development using LocalWP
  • Website migration & hosting workflow
  • Debugging deployment issues after going live

βš™οΈ Tech Stack

Technology Purpose
WordPress CMS & website management
Elementor Visual page builder
Ultimate Addons for Elementor (UAE) Advanced Elementor widgets & UI enhancements (Responsive Header & Footer)
MetForm Reservation/contact form creation
WPCode Custom CSS & JavaScript code snippet management
LocalWP Local WordPress development
InfinityFree Free website hosting
Better Search Replace URL replacement after migration
All-in-One WP Migration Website export/import migration
Hello Elementor Theme Lightweight Elementor-compatible theme
Child Theme Wizard Child theme generation
HTML Page structure
CSS Styling & responsiveness
Responsive Design Principles Mobile/tablet optimization

✨ Key Features

  • Fully Responsive Design β€” Optimized for desktop, tablet, and mobile devices
  • Luxury Hero Section β€” Premium restaurant landing experience with immersive visuals
  • Signature Dishes Showcase β€” Displays curated gourmet dining selections
  • Fine Dining Experience Sections β€” Highlights elegance, atmosphere, and culinary identity
  • Smooth Navigation Flow β€” Structured section-based user experience
  • Premium Visual Branding β€” Dark luxury-inspired aesthetic with refined typography
  • Mobile Navigation Optimization β€” Improved layout handling across smaller screens
  • Image-Focused Layout Design β€” Large cinematic food photography throughout the site
  • Advanced Elementor Components β€” Enhanced layouts and widgets such as responsive header and footer sections using UAE plugin
  • Custom Reservation & Contact Forms β€” Built and designed using MetForm
  • Custom Code Integration β€” Additional styling and tweaks managed for responsive header styling using CSS and JS through WPCode
  • WordPress CMS Workflow β€” Practical experience managing pages, media, and layouts
  • Live Hosting Deployment β€” Successfully migrated local WordPress project to live hosting using InfinityFree

🧠 WordPress & Frontend Concepts Demonstrated

Concept Where Used
Responsive Web Design Entire website
WordPress Page Management Site structure & pages
Elementor Layout Building Hero, dining showcase, about, footer
Advanced Elementor Widgets (Header & Footer) UAE plugin components
Form Building & Management MetForm reservation/contact forms
Custom CSS & JS Code Injection WPCode custom snippets
Media Management Luxury food and restaurant imagery
Navigation Structure Header & section flow
Mobile Responsiveness Tablet & phone layouts
Local Development Workflow LocalWP environment
Website Migration Export/import deployment workflow
Hosting & Domain Setup InfinityFree live deployment
URL Migration Fixes Better Search Replace plugin

πŸš€ Getting Started

Prerequisites

  • LocalWP
  • WordPress
  • Elementor Plugin
  • Ultimate Addons for Elementor (UAE) Plugin
  • MetForm Plugin
  • WPCode Plugin
  • All-in-One WP Migration and Backup Plugin
  • Better Search Replace Plugin
  • Hello Elementor Theme
  • Child Wizard Theme Plugin
  • InfinityFree Web Hosting

🌍 Deployment Workflow

This project was:

  1. Developed locally using LocalWP
  2. Built using Elementor and UAE widgets for Header & Footer
  3. Created reservation/contact forms using MetForm
  4. Added custom CSS & JS snippets using WPCode
  5. Exported using All-In-One WP Migration
  6. Uploaded to InfinityFree web hosting
  7. Replaced local URLs using Better Search Replace
  8. Configured for live deployment

🎨 Design Decisions

  • Luxury Fine Dining Theme β€” Dark sophisticated aesthetic inspired by Michelin-star restaurant branding
  • Elegant Accent Palette β€” Gold, amber, and warm spice-inspired highlights
  • Cinematic Food Presentation β€” Large immersive food imagery for premium visual appeal
  • Section-Based Storytelling β€” Smooth modern landing page flow
  • Minimal Luxury UI β€” Clean layouts with strong visual hierarchy
  • Responsive Grid Layouts β€” Flexible layouts across all screen sizes

πŸ“š What I Learned

  • Building luxury restaurant websites using WordPress & Elementor
  • Using advanced Elementor addons for enhanced UI components (Header & Footer)
  • Structuring premium landing pages for hospitality brands
  • Creating responsive reservation/contact forms
  • Managing custom code snippets within WordPress
  • Responsive design troubleshooting
  • LocalWP development workflow
  • Hosting and deployment process
  • Fixing live production issues
  • Handling URL replacement after WordPress migration

πŸ‘¨β€πŸ’» Author

Jegathiswaran Thiaghu

GitHub LinkedIn Portfolio


πŸ“ License

This project is open source and available under the MIT License βš–.