In order to view the live site, click here.

The Aegean Experience is a website that intends to provide users with the appropriate information about the restaurant with the same name, both in text and images. As it is a restaurant's webpage, there was further scope than just the basic intent. The webpage strives to provide visitors with easy to find information, along with visual content that looks appetizing. It is also important to keep the page's style as close to the "sea" or "greek" style as possible, to provide the appropriate feeling to the visitor.

• The restaurant was imagined during the website creation and thus most of the information provided is a mock-up, that could be replaced in case it would be used for commercial purposes.

1. User Stories
2. Goals
3. Features
4. Design
   1. Colours
   2. Fonts
   3. Structure
   4. Wireframes
5. Technologies used
6. Testing
   1. Validation
   2. Device and browser testing
   3. User stories testing
7. Bugs
8. Deployment
9. Credits

1. See photos of some meals.
2. Know where the restaurant is located.
3. See how I can contact the restaurant.
4. Learn more about the restaurant's origin and creator.
5. See the restaurant operating hours.
6. See the menu.

7. Be able to easily provide feedback.
8. Have an easy way to contact the restaurant for reservations or information.
9. Have links to the restaurant's social media pages.
10. See what critics thought about the place.

11. Provide visitors with information about the restaurant's origins and leadership.
12. Have a way to easily navigate the website.
13. Showcase the restaurant's dedication to fresh ingredients.
14. Showcase the location.

• Have a fully functional and accessible website.
• Provide a consistent experience throughout the pages.
• Have a consistent style throughout the pages.
• Provide easily accessible information.
• Have a simple yet intuitive design.

• Provide an appropriately themed style for a Greek restaurant, for people that are interested in the experience.
• Have easy to find information so visitors can contact the restaurant.
• Have an easy to find location section.
• Showcase appetizing dishes to provide appropriate stimuli.

We have a total of 4 pages on the website, which include the below features.

• The website navbar features the restaurant name and logo and links to the 4 pages.
• It is fully responsive, as it turns to a "hamburger" menu on medium to small screens.
• It is featured on all 4 pages, along with the 404 error page.
• The current page is underlined with a thick line.
• The hovered over page is underlined in a thinner line.

• The carousel provides the option to showcase images on the main page.
• 3 images have been added with the support for more.
• It is fully responsive and the image gets resized accordingly. For large screens the image is resized up to a point to maintain quality.

• The review section provides users with some mock-up reviews and images.
• It is a point of referrence to have a general idea of what other people think about the restaurant.

• The menu was designed with simplicity in mind, providing easy to find information with an appropriate theme.
• It has a consistent style.
• It is responsive, as its elements become smaller for medium to small screens.

• Short story on how the restaurant was created.
• Features an image of the restaurant entrance.

• Short bio on the restaurant's chef.
• Features a portrait of the chef.

• Short introduction to the location of the restaurant, Oia, on Santorini island.
• Features a photo of Oia.

• The restaurant's dedication to the ingredients, explained for all customers.
• Features a photo of some ingredients (crabs)

• Provides visitors with the option of sending in their feedback or questions.
• Has a dedication and a privacy statement.

• Provides visitors with the location of the restaurants. (Current version provides the location of Oia, the town where the restaurant would be, as the restaurant is not real)
• Is embedded correctly to clearly show that it is a Google maps iFrame.

• Provides visitors with all necessary information to contact the restaurant.
• Has operating hours.

• Is positioned at the bottom of all pages.
• Provides easy to use links to social media that open in separate tabs.

The website was designed with simplicity in mind, while also trying to keep the style of Greece and the sea.
The style is consistent across pages, as most images have softened corners so they seem more refined.

The colour palette was taken from Color Hunt
The one that was used can be found here.
The specific palette was picked because it is light, simple and can easily resemble the colour of the beach.

The fonts used were the following:
Dancing script was used only for the website's logo. It is calligraphic and stands out from the rest of the text.

Poppins was used for titles on the page, as it is easy to understand and looks great in uppercase.

Lora was used for the rest of the text on all pages, to make a contrast with the titles while also keeping a simple style.

The website's structure follows the core idea of simplicity.
The navbar is located on the top of the page, as it is the layout we are used to on the internet.
On it, we have the logo on the left that takes users to the home page and the links to all the pages on the right.
We also have a visual cue that shows on which page we are. (Thick bottom border) There are a total of 4 pages:

• Home: A carousel with some images welcomes the user, with some review snippets under it to showcase both some dishes and what critics' experience was.
• Menu: Simple layout for a menu with header images.
• About us: All the information needed to provide users with a story. Broken down in 4 parts: The restaurant, the chef, the island and the ingredients.
• Contact: Grouped information needed to contact the restaurant.

• HTML
• CSS

• Github
• VSCode
• Bootstrap V5
• Balsamiq
• Adobe Illustrator
• Google fonts
• Favicon.io
• TinyPNG
• Font Awesome
• Color Hunt

The website was tested on the following devices:

• Windows desktop PC (various components) running Windows 10
  • Chrome Version 92.0.4515.159
  • Edge Version 92.0.902.78
• iPhone 12 Pro
  • Safari
• Various devices from users who tested for feedback

The webpage works great on all devices and browsers that it was tested on.
Functionality between desktop and mobile remains the same, with the look of the page changing slightly.
As the website was designed mobile-first, it fits mobile browsers perfectly while also changing to fit a larger screen and occupy more space.

1. See photos of some meals.

2. Know where the restaurant is located.

3. See how I can contact the restaurant.

4. Learn more about the restaurant's origin and creator.

5. See the restaurant operating hours.

6. See the menu.

7. Be able to easily provide feedback.

8. Have an easy way to contact the restaurant for reservations or information.

9. Have links to the restaurant's social media pages.

10. See what critics thought about the place.

11. Provide visitors with information about the restaurant's origins and leadership.

12. Have a way to easily navigate the website.

13. Showcase the restaurant's dedication to fresh ingredients.

14. Showcase the location.

1. Footer did not stay on the bottom of screen.
   • Fixed by adding a container for all content which has the full viewport height (100vh), minus the footer height.
2. Carousel would clip images when transitioning.
   • Fixed by changing the transition to a fade-out.
3. When navbar links had a bottom border added for hover effect, they would move slightly up when hovered.
   • Fixed by adding an invisible bottom border.

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab
  • From the source section drop-down menu, select the Master Branch
  • Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here - https://alexgcbn.github.io/CI_PP1_AEGEAN_EXPERIENCE/

• All images were downloaded from Pexels, from various artists.
• Icons used in the logo and footer were linked from FontAwesome.
• Footer idea was derived from the Love Running project, from Code Institute
• The website Navbar and Carousel features and code were taken from their respective Bootstrap websites.
• Steps on how to link the 404 page were found in this GitHub post