Wild Atlantic Mindfulness Project 1

Wild Atlantic Mindfulness is a website for users who want an introduction to mindfulness and relaxation, and want to expeirence some of the sights and sounds of beautiful Ireland by watching a 4K resolution video of scenic Irish locations and listening to soundscape recordings from various locations in the country. This website allows users to access information about mindfulness and relaxation with an Irish 'Wild Atlantic Way' theme.

User Story

As a user, I want a brief introduction to mindfulness and to experience some of the beautiful sights and sounds of Ireland. I want the website to be pleasing to my eye, I want it to work effectively on my device and provide feedback via naviation, and I would like to be able to send a message to the site owner.

Features

Navigation Bar

The Navigation bar provides access to each of the three pages of the website; Home, Sights and Sounds, and Contact.

Navigation Hover Effect

The navbar changes colour when a user hovers over it to indicate which button is being selected. There is also a link underline that indicates the current page that the user is on.
User Story; 'I want this feature to help me orient myself within the website and have visual feedback that makes me aware of my current location'

Landing Page

The landing pages offers the user the option to navigate to the various of the sections of the website through the navigation bar. Clicking on the 'Wild Atlantic Mindfulness' logo will take the user back to the homepage at any time. The landing page displays an image of a girl sitting mindfully by the Cliffs of Moher; an iconic Irish landmark. This image suits the theme of mindfulness with an Irish influence. Below the image there is an mindfulness-related quote in Irish.
User Story; 'I want a non-intricate visual layout and a nice colour scheme that makes me feel relaxed'.

Colour Palette

The colour palette selected for this website was inspired by the colours of the natural Irish landscape. The colour palette used can be found at the following location: https://www.csscolorpalettes.com/palettes/932

Mindfulness and Relaxation Content

The text content on the landing page explains the basic definition of Mindfulness and Relaxation, this content is taken from the Irish HSE pages that relate to mental health and wellbeing.
User Story; 'I want to see some Irish text with a translation, something that feels authentically Irish, and I want to have a brief introduction to mindfulness and relaxation'.

Footer

The footer on this website directs a user to my Github profile where the website source code can be accessed.
User Story; 'I want to be able to see more of the creator's work online'.

Sights and Sounds

The Sights and sounds page offers the user the ability to watch a high resoluton video that explore some of the most beautiful places in Ireland as well as the option to hear some relaxing Irish sounds that can be used in miditation sessions. The recordings are; a stream, the Dawn Chorus, and an Irish whistle.
User Story; 'I want to experience some sights and sounds of Ireland that will make me relaxed and appreciate the beauty of Ireland'.

Contact Form

The contact form allows a user to enter their details and country of origin to contact. User Story: 'I want to have the ability to send a message to the creator'.

Future Features

In the future I would like to add a Map feature that would allow users to view locations and activities around the Wild Atlantic Way.

Testing

The site was tested with the 'inspect' option in Firefox and Chrome, by employing the different device screen sizes. all of the links have been tested to ensure that they lead to the correct places. The video content was altered to erase the autoplay function (which is not acceptable). The form was tested by populating the form and submitting the information.

Validator Testing

The code passed html validation with no errors.

The css code passed css validation with no errors.

The Lighthouse score accessibility score was high, but the performance was low (this is likely due to the size of the image content)

Bugs

There was a bug when the video was inserted with the video element, this was solved by taking the embed code from YouTube directly.
The from initially returned a 404 error, because the form action attribute was set to a php location. This was removed. Unfixed Bugs: The performance score from Lighthouse was low due to the size of the images.

Deployment

The Github deployment process consisted of navigating to my Github repo, selecting 'Settings' from the options bar, then navigating to the 'pages' location. From the 'pages' location, selecting the repo branch and selecting 'publish'. This provides a livelink where the site can be accessed and used.

The site was deployed before submission so that a live link could be used and referenced on other devices and sent to my tutor for review.

Credits/References

Code

The contact form code was adjusted from the W3Schools, stacked from code W3Schools Stacked Form

The footer uses the Github social icon from Fontawesome Fontawesome Github Logo

The Header formatting code was adjusted from the Love Running Code Institute Peoject love running code

Media and Content

The main image is taken from Elias Ehmann's Unsplash Account main home image

The mindfulness and relaxation information is taken from the Irish HSE:

HSE Mindfulness

HSE Relaxation

The scenic Ireland video is taken from: Scenic Relaxation Youtube Channel

The stream audio recording was taken from: Sonicport Freesound Profile
The Dawn Chorus audio was taken from: Synge Freesound Profile
The Irish Whistle audio was taken from: Nigelnix Freesound Profile

Acknowledgements

Chris my mentor for all the guidance and good cheer.
Helen Mill for all of her help in the lead up to enrolment.
The Slack community for the troubleshooting.
Andrew Farrell who helped me with some code.