Link to the live site on GitHub pages
This is "Kyoto Day'n'Night", a project developed with the aim of promoting Kyoto as a destination for people traveling through Japan or simply interested in visiting the country in the future. The major theme of the website is the division between day activities (historical sites and parks) and night activities (restaurants and bars), to facilitate the website navigation and add a unique touch to the page.
The target audience is comprised by english-speaking individuals and families, interested in the history and culture of the city, as well as eating well and having fun.
- "I want to navigate the website easily and intuitively, on any device (phone, tablet or laptop)"
- "I want to understand the main purpose of the site"
- "I am interested in visiting Kyoto, but first, I would like to know what the city has to offer"
- "I want to get in touch with questions about the locations listed on the website or other locations I believe should be mentioned"
- "I want to be able to follow the page on social medias to check for any update/reviews"
- To Provide information/promote on a holiday destinations.
- Grab people's attention through images and tips on recommended locations.
- Eventually, to increase the number of tourists visiting Kyoto and the specific locations listed in the website.
- To find a nice destination for the next holiday.
- To find information confirming the worthiness of such destination (also for those who were already interested in visiting Kyoto).
- To be able to contact someone for clarifications or in a case of doubts
- To navigate the website smoothly and intuitively.
- Provides a clean UX for users with intuitive navigation.
- Structures the content with clear division and focus on introduction, maps and contact form.
- Animations (made with JavaScript) included to improve the overall user experience and increase the trustworthiness of the website.
- The structure has been developed to allow users to quickly absorb information and imagery.
- Content throughout the website has been provided in small bites, to allow the user to easily understand how the website works and avoid information overload.
- The About section introduces the user to the different activities available in the city.
- The Location section allows the user to chose between day & night activities and find all the locations on a map with essential information and pictures.
- A Contact form (via email) is provided at the bottom of the page together with links to Social Media in the Footer.
- Wireframes
- Interactive navbar (fixed on mobile browsers) with 4 links + logo.
- Home, About, Locations (map) and Contact sections.
- Footer with social media links and copyright message.
Colours throughout the page fall in the spectrum between #fafafa (off white) & #1c334d (dark blue) to fit with the 'Day and Night' theme of the website.
- "Japanese Brush" font for: Logo and sections heading.
- "Crimson Text" font for small headings and nav-links, to add an elegant touch.
- "Helvetica Neue" font for body content (Default Bootstrap font-family), to keep the website's content clean and easily readable.
- "Sans-serif" as fall-back font for every text.
- Images were carefully selected to match with the background colours and create a sense of 'authenticity' in the website.
-
Designed with HTML5, CSS3, JavaScript + libraries (Bootstrap, jQuery, GSAP).
-
Responsive navigation bar (fixed on mobile and Safari browser) present throughout the page to move from one section to the other with ease.
-
Home/landing section with auto-playing slideshow.
-
About section with:
- Information about the website and the different activities/locations available.
- Links to the specific locations from the 'Location section'.
-
Location section with:
- First menu to select day-time or night-time locations (based on the choice the section background and map colour will change).
- Second menu to select one of the two groups of locations available based on the first selection (i.e. Restaurants and Bars & Clubs).
- Third menu to select a specific location (that will show on the map).
- Map with markers and popup information for each location.
-
Contact section with contact form
-
Footer with links to social media and copyright message.
-
404 page with link to the homepage
- A section to book a trip directly from the website.
- A review section with comment from previous customers/users.
- Bootstrap
- Used to assist with styling and responsiveness of the website
- FontAwesome
- Used to create social media icons in the footer
- Google Fonts
- Used to import 'Crimson Text' font
- Online Web Fonts
- Used to import 'Japanese Brush Master' font
- GSAP
- Used to add animation to the About section
- jQuery
- Included with Bootstrap to create responsive navbar and used to simplify scripts.
- Email.js
- API for sending emails through contact form
- LeafletJS
- API for interactive maps
- Gitpod - Used as workspace IDE (Integrated Development Environment).
- GitHub - Hosting platform for version control, used to manage my repositories.
- Git - Version control software to record file changes and updates.
- SLACK Community - Source of assistance and inspiration.
- Stack Overflow - General resource.
- Youtube - General resource.
- CSS-Tricks - General resource.
- W3.CSS - General resource.
- Balsamiq - For designing wireframes.
- TinyPNG - For compression of images.
- Toolur - For re-sizing images.
- Autoprefixer - Used to parse CSS and add vendor prefixes.
- Google Mobile-Friendly Test - To check whether the website is Mobile-friendly.
Testing documentation, including User Stories, can be found here: Testing
- Navbar was disappearing on page load: The issue has been solved by setting display: 'block' on page load, for desktop browsers, and by setting fixed-top navbar for mobile browsers (as the navbar was oversensitive to window scroll, causing additional issues.)
- When selecting a location from the respective menu, the popup for the location's marker was overflowing out of the map (in smaller screen sizes): The issue has been solves by centring the popup in the middle of the map, rather than the marker.
- When pressing the DAY or NIGHT button in the 'Location section', the map gets populated with all the markers connected to the relevant locations (all collected into a layer). However, I could not connect each specific marker to the respective button from the "locations' list": The issue has been solved by setting the map so that when pressing a specific location button, the map would clear from all the markers present and would generate a single new marker for the desired location.
- Sometimes, the home slideshow becomes shows the white background instead of displaying the next picture.
- When clicking on a location button for the first time, the map does not center the marker's popup. This causes the popup to partly overflow out of the map in small screen sizes. However, the problem does not reoccur after the first click.
- On certain mobile browsers (i.e. Safari), it is sometimes necessary to hold pressed on a marker (on the map) in order to open the popup attached, instead of just tapping on it.
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu ("gear" icon).
- Scroll down the Settings page until you locate the "GitHub Pages" Section.
- You will find the current message: "Pages settings now has its own dedicated tab! Check it out here!". Click the link.
- Under "Source", click the dropdown called "None" and select "Master Branch".
- The page will automatically refresh.
- Go back to step 4, once you have clicked the link, you will find the published site link.
By forking the GitHub Repository you make a copy of the original repository on your GitHub account to view and/or make changes without affecting the original repository. Forking requires the following steps:
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- On GitHub, navigate to the main page of the repository.
- Above the list of files, click the green 'Code' button.
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Terminal
- Change the current working directory to the location where you want the cloned directory to be made.
- Type 'git clone', and then paste the URL you copied in Step 3: (https://github.com/Hidnish/Milestone-Project-2-Kyoto.git).
- Press Enter. Your local clone will be created.
- All the pictures uploaded were retrived from: Unsplash
- Favicon taken from: 123RF
- Custom font "Japanese Brush Master" taken from: Online Web Fonts
- About section content was partly based on:
- Information about specific locations was based on:
- Main sources (Specific credits are provided in the respective files, above each piece of code):
- W3Scgools
- Stack Overflow
- YouTube
- CSS-Tricks
- CI-MS2-Safari-Africa
- Code Institute tutorial: Rosie - Resume Project.
- Thanks to my mentor : Oluwafemi Medale, for his support and feedback.
- Thanks to the Slack community for providing essential knowledge.