View the live project here: https://wyne-ybanez.github.io/mental-health-KGK/

COVID-19 has brought a lot of unease and anxiety to people who may have never encountered these feelings before, the on-going feeling of the unknown can overwhelm anyone.

The background of our idea came from the HSE Covid-19 app where users track their physical symptoms, whether they feel good or aren’t feeling great, and the health services deliver advise on what course of action to take.
Following the drastic rise in those affected by negative mental health symptoms, we wanted to expand on this concept. We are providing an app where the user can track their psychological symptoms, enabling communication with mental health services who can offer help and advice, called ‘Connected’.

We hope to take advantage of the Technological savviness of the younger generation as a means of penetrating the market. We believe it is still a Public Need which is not being fulfilled to the full effect by either private/public enterprise. The data collected regarding user’s symptoms can be utilized by our team. With the adoption of machine learning algorithms and psychological analysis, we aim to provide highly personalized and catered solutions to our users.

Economic and health impacts of the COVID-19 pandemic have been asymmetric across all age groups especially youths and elderly and the Pandemic has created evident trends in mental health issues across the globe. Coronavirus has had huge implications on the Irish people’s livelihoods by ways of losing jobs, lack of social interaction and social distancing. Technology is how we aim to tackle this Lack of Communication

Humans are susceptible to countless illnesses, diseases, and injuries. As a group we are left aghast to the lack of attention given to our mental well-being. In a survey published by Mental Health Ireland in 2018, they reported that 93% of people felt that there was more we should be doing to improve or mental health and wellbeing. Our brains are sophisticated machines, filled with emotions, thoughts, and different layers of consciousness . Given our psychological modern-day understanding, it is of our opinion that now is the perfect time to apply this psychological understanding through useful and regulatory features of Connected.

• Headspace: Standard features include a timer, e-mail reminders, an app community, progress tracking, program training. Strengths: high-quality short video infographics, which compliment guided meditation tracks. Headspace has 10 million+ installs on the Google play store.

• Calm: Meditation, sleep aid, gentle movement and stretching, music designed to help focus, relax and sleep. Calm has10 million+ installs on the Google play store.

• Moodfit: Track and make daily goals to improve one’s mood, positive reinforcement messages, new habit help, mood tracker and journal, understanding relationship between lifestyle and mood. Mood has 10,000 installs on the Google play store.

• Student Health App: offers plain talking reassurance, info + advice on over 125 topics. A strength of this app is its aim at university students however weaknesses could be its lack of features and home screen. Student health app has 10,000 installs on Google play store.

• Chill Panda: Interactive game for kids, a panda avatar to explore world filled with positivity and coping techniques. This app is based on studies which show distraction as a key help for anxiety in kids.

There is currently a huge need in Ireland for health support for the public and not enough capacity for the growing demand. Coronavirus has only escalated the issues that many people have been struggling with and the public’s cry for help isn’t getting enough attention as the pandemic takes over national and global news feeds. Connected is focused on improving public health by advocating the importance of addressing mental health as outlined by the WHO

• Our service will be delivered via app on mobile devices, tablets, and view web browser.

• The key feature of this app is the inclusion of the user’s ability to track how they feel and access their log history.

• Our ‘Big Red Button’ is an emergency feature that will be instantly available on the app or through the user’s device widgets screen and without the need for internet connection.

• Access to a support group/community, links to other mental well-being apps, tips, and advice on how to best look after yourself, and a daily motivational quote are all part of the range of features included.

• Visitor Goals:

  a. I would like to know the purpose for the creation of the website from the first instance of opening it.
  b. I would greatly appreciate it if the website were easy to navigate.
  c. I expect the website to display relevant content and stay consistently relevant as I explore the site.
  d. I would appreciate it if my interactions with the site were acknowledged so that I know what I am doing and where I am going.
  e. I would like the content to be structured and easy to follow.

• The overall project will use the colors Hot Pink, Blue, Silver and white.

• Montserrat is the font used for the body, it looks clean and professional.
• Roboto is the secondary font - used mainly for headings.
• Sans serif is the fallback font should the fonts be imported incorrectly.

The website should be responsive and confirm all interactions.

