Ocean View Restaurant Page

Welcome to the Ocean View Restaurant Page repository! This project is a modern, fully responsive restaurant website showcasing the SOLID principles of object-oriented programming, along with elegant design and seamless user experience.

Table of Contents

• Overview
• Features
• Color Palette
• Technologies Used
• Learning Objectives
• Credits

Overview

The Ocean View Restaurant Page is a creative project designed to demonstrate my grasp of advanced programming concepts and design principles. While inspired by the concept of building a restaurant page from The Odin Project, the functionality, design, and implementation are entirely original. This includes:

• Custom imagined restaurant theme, name, and visuals.
• Integration of SOLID principles into the JavaScript structure.
• Use of Webpack for modular code management.
• Personalized design decisions and enhanced user experience.

Features

• Homepage: A warm welcome section, hero image, and introduction to the restaurant.
• Menu: A visually appealing menu section with images, names, and prices of dishes.
• About Us: A descriptive section highlighting the restaurant’s uniqueness.
• Contact: Contact details for easy communication.
• Responsive Navbar: A hamburger menu for smooth navigation on all devices.
• Custom Icons: Icons sourced from Pictogrammers.
• Native Fonts: No external font libraries were used.

Color Palette

The following color palette was used to maintain a cohesive and visually pleasing design:

• Primary Background Color: #EEEDEB (Light Cream - Used for general backgrounds)
• Secondary Background Color: #092635 (Dark Blue - Used in the header and welcome section background)
• Primary Text Color: #1B4242 (Teal - Used for headings and key texts)
• Secondary Text Color: #092635 (Dark Blue - Used for paragraph text)
• Accent Color 1: #5C8374 (Muted Green - Used in buttons and highlights)
• Accent Color 2: #315678 (Steel Blue - Used for footer links and details)
• Shadow Color: #d7d4cf (Soft Gray - Used for box shadows)

Technologies Used

• JavaScript (ES6): Implemented with modular design principles.
• SOLID Principles: The project adheres to these principles for maintainability and scalability.
• Webpack: Used for module bundling and asset management.
• CSS: Styled using custom CSS for a responsive and modern design.
• Pictogrammers Icons: Icons sourced for added visual appeal.
• Native CSS Fonts: Leveraged system fonts for consistency and performance.

Learning Objectives

This project was created as part of my learning journey to:

• Understand and apply the SOLID principles in JavaScript.
• Gain hands-on experience with Webpack for efficient project management.
• Enhance design skills using color theory and accessibility standards.
• Build a fully responsive website from scratch using modular and reusable code.
• Practice integrating custom assets, including images and icons.

Credits

• Inspiration: Conceptual guidance was derived from The Odin Project, but the implementation, design, and added principles are entirely my own.
• Icons: Icons used are from Pictogrammers.
• Images: Placeholder images were sourced randomly and credited in the footer section of the website.

---

This project reflects my dedication to learning and applying advanced concepts in web development while maintaining a high standard of originality and creativity.