Welcome to Travelum! 🎌 Our goal is to keep it simple and offer wonderful travels to the most popular destinations around the world! It is for all people who loves to travel, everything from families, couples, friends and solo travelers. Our target group is mainly aimed towards travelers who have busy lives or just likes to be productive. So we make it simple with few destinations, visual information and suggestions on activities, foods to eat and places to visit on each destination. If you have any further questions, just fill the contact form and we will get in touch asap. If you want more inspiration and information of each destination, visit our social media channels for more images and videos. Happy traveling! 😎
🎯
- Make it easy and quick to make decisions on travel destinations.
- Give travelers visual information and tips, on activities and food for the offered destinations.
- Be able to have contact and answer questions through our contact form.
- Give more visual information on the destinations with images and videos, through our social media channels.
🎬
- As a user I want a website that in a easy, visual and informative way, that can help me find my next holiday destination.
- As a user I want to be able to contact the support, if I have further questions.
- As I potential buyer I want to be able to gather more information through social media connected to the company.
- As David, I want to have a visual map overview of the destinations offered by the company.
- As Maria, I want to see engaging images/videos for each destination.
- As Jacob, I want to be able to interact on all my devices. On my laptop, iPad and smartphone.
- As Jennifer, I prefer fewer quality destination choices, instead of too much to choose from.
- As Bruno, I want a lean and easy website to navigate through.
- As Daniela, I want some facts and short information for each destination.
- As Julia I want to be able to choose from destinations in different continents, all over the world.
- As John I would like to see different activities that are possible to do in each destination.
- As Richard I want some visual information of local foods that each destination offers.
- As Jake I want to be able to visit and see different landmarks on each destination.
“As a busy worker, husband and dad of four children, when I have vacations I want it to be fast and easy, when looking for travel destinations, preferably with suggestions on activities, things to see and places to eat in the travel destination. So I can be productive with my free time and make quick decisions, so I can spend more time with the ones that matter most, my family.”
/ Seth 👨
“As a couple, me and my girlfriend want to be able to choose from different popular destinations around the world. We use social media frequently and would love to see visual images from the different destinations, to make the best decision, based on concrete information. Also we love food and always try different locals food!” / Johnny and Lisa 👫
“When choosing the right website when purschasing my travels. I like it to be lean and clean. Not to many choices, which leads me to procrastinate. I use different technical devices and it is important for me that the website runs smoothly on all my devices. Also, if I feel insecure or have further questions, I would like to be able to contact the support team.”
/ Emelie 👩
🎨
-
Icons
- The chosen icons were used to improve and get a better UX.
-
Colors
- The primary colors chosen was #0c456b #343a40 and #fff. The backgrounds had a dark theme, so it could be a good contrast with the white text, to make easier for the user to absorb and read from the website.
-
Backgrounds
- The backgrounds had a darker theme, to fit with the white text. Also most of the backgorunds hade a blury image, that was associated with the destination. This approach was to build a the vibe and some excitement for the user.
-
Videos
- Videos were used to give the users some visual content and also information about each destination, in a engaging and fun way.
- The wireframes were created using Balsamiq.
- Here is the link to see the Wireframes
🔎
- Interactive navigation bar. Allows users to navigate to top of the site through navbar brand and also navigate to the contact page through contact link.
- Interactive footer. Allows user to check out our social media channels through external icon links with target="blank".
- Marker drop. For UX when user arrives to landing page or reloads landing page.
- Marker information. Allows user to get some facts about targeted destination when clicking on desired marker.
- Onclick function on markers. Allows users to see images and videos with landmarks, activities and foods, for the destination.
- Contact form. Allows users to ask questions and have contact with the support team.
- Responsive for all devices. Allows users to interact with the website with different devices, as laptop, iPad and smartphone.
- Zoom function on each marker, that zooms in the destination when clicking on it.
- Bounce marker. When clicking on a marker, the chosen marker bounces for better UX.
- FAQ. A section that answers some of the most common questions asked by users.
- Order page. A section that allows the user to make the payment for the chosen order.
💻
- HTML
- CSS
- JavaScript
🔧
🔌
- Testing information can be found in this separate file: testing.md
🚀 The project was created by using the IDE services of Gitpod, from Gitpod the project was committed to Git and pushed to Github from the master branch.
This process was taken to deploy the website, from Github repositories:
- You can log into Github Pages
- From the repositories shown, choose: Sebastian-Torres-Matrix/Travelum.
- On the menu bar at the top, to the right you can click on Settings.
- From there you can scroll down to the section Github Pages.
- On the headline Source you can choose master branch, from the dropdown menu.
- When choosing master branch, the master branch is deployed and also up to date: with access to the link to: Travelum
- During the project, it has always been the master branch that has been deployed to Github Pages.
If you want to run this project locally, you can clone this repository from Gitbuh Pages by following this steps:
- Use this link to get to the Github repository: https://github.com/Sebastian-Torres-Matrix/Travelum .
- On the menu bar at the top, to the right, choose the green button named Clone or download.
- In the Clone with HTTPS, you can copy the web URL.
- Open Git bash, in your local IDE.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type git clone, and use the web URL from Clone with HTTPS: https://github.com/Sebastian-Torres-Matrix/Travelum.git
- Press Enter, and your local clone will be created.
For more information about how to Git Clone, you can find it here
- These websites, for the excellent content, with explanations and tutorials:
- Background position, Chris Coyier on CSS-tricks
- MDN
- StackOverflow
- W3Schools
- Brandbucket
- For generating and creating the logo icon.
- Flaticon
- For all the amazing svg flag icons.
- Font Awesome
- For the excellent open source gallery with icons.
- Optimizilla
- Image compressor to shrink JPEG and PNG images.
- Unsplash
- For all the embedded images used in the project.
- Youtube
- For all the embedded videos used in the project.
- Fellow Code Institute students on Slack. For the support and feedback.
- Simen Daehlin, for excellent mentorship, with great guidance and feedback. 🏆
- The content of this website is for educational purpose only. ❗