Flippin' Proud is a collaborative team project initally developed and submitted as part of Code Institute’s #ProudCoders June 2021 Hackathon. The application's primary function is to celebrate Pride month and its themes of diversity, visibility and community. More specifically, the programmers set out to help educate and bring people together by showcasing a selection of pioneering LGBTQ+ figures both past and present, as well as the roles they have played in furthering the causes of equality and inclusivity. The efforts and bravery of these icons have helped combat ignorance and intolerance across the globe, and laid the foundations for others to come forward and work towards a brighter future.

Visitors to the site can interact with flipcards of the aforementioned figures by clicking on the respective image (on the front of each flipcard) to flip the card over and view an information panel highlighting the importance of that individual to the LGBTQ+ community.

The project has been made possible thanks to the hard work and collaboration of the following team of developers:

• John Doyle
• Christine Greaney-Kelley
• Paul Harrington
• Steven Kenny
• Adrian Looney

This website adheres to the principles of User-Centred Design (UCD), which focuses on placing users at the heart of the design and development process.

• "As a user, I want to be able to engage with the site intuitively and understand its main purpose immediately."
• "As a user, I want to be able to easily identify what I need and navigate the site in order to get to it."
• "As a user, I want to be able to access concise but informative content that's displayed in an aesthetically pleasing manner."
• "As a user, I want to be able to view the site clearly and responsively across a range of different devices (from mobile to desktop)."
• "As a user, I expect the site to conform to current UX accessibility best practices."

• "As a developer, I want to contribute to a spirit of open-source collaboration and teamwork while enhancing my own communication and problem-solving skills."
• "As a developer, I want to learn new programming skills and increase my knowledge of various languages, frameworks and libraries."
• "As a developer, I want to learn how to use version control within a sprint-based team project environment."
• "As a developer, I would like to produce a fully responsive application to add to my portfolio of work and showcase to potential employers."

It was important to use a bright colour scheme, broadly similiar to the colours of the rainbow flag that is so synonymous with Pride and the LGBTQ+ community. This both reinforces the subject matter of the site and generates a welcoming and inclusive atmosphere for the visitor.

The following colour scheme was decided upon after following guidance from the Coolors website:

Montserrat was selected as the primary font to be used for all headings throughout the site. It is a clean, legible (important for accessibility purposes) and widely-used font that's featured on many existing websites with an LGBTQ+ theme. Roboto was subsequently chosen as Flippin' Proud's secondary font, as this pairs well with Montserrat. A generic sans-serif designation acts as a fallback in case the chosen fonts specified above are not imported correctly.

Wireframes for the project can be found here

• The site consists of three pages (as well as a custom error page), each with a full-width responsive navigation bar fixed to the top of the viewport:
  • A jumbotron greets users on the main landing (Home) page, with some introductory content on the theme and purpose of the site followed by a bright call-to-action button to take the user to the Flipcards page.
  • The central Flipcards page offers an immersive invitation to the user to learn about the important contributions made by various individuals to the LGBTQ+ community.
  • A final Contact page features a list of relevant information and contact links for each of the site's developers.

• HTML5: used for structuring the site
• CSS3: used for styling the site
• JavaScript: used for site logic and web page behaviour

• Bootstrap v4.6.0: used to assist with the responsiveness and layout of the website
• Hover.css v2.3.1: used to add dynamic hover effects to buttons and icons
• Google Fonts: used to import the Roboto and Montserrat fonts into the project's stylesheets
• Font Awesome v5.15.3: used to add appropriate and visually appealing site icons
• jQuery v3.5.1: used to assist with manipulation of the Document Object Model (DOM) that facilitates interactivity
• JSON: used to store and transport data
• Git: used for version control by utilising the Gitpod terminal to commit frequently to Git and push all commits to GitHub
• GitHub: used to compile and remotely store the project's codebase following successive local commits and pull requests initiated from the command line
• Balsamiq: used to generate wireframes during the project's design phase
• Adobe Photoshop: used to create the website's main .navbar-brand logo
• favicon.io (favicon generator): used to create a favicon boasting full cross-browser compatibility
• WebAIM (contrast checker): used to ensure site foreground and background colour contrasts meet WCAG 2 accessibility requirements
• Web Formatter: used to assist in optimising code readability
• Autoprefixer: used to parse CSS and apply all necessary vendor prefixes
• TinyPNG: used for image compression
• PicResize: used to crop and resize images
• Ray.so: used to create the code block image featured in the Bugs section of this Markdown file

