I have been dealing with anxiety attacks and panic attacks most of my life. Many of my friends as experienced a panic- and/or anxiety attack at least once in their life.
What happens then is that your minds imagination creates a scenario where you think you're in danger, but you're actually just get mental blocking, difficult breathing and paralysing motorskills. It can be difficult to calm yourself down from the attack, that's why I created this online informational assistant to help and guide you. Over the years I've gotten through anxiety attacks much better once I've had a person to talk to. So my idea is that Anxiety Buddy is a virtual assistant that can help you through anxiety attacks when you can't get hold of anyone to talk to.
!!!!!!! Responsive Mockup
This website has three pages. One home page where you'er welcomed to our site and get a quick brief on what the sites purpose is together with some general information about anxiety. One Exercises page where you get some guidance on what to do if you happen to experiece an anxiety attack, to help you feel less alone and calm your mind as you might experience the anxiety when you're visiting that page.
The purpose for you is to come back into your body and release the worry. Then the last page for contact, where you can contact us for more information or assistance. If you happen to want more information, get personal assistance this can be a solution for you. Since this website is focused on being a global guiding tool, we can not submit any medcial assistance, but more of being the buddy you need when your mind is rushing and you can't gather your thoughts when life feels like too much. The goal is to develop an online tool that works like a digital buddy.
Since the website is responsive both as a mobile screen and desktop. We want it to be able for use wherever you are. We have chosen the colours dark green, light beige and dark grey as the colours for the page. We want high contrast but an inviting color combination to both please the eyes and to help those who might be sight impaired.
Navigation Bar Featured on all three pages, the full responsive navigation bar includes links to the Logo, Home page, Exercises and Contact page and is identical in each page to allow for easy navigation. This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.
!!!!!!!!Nav Bar
The landing includes a photograph with text overlay to allow the user to see exactly which location this site would be applicable to. This section introduces the user to Anxiety buddy with an eye catching animation to grab their attention !!!!!!!!Landing Page
The footer section includes links to the relevant social media sites for Love Running. The links will open to a new tab to allow easy navigation for the user. The footer is valuable to the user as it encourages them to keep connected via social media Footer
The exercises have a few helpful guiding tools where you can read through how to best calm yourself while you're experiencing an anxiety attack. This section is valuable to the user because they can easily access information whenever they need it and help themselves, if not contacting a friend or family member, get through it without doing anything drastic like hurting themselves.
This page gives the user the option to contact us if they need to. Either to get mor information, add additional value to our site or just reach out because they're not well. Anxiety buddy has as an ambition to reduce mental illness and improve mental health. The user will submit their email and name, after that we can respond to them.
The thought is to add videos, more instructive images, to add to the value that Anxiety Buddy gives the user. We want this to be another page that can asists you and even interact with the user so that the user gets good information, help and assistance to increase their mental health wellness.
Building this site has taken a lot of effort. I am a student working really hard against tight deadlines and I'm very happy with I've done so far with Anxiety Buddy. Allthough I am not completely happy with the outcome, I've moved around the CSS and HTML enough to be sure that this is as good as it gets. The Anxiety buddy page is a work in progress and muy ambition is to get it to work as an interactive buddy. Over the years I've gotten through anxiety attacks much better once I've had a person to talk to. So my idea is that Anxiety Buddy is a virtual assistant that can help you through anxiety attacks when you can't get hold of anyone to talk to. The visual and functional parts are there, allthough it's not working quite as intended. My testing has been thorough. I have a hyperlink on the website to the main page of World Helath Organisations website, for more thorough information.
You can access the Anxiety Buddy website both on a desktop, tablet or smartphone and the website will be responsive. The page adapts to width and length of the page to better suit the user. The website also works in both Google Chrome, Firefox and Safari, and I've done several test with Anxiety Buddy and it works on both an Android smartphone and iPhone.
I have discovered that the checkbox doesn't go away though I've followed the instructions in Love Running instructional videos. I have tried several times and doesn't get why it persists. Another issue is that I don't manage to get the text of the website to place itself on the picture I've chosen as a background, which is very annoying. So the text keeps put in the lower bottom of the page.
Validator Testing HTML I have three consisting problems that continue to appear. They a displayed under Problems while running the code in Gitpod. I haven't gotten the oppurtunity to solve that. CSS No errors were found when passing through the official (Jigsaw) validator
I got the Favicon to work right up until the 13th of june 2024. I do not know or understand why it doesn't work all of the sudden, I've tried several times to fix it, add it again, erase and create a new file, it just doesn't work after I started writing the README.
The checkbox doesn't disappear in the head section. I have also not managed to get the menu to works functionally when collapsed in smartphone or tablet mode. I have made several changes to the code but can't figure out the issue.
The three different pictures doesn't work either. I have added all three files and connected them to each page but I can only see the same one of the Tree. After several attempts to change that and make the three separate pictures showing, it still didn't work.
I have deployed the project of Anxiety Buddy through Github. Working in Gitpod my account is @teddylindstrom.
I got my three different picutres from Unsplash.com, their free section of pictures. I credit support from my very calm, supportive and knowledgable mentor Moritz. When I've gotten stuck I've relied mostly on Google and also ChatGPT, which has explained every issue I've run into, and then given me explanations to me as I've asked it to give them to me; just like the beginner I am. Chat GPT has then given me a thorough explanation on explanation so that I can help myself get through every situation or obstacle and helped me found what code I wrote wrong.
The pictures where taken from Unsplash free page. I typed mental health and serenity and came up with these three pictures in the project. Instructions on how to implement form validation on the Sign Up page was taken from the instructional video Love Running, provided from Code Insitute. The icons in the footer were taken from Font Awesome
The images where taken from a website called Unsplash.com.