https://github.com/umarsiddique010/restaurant-page

A modern, fully responsive restaurant website built to demonstrate SOLID principles, modular JavaScript, CSS components, Webpack, and custom design. Features include a dynamic menu, responsive navbar, and a cohesive color palette.
https://github.com/umarsiddique010/restaurant-page

accessibility color-theory css custom-css frontend-development html javascript modular-design object-oriented-programming responsive-design restaurant-website solid-principles the-odin-project ux-ui webpack

Last synced: 7 months ago
JSON representation

A modern, fully responsive restaurant website built to demonstrate SOLID principles, modular JavaScript, CSS components, Webpack, and custom design. Features include a dynamic menu, responsive navbar, and a cohesive color palette.

• Host: GitHub
• URL: https://github.com/umarsiddique010/restaurant-page
• Owner: umarSiddique010
• Created: 2024-12-25T12:26:15.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-12-25T18:41:10.000Z (10 months ago)
• Last Synced: 2025-02-11T16:43:25.458Z (8 months ago)
• Topics: accessibility, color-theory, css, custom-css, frontend-development, html, javascript, modular-design, object-oriented-programming, responsive-design, restaurant-website, solid-principles, the-odin-project, ux-ui, webpack
• Language: JavaScript
• Homepage: https://umarsiddique010.github.io/Restaurant-page/
• Size: 3.71 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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](#overview)

- [Features](#features)

- [Color Palette](#color-palette)

- [Technologies Used](#technologies-used)

- [Learning Objectives](#learning-objectives)

- [Credits](#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](https://www.theodinproject.com/), 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](https://pictogrammers.com/library/mdi/).

- **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](https://www.theodinproject.com/), but the implementation, design, and added principles are entirely my own.

- **Icons**: Icons used are from [Pictogrammers](https://pictogrammers.com/library/mdi/).

- **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.