auxfuse / how-patrick-are-you

Shamrock or Shamerock? Let the app help you figure that out!

🔶 🔸 I'm Fuse 🔸 🔶

My name is Anthony, but most of my online personas consist of me being called "Auxfuse" or "Fuse". 😃

My Dev Anatomy 👾

I'm a recent Full Stack Software Developer Graduate from Code Institute (graduated Apr 2020) and I have a special place in my heart for all things CSS and Frontend Design in general. So much so I'm currently expanding on these aspects in other online courses and material and applying them as much as I can.

Currently getting stuck into SCSS 😍 and forever getting stuck learning Javascript 🙈

Currently working on my first freelance web dev project for two local Personal Trainers, for which I also based my final project for CI on, and this freelance project is being developed in Django/PostgreSQL with HTML/CSS/Bootstrap/JS. It's coming together too, and hopefully will be handed over and deployed in the near future.

Luckily, I also train there as an Olympic Weightlifter and Crossfitter....I mean, take a look for yourself...at your own risk.

My current niche marketplace is that of Health and Fitness and I just thoroughly enjoy helping those in these fields have a unique stake with their brand in the web or to use amongst their own members. As a member of such a high class Strength & Conditioning gym, good user experience is vital to ensure user retention and high customer retain base. I hope to grow as a freelance dev and continue to assist those in this market for a long time.

My Socials:

If you want to reach out and get in touch

• Twitter
• Instagram

Hobbyist in so many things, 👊. Welcome to my Github Profile where I learn and sell myself as a dev. Always a student 🏫 never settling!

how-patrick-are-you's Issues

Easter eggs

Implement easter eggs throughout site.

Deployment

Results screen....modal

to include:

• prize(s)
• buttons for reset/cancel/leaderboard
• background click disabled...
• store results in local storage
• Link back into quiz.js containers etc, so results can be displayed

Deploy Project

Deployment via Github pages setup

Or alternatively use of netlify/heroku/firebase etc

Create How to Play Component

Descriptive section and guide on how to play and subsequently linked in Footer quick links...... #7 Footer

This might seem rudimentary but Users have been known to be dense in these situations. This can be a component // a page.

README

README to be developed alongside feature creation:

• Each developer to update the README with their latest feature implementations and included in their PRs. (or held locally for updating later)
• Boilerplate implemented, but subject to change.
• Finalised before submission.

Quiz details

Create Quiz

• Consider file type and comparison logic.
• Total length of questions (10/15/20/25), not to long but long enough to demonstrate during the presentation
• Score display to user via modal...... #11 Results Screen

Language Validation

Each file type to be validated by respective online validation tools.

Create Footer

Footer creation:

• to include supplementary links section and linked to same.... #19 How to play / #16 Accesibility / #17 Privacy
• to include commonly clicked navbar links:
  leaderboard/quiz/home etc
• small descriptive context on project and developers
• social icons section? (use of fontawesome)

if any of the above is not readily available to be linked to, create them anyway and we can finalise later and update links.

Create favicon

• Something related to the content/theme
• Minified version of the oveall logo etc

footer

Create About page

Possibility.....layout and content to be decided.

Create Navbar

Custom Navbar creation:

• To include Logo....... #12 Logo
• Placeholder links to start with and be swapped out and subsequently linked to supporting pages.
• Common amongst all pages

Create Leaderboard page

To include scores collated from Firebase?

Filter by largest to smallert, and to include tie-breaker functionality.

Create Testing (Manual)

Manual:

- Manual Log to check, visual indicators such as responsivity and scale, CTAs and expected behaviour, browser compatibility.

Automatic testing on quiz??? <--- not entirely sure how this would work as of right now, but would be a nice to have.

Create Accessibility Statement

Accessibility page to be created, styled and linked in Footer.

Boilerplate and default content to be shared.

Setup Link between Json Data and Js

• Decide on a platform
• Link to the Js

Frontend Framework use?

• Bootstrap 5
• UIKit
• Tailwind
• Bulma

Logo creation

Custom logo to suit the theme and overall design of the site.

Create Error Handling Pages

404/500 page creation, something funny 😁

• Should be saved to root directory

Prize creation

• incl. any images and details

Should this include a section for address details? Or should this just be an avatar to reflect their score. Comedic and tongue in cheek.

Create Page/section to inject Questions

• Create action button link to quiz page or section of page
• Create container for the quiz data
• Link back container id to quiz.js
• Some styling / classes etc may need to be added to HTML inside the quiz.js file, that gets injected

Share functionality

Possible feature!
Concept --> a button to share the deployed link:

• on completiong of quiz, send email with score, and link to user to share with friends.

If not implemented added to README as future feature.

Create Privacy Policy

Default Privacy Policy to be pulled from Google. Created, styled and linked in footer.

Create Homepage (index.html)

Create default landing page.

• Add layout
• Consider using white space to promote good user experience.
• To include common components such as Navbar/Footer...... #6 Navbar & #7 Footer
  (...if not created by time of creation, placeholder navbar and footer implemented using simplistic code templates from agreed upon frontend framework.)

Overall Styling continuity & cleanup

To include:

• conforming standards across css file.
• comments
• structure hierarchy

Initialize Firebase with Project

• Install the Firebase via npm
• Create a Firebase project
• Initialize app with config

Wireframes

To create basic wireframes to suit the project.

Include layout per component and page.

Repository creation

Setup repostory with appropriate collaborators...and decide on github process.

• 5-person collab project
• consider use of upstream remotes
• consider use of branches

accesibility page creation