HistoryOnics is a tourist history website that focuses on each province of Ireland. The site aims to provide information about Irelands' history and interesting places to visit for both local and international tourists. The site provides maps and videos of each county, within each province and links to social media for users to interact with the site. The User can also contact the site should they have more queries.
Link to live site - HistoryOnics
The aim of this site is to provide a one-stop source for knowledge of the country of Ireland. This is an informational site and is designed so as the user can access all information, both historical and touristic, without the need to search elsewhere. Although an informational website, the user can interact by social media and a contact page. As the site is responsive on all screens, the user can access the site while travelling and can keep returning as they navigate their way around Ireland. The site is designed for the user to have quick access to information as they need it, including maps, brief descriptions and videos of each area.
- As a user, I want a website which provides easy access tourist information for the whole of Ireland.
- As a user, I want a website which provides video information and maps to assist with locating areas and places of interest.
- As a user, I want to easily navigate to each county and learn about the areas.
- As a user, I want to learn more about the website providers.
- As a user, I want to have access to the site social media.
- As a user, I want a site which allows me to repeat visit for information as I travel around each county of Ireland.
- As a user, I want to have the ability to contact the site for information and queries.
The mock-up for this project was created using Balsamiq. Aspects of the mock-up have changed during production due to increasing user experience and visual effects. Changes include moving the Logo to the centre and creating a Nav menu bar which is replaced by a Hamburger bar as devices become smaller.
The site is made up of eight pages. They are constructed of:
The site opens with a landing page that presents a Hero Image with a zoom effect. For wide screens, there is a navigation menu on the top right-hand side. This turns into a hamburger bar for smaller screens and is placed on the left of the screen. The logo is also used as a navigational tool on each page to bring the user back to the landing page. The nav bars are provided on each page, except the submission page, to guide the user and are responsive on all screen sizes.
The centre structure of the page provides a short introduction to the site. The heading used for this piece also incorporates fixed icons of a person strolling, this is to complement the title 'A Stroll Back In Time'. At the bottom of the landing page is also another navigation block which is broken into four separate images with access to four separate pages. The images change colour to grayscale when hovered over to allow the user to know which block they are choosing. The footer holds the social media icons, which are responsive on all screens throughout each page of the site.
The visit pages provide a short intro to each county with a map and youtube video guide. The map can be clicked upon and opened to a new window. The videos each play within the existing site page.
The About Us page introduces the user to the team and provides a brief description and biography of the site owners. Images of the team have also been added to the page.
The contact page provides a query box and requires the user to complete various fields including Name, Phone, and Email. These boxes are required fields and have a * to indicate this to the user. The email address provided by the user must be correctly structured to submit a query.
The submission page appears after the user submits a query via the contact page. The page provides a message stating that the query has been received. The user can then navigate away from this page by clicking on the Logo or nav bar provided.
The body of the site uses font style "Lato", "sans-serif". This is in contrast with the logo and headings which uses the font style "Cormorant SC", "sans-serif". Initially, Cormorant SC was used throughout as the style provides a more ancient feel to the historic site. However, this font appears only as uppercase and therefore the body was replaced with Lato typeface to provide a more natural read for the user. Sans-serif is in place as a secondary default option should either of the first options fail. Fonts were taken from Google Fonts.
The colour scheme is inspired by the traditional color of Ireland, green. The shade #E2EECC was chosen as this colour is soft yet also provides a more ancient feel within a green tone. The text is set as #2f4f4f, which again is in keeping with the green tones and historic feel of the site. Grayscale has also been used when hovering over the navigational block of images at the bottom of the landing page. To contrast against the green tone, #f1f1f1 has been used for the text on all navigation bars and blocks. Finally, #45a049 has been used when hovering over the submit button on the contact page.
For smaller devices, the colour scheme has changed to allow a better visual experience. The body background changes to #faebd7 which provides a lighter background against the now #000000 text. The hamburger icon is now visible with #FF7F50 and upon opening the menu, the background has changed to #d2691e.
The colour scheme was guided by Adobe Color and HTML CSS Color Picker.
A top navigation menu bar has been put in place for screens 950px and wider. Originally, a hamburger-bar the menu was put in place for all screens, as this seems to be a common theme with other sites currently through further research, however, in order to show adaptability with building this site, the hamburger bar was set in place for screens smaller than 950px. This also shows the responsiveness as the screens are minimized. The top navigation menu bar sits at the top right-hand side of the screen and allows the user to navigate through seven pages (the eight-page being the submission button which cannot be accessed unless pressing 'submit' on the contact page). Each element becomes highlighted as the user hovers over the tabs separately. This aspect was influenced by the W3School via W3School
Originally the Nav bar was quite plain and lacked style. Following some sound advice and suggestions via Peer-Code-Review on Slack, the Nav bar was changed to a more visually pleasant image for the user.
New Nav bar which runs across the full screen:
A hamburger bar has been placed for small screens including tablets and mobile devices. This button sits at the top left-hand corner of the screen and provides the user with a full list of pages, as per the top navigation menu bar. The icon can be recognized by the three lines visible, upon the user clicking on this, the button changes colour and opens to provide a list of pages. The X on the open tab of the menu must then be clicked to close the hamburger bar. This aspect was influenced by W3School Collapsed Sidepanel.
The logo 'HistoryOnics' is a play on words. Histrionic, meaning overly dramatic or theatrical. is in keeping with the dramatic history and storytelling of Ireland. The font, "Cormorant SC" may also be seen as dramatic, coupled together with colour #2f4f4f brings a bold effect, in keeping with an Irish historical theme. Upon clicking on the logo, the user is brought back to the landing page. The logo is responsive on all screens.
The Hero Image is of the Cliffs of Moher and is synonymous with Ireland across the globe and presents an immediate interaction with the user with the zoom-in effect. The zoom-in effect is responsive to all wide-screen sizes. The Hero Image was sourced via Google Images from Cliffs of Moher.
The navigational block is provided for further interaction with the user. The user can hover over each image, which will then become grayscale, and upon clicking on the chosen box, the user will be directed to the chosen page. Famous aspects of each province have been used for imagery with bright colours to further attract the user visually. This block is responsive to all screens.Images are sourced via Google Images via: Connacht Image, Munster Image, Leinster Image, Ulster Image
The social media icons can be accessed on all pages and will bring the user to four separate external sites including Twitter, Instagram, Facebook and Youtube. The setting of these icons has been influenced by the Love Running module as per Code Institute. Icons were accessed by Font Awesome.
Videos have been incorporated as part of the Visit Pages for each county within Provinces. All video material has been sourced via Youtube. Each video provides information as per the county it is relating to. The videos were originaly to be placed on the left-hand side of the page, however, this was not as visually appealing as when it is placed on the right. Each video is responsive on all screens and will play within the page, without increasing in size. Videos are sourced from:
- Youtube - County By County Show
- Youtube - The Heart of Ireland
- Youtube - Kerry by a Local
- Youtube - Galway City
- Youtube - Mayos Historic Houses
- Youtube - Epic Dublin
- Youtube - Carlow Hidden Gems
- Youtube - The Fall of the House of Kildare
- Youtube - Kilkenny
- Youtube - Cork Military History
- Youtube - County Louth
- Youtube - Donegal Tourism
- Youtube - Visit Cavan
- Youtube - Antrim Coast
- Youtube - Tyrone
- Youtube - Flavour of Ireland
- Youtube - Pocket History of Londonderry
Maps have been incorporated onto each Visit Page, under each county separately. The maps are responsive on all screens, however, must be clicked within the middle of the map for small mobile devices (eg. iPhone 5). Otherwise, all maps will open and respond to 'View Larger Map' where indicated on the map. Maps will also be responsive when clicked anywhere on the map for all screens. Maps are sourced by accessing:
The contact page is a simple structure that allows the user to provide required and non-required information. The required elements are indicated by * after the element name. This includes First Name, Last Name, and Email. The phone and query box are not set as required. The email element must be correctly formatted to be accepted. The query box is the only aspect that has a placeholder to provide further instruction to the user. This page is accessible via the navigation menu on a wide screen and Hamburger Bar via a smaller device.
The form submission page is presented upon the user submitting a query via the contact page. This page has access to a navigational menu/hamburger bar and Logo which will bring the user back to previous pages of the site. A message is in place acknowledging receipt of the query. A submit button is also in place to allow the user to bring them back to the home page.
The About Us page provides information about how the site was established in the opening paragraph. This paragraph was created using a text creator via volusion.com Below the opening paragraph, there is a Meet the Team. This aspect provides a brief description of the team and provides images of the team members. Public domain images are sourced via pxhere.com
The footer appears at the bottom of each page. The social media icons are centered within the footer and can be clicked on to interact with.
- An e-commerce element would be included where the user can book a specific tour per province. The tours would be broken up into bus and bicycle tours.
- A page dedicated to where users can find the best pubs/restaurants off the beaten track and away from the tourist traps.
- An e-commerce element that sells experiences, eg. spending an afternoon cooking traditional food in a hosting kitchen.
- HTML - HTML the most basic building block of the Web. This is the main language used to develop the site.
- CSS - CSS describes how HTML elements are to be displayed on screen. This has been used to develop the style of the site.
- Java Script - JavaScript was used to construct the hamburger bar.
- Google Fonts - Google Fonts is a directory of font families which was incorporated during the development of the site.
- Font Awesome Icons - Font Awesome is a directory of icons that were used to incorporate icons for social media, text, and headings.
- balsamiq - Balsamiq was used to create a mock-up wireframe for large and small screen devices.
- GitHub - Github is used to host the source code for the site.
- Git - Git is used to manage and keep track of the source code history throughout development.
- Gitpod - Gitpod creates connections between Gitpod and GitHub accounts. Gitpod continuously builds git branches to facilitate the coding process.
- Adobe Color - Adobe Colour has been used to navigate colour charts for the site during development.
- Gimp - Gimp was used to edit and resize images before loading to the site.
- Slack - Slack was utilized by seeking advice and knowledge from students and mentors.
- Visual Studio - Visual Studio was used in the very early phase to gain further understanding of how to properly implement code while gaining confidence with Github.
- volusion - Volusion is a site which drafts copy for paragraphs.
- pxhere - Pxhere was used to source images for the About Us page.
- Google Maps - Google Maps was used to source the map links for each visit page.
- Youtube - Youtube was the source for each video on the Visit Pages.
- Code Institute - Influence with the styling of the landing page was taken from the Love Running module available via the Programme Overview.
- Google Images - Google Images provided images for the Hero Image and Navigation block on the landing page.
- HTML CSS Color Picker - This site was accessed to assist with defining colour.
- Grammarly - This site was used to complete a spell check throughout the site and readme file.
- Home Page html - Error Free Home Page
- Munster Page html - Error Free Munster Page
- Leinster Page html - Error Free Leinster Page
- Connacht Page html - Error Free Connacht Page
- Ulster Page html - Error Free Ulster Page
- About Page html - Error Free About Us Page
- Submit Page html - Error Free Submit Page
- Contact Page html - Error Free Contact Page
- CSS - Error Free CSS
- Home Page Html - Lighthouse Validation Home Page
- Munster Page Html - Lighthouse Validation Munster Page
- Leinster Page html - Lighthouse Validation Leinster Page
- Connacht Page html - Lighthouse Validation Connacht Page
- Ulster Page html - Lighthouse Validation Ulster Page
- About Page html - Lighthouse Validation About Us Page
- Contact Page html - Lighthouse Validation Contact Page
- Home Page html - Lighthouse Validation Home Page
- Munster Page html - Lighthouse Validation Munster Page
- Leinster Page html - Lighthouse Validation Leinster Page
- Connacht Page html - Lighthouse Validation Connacht Page
- Ulster Page html - Lighthouse Validation Ulster Page
- About Page html - Lighthouse Validation About Us Page
- Contact Page html - Lighthouse Validation Contact Page
- Results - Passed
- This test had a reasonably quick first-byte time.
- Zero render-blocking CSS files found.
- Zero custom fonts load in ways that delay text visibility.
- Zero Accessibility Issues were Detected.
- Zero render-blocking third-party requests found.
- Zero security vulnerabilities were detected by Snyk.
- Zero resources were found that were loaded over an insecure connection.
Chrome - The site posed no issues when accessing Chrome. Firefox - The site posed no issues when accessing Firefox, however, upon accessing the submission page, one of the walking icons moves under the text as opposed to remaining beside it.
- The ALT text adds a text description to an image on a Web page, and should be used for all images, graphical bullets, and graphical horizontal rules. Initially, Alt was included in the video and map iframe, however, this brought the Lighthouse Validation score down and created errors within W3 Validator. Once this was removed, the score increased and W3 stated error free.
- Upon adding the back button on the submit page, the button became cut off when resizing to a smaller devise:
Issue was corrected by re-using the css for the contact page submit button:
-
When validating the Visit pages on Lighthouse, errors appeared for all iframes. It was noted that height and width were set as a percentage and were coming up as an error. The height and width were changed to " " which solved the immediate issue. This then caused an issue with the map overlapping with the video upon decreasing the screen size. This issue was fixed by reducing the size of the map and video for a smoother transition when resizing.
-
Github Error - When pushing commits to the repository, a warning appeared advising a file, core.3260 was too big. I was unsure what this file was or where it came from. I researched online, however, this did not assist with understanding the problem. I reached out to the Stack Community and was advised it was cashed files. I undertook further research online and attempted to .gitignore, however, the file seemed to be stuck between a commit and a push. I was unable to resolve the issue so I completed a gitlog and went through commits to see where the issue arose. I was then able to complete a gitreset --hardcode to the point where I would not lose vital information but be able to go back to a point where I could again push commits. This issue was then resolved and I could commit and push commits as usual.
- The need for "git status" is required to see what is waiting in line.
- The need for "gitlog" to see and track all commits to date.
- The need for "git add" as opposed to "git add ." to ensure I am committing what I need as opposed to all waiting in line.
- The need for "git reset --hard code" - Only to be used with care so as not to lose valuable information.
- Keep the server down while saving changes as the server may be running other small programs in the background.
- Access Github by signing into an account
- Access the Repository on the top-right-hand corner of the screen
- Select the Repository required from the list
- Click 'Settings' on the menu tab
- On the left-hand-side of the next page, click 'Pages'
- Under source, select branch: main, folder: root, and then click save.
- Once saved, the site will take time to refresh while it goes public.
- A link will appear stating (eg. of my account): Your site is live at https://toby7658.github.io/History-Onics/
By forking the GitHub Repository, a copy of the repository can be viewed or amended without affecting the original repository.
- Log into GitHub to access the GitHub Repository,
- At the top-right-hand side of the screen, locate "Fork",
- Click on the "Fork" tab,
- You now have a copy of the original repository in your GitHub account.
- Log into GitHub to access the GitHub Repository,
- Under the settings button, click on the tab "Code",
- This will open a dropdown box,
- To clone using HTTPS, copy the link provided under this tab,
- Access the desired IDE (eg. Visual Studio),
- Type git clone, followed by the copied URL,
- Press enter - this has now create your clone in the desired IDE.
- Mentor support and guidance from Jack Wachira.
- Readme support and guidance from Michael McCarthy
- Peer-code-review from Harry Dhillon.
- Facilitator and support from Kenan Wright.
- Facilitator and support from Kasia Bogucka.
- W3C School Collapse Sidepanel W3C School Collapse Sidepanel - This assisted with developing the Hamburgerbar sidepanel.
- W3C School Contact Form W3C School Contact Form - This assisted with developing the Contact Box on the Contact Us page.
- W3C School About Us Page W3C School About Us - This assisted with developing the About Us page.
- W3C School CSS Tutorial W3C School CSS Tutorial - Used for additional learning around the over-all basics of CSS.
- W3C School Hamburger Bar Icon W3C School Hamburger Bar Icon - This assisted with developing the Hamburger Bar Icon.
- W3C School Hamburger Bar side panel W3C School Hamburger Bar sidepanel - This assisted with developing the Hamburger Bar side panel.
- W3C School Hover W3C School Hover - This assisted with creating hover interaction when mouse-over menus.
- W3C School Hover to grayscale W3C School Hover-Effects - This assisted with creating hover with greyscale effects for the province block.
- Linuxhint Linuxhint - This assisted with gaining further knowledge around meta tags.
- Navigation Menu Love Running - This element was influenced by the Love Running module tutorial.
- Markdown Guide Markdown Guide - This was used to understand the basic syntax for Markdown.
- Youtube Youtube - County By County Show - Videos for each county are sourced via Youtube.
- Youtube Youtube - The Heart of Ireland - Videos for each county is sourced via Youtube.
- Youtube Youtube - Kerry by a Local - Videos for each county is sourced via Youtube.
- Youtube Youtube - Galway City - Videos for each county is sourced via Youtube.
- Youtube Youtube - Mayos Historic Houses - Videos for each county are sourced via Youtube.
- Youtube Youtube - Epic Dublin - Videos for each county is sourced via Youtube.
- Youtube Youtube - Carlow Hidden Gems - Videos for each county are sourced via Youtube.
- Youtube Youtube - The Fall of the House of Kildare - Videos for each county are sourced via Youtube.
- Youtube Youtube - Kilkenny - Videos for each county is sourced via Youtube.
- Youtube Youtube - Cork Military History - Videos for each county is sourced via Youtube.
- Youtube Youtube - County Louth - Videos for each county is sourced via Youtube.
- Youtube Youtube - Donegal Tourism - Videos for each county is sourced via Youtube.
- Youtube Youtube - Visit Cavan - Videos for each county is sourced via Youtube.
- Youtube Youtube - Antrim Coast - Videos for each county is sourced via Youtube.
- Youtube Youtube - Tyrone - Videos for each county is sourced via Youtube.
- Youtube Youtube - Flavour of Ireland - Videos for each county are sourced via Youtube.
- Youtube Youtube - Pocket History of Londonderry - Videos for each county are sourced via Youtube.
- Hero Image Google Images - Image sourced via Google Images and originated via Cliffs of Moher.
- Munster Image Google Images - Image sourced via Google Images and originated via Atlantic Way Touring
- Connacht Image Google Images - Image was sources via Google Images and originated via The Planet.
- Leinster Image Google Images - Image was sources via Google Images and originated via Meeting Select.
- Ulster Image Google Images - Image was sources via Google Images and originated via Poster Lounge.
- Github Github Markdown Cheatsheet - This information assisted with understanding the syntax of Markdown.
- Landing Page paragraph Power Trip - Paragraph was taken and added to Landing Page introduction.
- Landing Page paragraph Interview Area - Two sentences taken and added to Landing Page introduction.
- Volusion Volusion - This was used to help create an introductory paragraph for the Landing Page.
- Clare: Atlantic Way Touring, Tipperary: XWhos, Limerick: Embark, Waterford: Thin Line, Cork: Atlantic Way Touring, Kerry: Atlantic Way Touring.
- Galway: Atlantic Way Touring, Leitrim: Love to Visit, Mayo: Atlantic Way Touring, Roscommon: Rosclay Pottery, Sligo: Irish Hotel Breaks.
- Dublin: My World Travel, Carlow: Wikipedia, Kildare: Love to Visit, Kilkenny: Love to Visit, Laois: Wikipedia, Longford: Discovering Ireland, Louth: Discovering Ireland, Meath: Love to Visit, Offaly: Go to Ireland, Wicklow: Izaskun lekue,
- Donegal: Harveys Point, Cavan: Roots Ireland, Monaghan: Sweat Lodge Radio, Antrim: Discover Northern Ireland, Down: Connolly Cove, Tyrone: Wikipedia, Fermanagh: Irish Central Derry: Irish Central Armagh: Wikipedia
Many thanks to my Mentor Jack Wachira for providing solid guidance and support. Thanks to Code Institute for giving me such an amazing opportunity to develop a new career in such a supportive environment. Thanks to the community on Slack who are an ongoing wealth of information and motivation.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