• W3C's Markup Validation Service was used to test the validity of all HTML used in this project. The code was validated by direct input, and all suggested corrections were then made. As a result, all of the site's HTML files now return a "Document checking completed. No errors or warnings to show." message upon being passed through this validator.
• Likewise, the website's custom stylesheets were each checked for errors using W3C's CSS Validation Service. Once again, validation by direct input was the preferred method selected, and all necessary changes were subsequently carried out. Consequently, the stylesheets all now return a "Congratulations! No error found." message upon being passed through this validator.
• In a similar manner, the site's custom JavaScript code was validated against JSHint's online JS error-detection tool.

• Chrome DevTools and real devices of various sizes and screen widths belonging to the developers were used extensively to test site responsiveness throughout the project's evolution.

• The programmers encountered a specific bug relating to iOS devices when viewing and interacting with the flipcards.html page. Rather than revealing the text on the back of each card (as intended) when flipped, the cards initially displayed a mirror image of the photo used on the card's front. This video gives a realistic demonstration of the bug before it was addressed by the developers during the project's testing phase.
• Following considerable troubleshooting and attempts at collaborative problem-solving, a fix for this bug was arrived at in the form of the -webkit-backface-visibility: hidden CSS declaration. More specifically, the prefixed version of this declaration was required for both the front and back of each flipcard in order for the functionality to work correctly on iOS - see the code block below for an illustration of the full CSS rule that was ultimately (successfully) applied to these elements:

This project has been deployed to GitHub Pages. The deployment process carried out was as follows...

1. Sign in to GitHub and locate the relevant repository. If you do not have a GitHub account, you may create one here.
2. At the top of the project repository page, select Settings.
3. On the Settings page, scroll down the menu flanking the left-hand side of the screen and select Pages near the bottom of the list of options.

This will open GitHub Pages....

4. Under Source, click the dropdown displaying Branch: None and select the master branch. Click Save.
5. The page will then automatically refresh and inform you that the site is now ready to be published, as well as indicating the https:// address to be used.
6. For reference purposes, a link to this newly-published site can be found in the Pages section of Settings (described above).

It is possible to fork this GitHub repository to view and/or make changes without affecting the original. This is achieved by following these steps...

1. Sign in to your GitHub account and locate the relevant repository.
2. Click on Fork, located near the top right-hand corner of the repository page.
3. You will now have a copy of this project's repository in your own GitHub account.

It is possible to copy the repository to your local machine so that you can fix merge conflicts, add or remove files and push larger commits without affecting the original project code. Cloning a repository pulls down a full copy of all the repo data that GitHub has at that point in time. See the GitHub Docs for further information, and below for a brief summary...

1. Sign in to your GitHub account and locate the relevant repository.
2. Click on the Code dropdown next to the green Gitpod button. This will reveal the Clone option.
3. In order to clone the repository using HTTPS, select HTTPS and copy the link shown (there is a copy button to the right of the URL).
4. Next, open Git Bash (see here for an overview of download options, if required).
5. Change the current working directory on your local machine to the location where you want the cloning to be made.
6. Type git clone into your IDE terminal followed by the URL you copied in Step 3 above, i.e.

https://github.com/loosenthedark/flippin-proud.git

7. Press Enter.
8. Your local clone has now been created.

See the GitHub Docs for more information on all of the above processes.

• Bootstrap v4.6.0 components, utilities and style classes were used extensively throughout the project, chiefly to make the site responsive in accordance with the Bootstrap grid system.
• Base code for the site's animated sparkle effects was provided by Simon Goellner (repo | demo) and adapted by the developers.
• Guidance on how to implement vertical scroll snapping between flipcards on mobile devices using pure CSS (i.e. no JS) was obtained from this Dev Ed video tutorial

Card text content courtesy of Wikipedia and Bi.org

The images used to populate the cards originate from the following sources...

• Panti Bliss courtesy of Conor Horgan via Wikipedia
• Lynn Conway courtesy of The New York Times
• Tim Cook courtesy of Austin Community College via Wikipedia
• Emma Donoghue courtesy of The Irish Times
• Billie Holiday courtesy of Bill Spilka/Getty Images
• Ian McKellen courtesy of Gage Skidmore via Wikipedia
• David Norris courtesy of Wikipedia (source unknown)
• Elliot Page courtesy of Rich Polk/Getty Images for IMDb
• Megan Rapinoe courtesy of Lorie Shaull via Wikipedia
• Gareth Thomas courtesy of UK Home Office via Wikipedia
• Alan Turing courtesy of The Turing Digital Archive via Wikipedia
• Oscar Wilde courtesy of Napoleon Sarony via Wikipedia

The team would like to thank their mentor Aukje van der Wal for all her amazing support, guidance and humour throughout the entire project.

This site has been created for educational purposes only.