# Dungeon Raiders
### [View the live project here.](https://mariuszmatysiak.github.io/Dungeon-Raiders/)
### Dungeon Raiders is a website for World of Warcraft gamers focusing the endgame content designed to play as a 5-man group of players- dungeons. The website provides with suggested compositions alongside with tips for all the bosses within 8dungeons. Ulitmate goal of the website is to create a community on discord to both play together and theorycraft. With an option to contact us through the form for those who are looking for a team.
# User Experience (UX)
## User Stories
-----
## User stories
* First Time Visitor Goals
* As a First Time Visitor, I want to easly understand the main purpose of the site and learn more about the what the site has to offer.
* As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
* As a First Time Visitor, I want to be able to experience site's contents.
* Returning Visitor Goals
* As a Returning Visitor, I want to find information about certain boss fights.
* As a Returning Visitor, I want to find information about team compositions.
* As a Returning Visitor, I want to find the community links to discord and form.
* Frequent User Goals
* As a Frequent User, I want to revise the tips for certain dungeon/boss fights.
* As a Frequent User, I want to check if there any new changes among the best compositions.
* As a Frequent User, I want to be able to submit a form to share my favourite team compositions and join the theorycrafting team on discord.
## Design
* Colour Scheme
* Colours used in this project: Jet- Navigation Bar Colour, White- Font Navigation Bar Colour, Spanish Gray- Font for home guide info, Mandarin- as an Accent Colour, Peach Crayola- as an alternative Accent Colour, 262626 Earie Black- as a Main Background Colour, 1A1A1A Earie Black- as a Footer Background Colour.
* Direct Link [here](https://coolors.co/ffffff-ffbc9d-e7723c-1a1a1a-262626-333333-999999)
* Topography
* Font Quicksand Regular 400
* Font Incosolata Regular 400
* Font Roboto Thin 100, Regular 400
* Imagery
* I've used three imagery pieces to set the tone and colour pallete of the game, providing hero images for index.html, compositions.html and contact.html
## Wireframes
### The initial wireframes prior the start of development
* Desktop Wireframe - [Full pdf access here](assets/documentation/desktop-wireframes.pdf)
* Mobile Wireframe - [Full pdf access here](assets/documentation/mobile-wireframes.pdf)
# Features
# Home Page
## Nav Bar
* Navigation Bar has been featured on all four pages. On the desktop view users can experience the full logo in the left segment. Navigation links are provided in the right side of the Navigation Bar with the active one being coloured and underlined. The colour of the link changes uppon hovering.
* On the mobile view users can experience logo miniature in the left segment. Navigation links are provided inside the hamburger button.
* Dropdown menu on the mobile view continues to highlight the current page.
## Hero Image
* Homepage's hero image comes with hook text which is styled with shadow and the background is blurred for better user experience reading the content. Desktop view below.
* Mobile view below.
## Game's Logo
* Two main sections are divided with World of Warcraft: Shadowlands logo.
## Home Guide Info + Animation
* Text informing about the guides and an animation bringing all of the 8 dungeons to the viewers attention in an exciting and dynamic way. View on the desktop.
* View on the Mobile screen:
## Footer
* Footer has been featured on all four pages. A responsive text in the footer area provides the right amount of content for desktop and mobile for better visual user experience with a link to the discord channel attached. View on the desktop.
* View on the mobile.
# Compositions Page
* A Hero Image on a Compositions presents a group of heroes encouraging the site Visitor to dig into content.
* All the compositions are presented with two sets of 5 icons. First set presents role distribution inside the team(Tank- Shield Icon, Healer- Plus Icon, DPS-Sword Icon) and the Second set presents the icons of Character Classes used in a certain composition. Larger screen sizes due to their wider nature can contain two compositions at time. The compositions are devided with a slight vertical border in between them.
View on desktop.
* Mobile screen sizes due to their narrow nature can contain only one composition at the time. The compositions are devided with a slight horizontal border in between them
View on mobile.
# Dungeons Page
## Navigation
* Navigation on the Dungeons Page starts with a "Choose a Dungeon" text followed by 8 miniatures of dungeons from current version of World of Warcraft: Shadowlands. On the desktop view all of the icons have their opacity reduced, and once an element is being hovered it lights up. View on a desktop.
* View on mobile
## Dungeon Bosses Content
* Dungeon Bosses Content has been designed in a responsive way where Large Screens contain up to 5bosses(one dungeon has 3 bosses, six dungeons have 4 bosses, and one dungeon has 5 bosses) descriptions horizontaly. On the tablets and small laptops they contain 2 bosses horizontal and only one on mobile.
* View on the Very Larege screens for 5 boss dungeon, 4 boss dungeon and 3 boss dungeon
* View on the large screens, laptops, small laptops and large tablets for all dungeons fitting 2 bosses horizontal.
* View on small tablets and mobile for all dungeons fitting 1 boss on the screen. Bosses are divided by a horizontal border. There's no border on the last boss item.
# Contact Page
## Hero Image
* A Champion presented on the Hero Image represents the role of a recruiter.
## Form
* All the information from the form is enough to backtrack personal performance of aplicants in order to match their current experience and then help them form teams with people of similar skill level! View on a very large screens:
* View on a large screens:
* View on a tablet:
* View on a phone:
# Technologies Used
## Languages Used
* [HTML5](https://en.wikipedia.org/wiki/HTML5)
* [CSS3](https://en.wikipedia.org/wiki/CSS)
* [JS](https://en.wikipedia.org/wiki/JavaScript)
## Frameworks, Libraries & Programs Used
* [Font Awesome](https://fontawesome.com/v5.15/icons) - I've used Font Awesome icon for hamburger menu icon and media link to Discord.
* [Google Fonts](https://fonts.google.com/) - I've used three google fonts. Quicksand for navbar menu items, Inconsolata for the footer and Roboto Font for the headings, paragraphs and contact form.
* [Balsamiq](https://balsamiq.com/) - I've used Balsamiq to make Desktop and Mobile Wireframes.
* [CSS root variables](https://css-tricks.com/breaking-css-custom-properties-out-of-root-might-be-a-good-idea/) - I've used CSS root variables to store global styling in it.
* [Flex Box](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - I've used Flex Box throuout web page to style all elements and keep responsivnes at the same time.
* [CSS Grid](https://www.w3schools.com/css/css_grid.asp) I've used CSS grid for easier responsive design styling across wide range of screen sizes in Compositions.html and Dungeons.html pages.
* [Git](https://git-scm.com/) - I've used git for version control and saving work in the repository, using the GitPod extension in Google Chrome to commit to GitHub.
* [Am I Responsive?](http://ami.responsivedesign.is/#) - I've used Am I Responsive website to create mockup image for this README file.
* [Responsinator](http://www.responsinator.com/?url=https%3A%2F%2Fmariuszmatysiak.github.io%2FDungeon-Raiders%2F) - I've used the website to check responsivenes across the most common mobile screen sizes.
* [Photopea](https://www.photopea.com/) - I've used photopea to create circled dungeon and class icons with the frame around them.
* [Favicon](https://favicon.io/) - I've used this website to create favicon.
# Testing
## Validation Code
### HTML
The [W3C School HTML Validator](https://validator.w3.org/)
- I fixed errors accured during validation.
- On the [Home Page](assets/documentation/error-validator-html-home.png) there was an error in the credited code from CodePen, there was `
` element inside of `` element. Also `' were missing headings, so I added to the first section, and section with wow logo changed to `' element, and section with guide info chnaged to `