There should be some sort of indicator or animation that can confirm whenever the user is hovering over a button or clicking on it when using a computer or desktop.

It should shrink windows and align items correctly when the user is minimizing the window or using a mobile phone. The website should be responsive when viewed on modern devices.

The website should function accordingly in modern web browsers.

The user should be able to interact with the website and function according to the given text i.e. Clicking on 'Contact Us' should bring the user to 'Contact Us Form'.

Fade animations should be present on accordingly as the user scrolls down.

The user should be able to navigate the website at any point in time.

The content of the website should stay relevant and appropriate.

The buttons leading to separate pages should appear in good time in preparation for the user's desire to know more about the candidate.

The content should be clear and presented without any distractions. Ideally the user should know where and what part of the website they are reading/exploring.

• HTML5
• CSS3
• JavaScript

• VScode: - The IDE used to code the website.
• VSCode extension: LiveServer

1. AOS:
   • This JS library was used for the animations on scroll.
2. HVR:
   • This library was used for the hover effects of the navbar items.
3. Bootstrapv4.5.3:
   • Bootstrap was used for the overall components documentation and responsiveness of the website.
4. W3Schools
   • Documentation for Media Queries and CSS when I encountered bugs.
5. Balsamiq:
   • Balsamiq was used to create the wireframes during the design process.
6. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
7. Git
   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
8. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
9. Google Fonts:
   • Google fonts were used to import 'Roboto' and 'Montserrat' as the chosen styled fonts for the site.
10. Chrome Developer Tools:
    • Used to debug and style with css for the whole project.
    • Used for media queries
11. Ami Responsive
    • Used to test for website responsiveness and media query establishment

1. Log into Github and Locate the relevant repository. Here is a link
2. Click on the settings buttons on the horizontal menu
3. Scrolling down until you reach "Github pages"
4. There is a heading named "Source". There is a button underneath it. Click on that button and change it from "none" to "main". Then click "save"
5. You will have to scroll down to the heading "Github Pages". The published site with the link should be there.

You can fork the repository through the following steps. Forking the repository means you will have a copy of the repository and any changes you make will not affect the original repository.

1. Log in to GitHub and locate the GitHub Repository. Here is a link for the repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu. Looking towards the right of the page. Locate the button "Fork" then click
3. You should now have a copy of the original repository in your GitHub account

This is used when you would like to make changes to the project code

1. Should you wish to use a different IDE like VSCode. You first log in to Github and locate the required repository. Here is the link for this repository
2. Open a new terminal on Git Bash
3. Type git clone, and then paste the URL you copied

$ git clone https://github.com/wyne-ybanez/mental-health-KGK.git

Here is a link that can explain this process further. Click Here

• Gavin Kiely
• Katie McCarthy
• Kate Hennessy

• Animate on Scroll used throughout the entire website. Check it out here
• Hover Animation for the Navbar
• Transparent Navbar Code from Stack Overflow - Here's the link
• How to keep the navbar sticky. This is the solution
• Transparent Navbar with scroll effect when scrolling solution
• Solution for full page background Image. This is the website
• Solution to darken the background image from stackoverflow
• About Me second border behind the main image border
• Work History Timeline guide
• Documentation for Bootstrap Carousel for Testimonials
• Documentation for Bootstrap Contact Form
• Adam Sky's code solution to center icons for the footer - here is his github repo
• Underlining the Heading with adjustable border - this is the solution
• Debug solution for unconnected underline after icon. Click Here to see bug. This link will lead you to the solution
• WebCifar's code used for the Projects Section design
• Form validation debug solution (by user 'ralphm') found in this forum
• MDBootstrap.com - Footer guide
• Icon Hover Effects
• Website favicon

• One page style website, About me section design, Project Section styling and Footer design inspired by WebCifar (Shaif Arfan).
• I received Inspiration for the social icons within the Banner section from Code Institute Student David O' Shea, his MS1 Project
• Timeline Section inspired by Code Institute
• My Mentor Dick Vlaanderen for his continuous feedback
• Tutors at Code Institute for their on-going support
• Jim Lynx a Code Institute lead who provided me invaluable insight
• Code Institute's Slack community which provided me with ideas as to how to approach the project