Stream One Project: User-Centric Frontend Development - Code Institute

This is a website I created for a band called (Wintersun) to present to prospective employers. The website highlights seven projects that cover a range of technologies. Fans can buy tickets at the tour dates section as the section updates each time the band announces a new gig, fans can also find the best quality videos and pictures which have been carefully chosen by me. There is a solid introduction in the biography section as well as down below you can see an image of each current band member of the band and its instrument. There is also a store section where items can be purchased such as Albums, Merch or even digital streams and downloads. For social media lovers, there is an Instagram feed witch updates each time the band posts news feed. Social links can be found on the header and footer. At last the first section of the website will stun new fans as there they will find a short background video very well edited and looped with a big centered band logo in the center. Mobile first design principles have been implemented to create a responsive website that is intended to look good on any screen size. I have strived to create a majestic looking and enjoyable journey through every section of the website.

People love this band for one reason and that is their majestic music so my aim was to design an absolutely stunning/majestic looking website where fans can see images, videos, book tickets buy their albums/merch items. Secondly, my aim was to serve WINTERSUN a platform where they can gain new fans have more albums/merch/tickets sold promote their new work and keep the fans up to date through social media links and an Instagram feed. To help me identify the user story I've meet lots of the band's fans spoke with lots of them about what they love the most about the band as well as I've been a part of the band's fan pages where I would ask fans what would they like to see and use on the bands website. Based on this process along with following the band myself I identified the following user stories.

The following link shows the initial mockups for the Wintersun Website using pen and paper https://github.com/ChristianPlesca/Wintersun-Band-Project/tree/master/wireframes

1. As a fan of Wintersun, I must be able to see upcoming tour dates and be able to purchase tickets.
2. As a fan of Wintersun, I must be able to see my favorite and best quality videos and pictures.
3. As a fan of Wintersun, I must be able to sign to the news feed, to receive updates about the band.
4. As a fan of Wintersun, I must be able to purchase Albums/Merch.
5. As a new fan of Wintersun, I must see a stunning view and to find as much as possible information about the band.
6. As a band I must be able to sell my Albums/Tickets/Merch etc.. get followers on social media, keep fans up to date with the new content.

1. Navigation Bar allows the user to navigate through any section of the website using a smooth scrolling effect.
2. Biography allows the user to get solid info about the band, also there are links to the band's/band members Wikipedia page.
3. Tour Dates allows the user to get notified and purchase tickets for the upcoming tour dates
4. Store allows the user to purchase items such as Album/Merch.
5. The Instagram feed allows the user to see bands posts on Instagram.
6. Images/Videos allows the user to watch images/videos of the band.

1. New Album section where the user can see listen to an purchase the latest band's release.
2. Contact Form.
3. Loading Gif for the 1st Section Video Background

1. Html 5
2. Css 3
3. W3.CSS
4. Boostrap 4
5. Javascript
6. Google Fonts
7. Font Awesome
8. MyFontsWebfontsKit
9. Band's in Town Widget
10. Elfsight Instagram Feed Widget
11. Visual Studio Code
12. jQuery for Boostrap functionality.

• Stackoverflow
• W3schools
• Google

• The website was constantly tested during development using Chrome dev tools. I used this to resize the browser to check new code was working, breakpoints, and different mobile/tablet screen sizes.
• After deployment I've tested the website on multiple browsers such as Mozila(Fire Fox),Opera,Chrome,Microsoft Edge,Safari.
• Used Google Mobile Friendly Test and received a mobile friendly result.
• I checked the website on CrocodileMarketing and i recived SCORE:100 for Responsivness and SCORE:70 for Speed.
• Used HTML and CSS validator with NuHTMLChecker and W3C-CSS

• I discovered that the Video and Images files were to big affecting the load speed of the website.
• The Newsletter email form will not send is not connected as this is beyond the scope of this project.

• I had to compress all the images and the video

Deployed using Github Pages - https://christianplesca.github.io/Wintersun-Band-Project/ directly from the master branch. The deployed site will update automatically upon new commits to the master branch. In order for the site to deploy correctly on GitHub pages, the landing page must be named index.html.

To run locally, you can clone this repository directly into the editor of your choice by pasting git clone https://github.com/ChristianPlesca/Wintersun-Band-Project.git into your terminal. Type git remote rm origin into the terminal.

• The NavBar was implemented using Bootstrap 4
• Main/Top Section - The video was taken from Youtube and it has been resized to help the loading speed of the website
• Biography - Paragraphs were selected from Wikipedia , Read More button function was found here.
• Tour Dates - The widget has been taken from BandsinTown and it has been styled entirely by me.
• Store - The items have been selected from NuclearBlast, the section was written entirely by me.
• Instagram Feed - the widget was taken from Elfsight and styled by me.
• Image Slides function was found here and it has been overwritten by me to fit my requirements.
• Newsletter - was implemented using Bootstrap 4.

• Images were taken from Google,Wikipedia.
• Videos were taken from Youtube.

I have received inspiration for this project from Spotify,Razer.

Website for educational purposes only.