HeartCare Hub is a responsive website that can be viewed and accessed in a wide range of devices. It is aimed towards medical professionals. Under intentions of recruitment, this website will introduce them to the scope of cardiac surgery and the roles and responsibility involved with the practice.

Research have shown that most medical websites use blue as the primary theme to promote trust and professionalism[1]. However, I have chosen a set of colours that provide an association to the colours of the heart to correspond with the theme of cardiac surgery. Below are the set of colours chosen to represent the website.

• #8C0032 used for primary text.
• #8C0032 used for primary highlights.
• #3d3035 used for secondary text.
• #fff used for secondary highlights.

I used coolors.co to generate my colour palette.

Research was conducted on the preferred typography of healthcare websites. As HeartCare Hub can be referred to as a healthcare website, using similar typography will respect the convention and encourage consistency.

These two fonts were recommended for the use of healthcare websites: [2]

• Source Sans pro- sans-serif font
• Crimsons text- serif font

The applied use of a combination serif and sans-serif is further recommended in a medical website to provide contrast.

Therefore, these two recommended fonts will be used along with different font-weights accordingly. Only two fonts will be used as three or more can make the website appear excessive and lose professionalism [3].

These fonts will be taken from Google Fonts and used within my Cascading Style Sheets (CSS).

Icons from Font-Awesome will be used to provide visualisation amongst the text.

• Source Sans 3 was used for the primary headers and titles.

• Crimson Text was used for all other secondary text.

• Font Awesome icons were used throughout the site, such as the social media icons in the footer.

• As a new site user, I would like to gain knowledge of cardiac surgery and what it involves, so that I can gain understanding.
• As a new site user, I would like to know if I am eligible for the role, so that I can consider the job.
• As a new site user, I would like to know where they do cardiac surgery, so that I can consider the location of employment.
• As a new site user, I would like to know the benefits of being a cardiac health professional, so that I can consider it as an employment.

• As a returning site user, I would like to know the locations, so that I can consider the locations for employment.
• As a returning site user, I would like to find contact information, so that I can get in touch for potential employment.
• As a returning site user, I would like to gain resources, so that I can be knowledgeable on the commencement of employment.

• As a site administrator, I would like to have a clear logo, so that I can increase my brand recognition.
• As a site administrator, I would like to add my social media links, so that I can improve my online presence.
• As a site administrator, I would like an intriguing prompt, so that I can increase the likelihood of recruitment
• As a site administrator, I would like to create a way to connect, so that I can foster trust and credibility with my target audiences.

To follow best practice, wireframes were developed for mobile, tablet, and desktop sizes. I've used Balsamiq to design my site wireframes.

• Location Cards

  • In the index page, I have created cards that enable site users to redirect themselves to their desired area of centres. These cards incorporate an interactive zoom hover effect. This feature allows site users to easily find information about where they can work. The cards redirect them to the location page, which displays hospitals in the desired area.

• Information page

  • When a site user clicks on 'Cardiac Surgery' in the navigation bar, they will be redirected to the information page dedicated to cardiac surgery. This page provides comprehensive navigation, offering detailed information about various aspects of cardiac surgery. This feature allows users interested in cardiac surgery to easily access and gain valuable information about the practice. YouTube videos were also implemented to aid visual and audio learners.

• Call-To-Action

  • This call-to-action section is located on the index page. It is designed to prompt target audiences to seek more information regarding the practice. The section contains a button with a clear imperative message, 'Find out more.' Additionally, it features an image of a group of smiling healthcare professionals to associate a positive nature with the employment and encourage recruitment.

• Map to the hospitals and contact information

  • Information about the centres' locations is available on the dedicated location page. You can find the address, contact details, and a hospital image for easy recognition. Additionally, there's an embedded Google Maps feature to enable users to quickly determine the hospital's proximity. This information is valuable for users considering these hospitals for employment, as they can assess accessibility and convenience.

• Contact form

  • A user-friendly contact form that allows users to share their details and express concerns or questions is implemented in the contact page. This not only fosters a sense of trust but also serves as a relationship-building feature. Furthermore, the provided details can be a valuable connection point, enabling us to keep track of users interested in employment opportunities on the site. Upon submission of the form, a confirmation page is displayed to provide feedback on the successful completion of the submission process.

• Social Media Links

  • In the footer section, you'll find links to our social media profiles, providing an avenue for enhanced connection with site users and contributing to the establishment of a robust online business presence.

• Logo

  • The navigation bar features a distinctive and memorable logo—a heart accompanied by the company name, strategically designed to resonate with cardiac surgery. This logo not only ensures clarity but also promotes brand recognition, fostering a stronger connection with our audience.

• Customer Testimonials

  • Incorporating testimonials and reviews from our users will significantly bolster the website's credibility and trustworthiness. This addition is poised to enhance user engagement, encouraging repeat visits. Furthermore, these testimonials provide a platform for users to articulate the benefits they've experienced, effectively communicating the value of our website.

• "About Us" page

  • Introducing an about us page will allow site users to learn more about the organisation fostering trust and credibilility.

• Question and Answers

  • The integration of this feature will enhance user experience by streamlining site navigation, ultimately saving users valuable time in accessing the information they seek.

• HTML used for the main site content.
• CSS used for the main site design and layout.
• Git used for version control. (git add, git commit, git push)
• GitHub used for secure online code storage.
• GitHub Pages used for hosting the deployed front-end site.
• Gitpod used as a cloud-based IDE for development.
• Bootstrap used as the front-end CSS framework for modern responsiveness and pre-built components.
• Balsamiq used to make wireframes.
• DevTools used to debug.

For all testing, please refer to the TESTING.md file.

The site was deployed to GitHub Pages. The steps to deploy are as follows:

• In the GitHub repository, navigate to the Settings tab
• From the source section drop-down menu, select the Main Branch, then click "Save".
• The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here

This project can be cloned or forked in order to make a local copy on your own system.

You can clone the repository by following these steps:

1. Go to the GitHub repository
2. Locate the Code button above the list of files and click it
3. Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
4. Open Git Bash or Terminal
5. Change the current working directory to the one where you want the cloned directory
6. In your IDE Terminal, type the following command to clone my repository:
   • git clone https://github.com/mikavir/heartcare-hub.git
7. Press Enter to create your local clone.

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed. A tutorial on how to do that can be found here.

By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. Once clicked, you should now have a copy of the original repository in your own GitHub account!

There are no differences identified between the local and deployment.

• [1]doctorlogic.com. (n.d.). Beyond Blue and White: A Guide to Choosing Medical Logo Colors. [online] Available at: https://doctorlogic.com/blog/medical-logo-colors.html#:~:text=Why%20Are%20Blue%20And%20White.
• [2]Anon, (n.d.). Choosing The Best Fonts For Dental And Medical Websites | Dental CountryTM. [online] Available at: https://dentalcountry.com/doctors/articles/choosing-the-best-fonts-for-dental-and-medical-websites/#whatis [Accessed 10 Dec. 2023].
• [3]ThoughtCo. (n.d.). Everything You Need to Know About Choosing the Right Font Family. [online] Available at: https://www.thoughtco.com/font-families-basics-3467382.

• I would like to thank my Code Institute mentor, Tim Nelson for their support throughout the development of this project.
• I would like to thank the Code Institute tutor team for their assistance with troubleshooting and debugging some project issues.
• I would like to thank the Code Institute Slack community for the moral support; it kept me going during periods of self doubt and imposter syndrome.
• I would like to thank my partner Jon and my family, for believing in me, and helping me in this transition into software development.
• I would like to thank my employer, for supporting me in my career development change towards becoming a software developer.