Tasked to create a static website combining knowledge from the first three modules in the Full Stack Web Development course with the Code Institute.
I am a huge fan of Damien Dempsey and I wanted to base my project on him. After using Damiens own official website https://damiendempsey.com i found it did not have enough information about him or his music. He wouldn't be a well known artist and so i felt his website should have more of this information, so I seen this as an oppurtunity to build a website to give people that knowledge of the great singer/songwriter that he is.
The goal of this website is to:
- Provide people with more of an understanding and information about the type of the artist Damien is.
- Create more traffic to this site but also through his social media platforms which can be found on every page.
- Build his brand awareness here in Ireland but also abroad.
- As a fan or potential fan/user, I want to check where Damiens next tour or gigs will be held.
- As a fan or potential fan/user I want to see if Damien has social a media presence so I can follow him across social media platforms.
- As a fan or potential fan/user I want to be able to check Damiens website on my mobile device as I do not own a laptop or desktop.
- As a fan or potential fan/user i want to be able to listen to his music or watch videos on the site.
- As a fan or potential fan/user I want to see a contact form so I can contact the artist or his to team to answer any questions that I cannot find the answer too on the website.
In the design of this website i used Bootstrap 4 for my gallery layout & album cards. I then used some of my own custom HTML & CSS for the rest of the site.
The typography ('Roboto', sans-serif;) i chose is from Google Fonts.
In the Navbar i used the DAMIEN DEMPSEY logo which forms the basis as the back to "HOME" page which is commonly found amongst industry standards.
I used the shamrock emoji ☘️ on the Homepage to help emphasize that Damien is an Irish Singer | Songwriter.
After trying out a few different color schemes I decided on roughly the same color scheme from Damiens own official website. I feel it really makes the website pop when you have a dark background with different color overlays compared to the standard white background.
I used the standard grey setting within css for my buttons, album cards, header spaces & footer. I then used the color of #fafafa Color Hex Gray98 for the font to really make it stand out from the dark background. For my main images on each section of the website i decided to use black & white images to keep within the same color scheme as the overall project.
To help me choose my colour scheme is used Adobe Color Wheel.
To build my wireframes i used Balsamiq which is the software that the course briefly touches on. I found it quite easy to navigate and use so i did not look into other softwares.
All wireframes created for this project can be found Here.
Example below:-
-
This is a summary of the features i have put in place on my project but also the features i hope to add in the future.
-
All pages on the website follow the same principle with a fixed navbar, main image, a header and a footer with links to all of Damiens social media platforms.
The navbar is featured on all pages and is used to navigate the site.
The navbar links are on the right side of the navbar. I have 6 links in total:-
- Home
- Tour
- Music
- Video
- Gallery
- Contact
Intuitive navigation fixed to the top of the the page that resizes for mobile devices with the hamburger icon. When pressed it expands to show the other navigable pages. On desktop i have used a hover function that will show the user which navpage they are highlighting and a class of active that will indentify to the user the current page they are on.
- I have buttons on the homepage that will navigate you to other pages within the website. I also have a button on the Tour page which will navigate you to Damiens own official tour link where you can purchase tickets for his upcoming gigs. See Here
- In the Music section of the website I have album cards which feature images of Damiens albums and a short write up about each one. I also added buttons to this section which allow you to play each album through Spotify. See example Here
- The Video section of the website has many videos of Damien performing well known songs live and also includes some interviews.
- The Gallery section has a range of images of Damien from live performances to appearing on television with special guests.
- The contact page features a form so visitors can contact Damiens management looking for more information that may not be available to them on the site.
- The footer is featured on all pages and contains clickable icons that will take you to each of Damiens social media platforms.
Further development of this website will include a merchandise store for all of Damiens merchandise and a fan forum that fans of Damien can interact with each other and share stories about the singer/songwriter.
I also want to set-up the submit section on the form so that it will be fully operational to use.
Build a customer pre-loader, as videos and photos sometimes load slowly depending on network speeds.
I would also like to include a Blog that Damien himself could write to his fans informing them of whats going on in his world. Something which he is fond of doing on other social media platforms such as Facebook.
The Technologies I used to build this project are as follows,
- Buiding the foundation of my project.
- For custom styling of my project.
- The framework i used to achieve the album card layout, my navbar, gallery section & contact form.
- Used for all icons within the footer and buttons.
- Used for the typography of the project.
- Used to store & manage my code.
- My IDE of choice to develop my project.
Website has been tested across multiple browsers and on mobile devices to ensure compatibility and responsiveness of the site.
- Chrome
- Mozilla Firefox
- Microsoft Edge
- IE
- Opera
- iPhone 8
- Galaxy S8 & S10
- iPad
- iPad Pro
W3C Mark-up Validation and W3C CSS Validation where used to check the validity of the project code.
Chrome Devtools was used throughout the duartion of my project for testing responsiveness of the website and for finding and fixing bugs.
-
IE Doesn't support CSS Grid and because of this my more videos section does not display correctly
-
IE also has a bug for the shamrock emojis that they are white instead of the color green.
-
Opera has an alignment issue with my play buttons in the albums cards in the Discography section of the site.
I used a site known as LambdaTest to run my code in mac and safari software and the site appears to be broken. This is not official software so i cannot be sure the results are accurate. When tested my project through chrome and others on this site it also showed me errors which i do not have.
- As a fan or potential fan/user, I want to check where Damiens next tour or gigs will be held.
- I could easily do this by going to the Tour section on the website which shows all upcoming gigs.
- As a fan or potential fan/user I want to see if Damien has social a media presence so I can follow him across social media platforms.
- At the bottom of every page there are icons and when clicked it will bring me to the desired social media platform so i can follow Damien.
- As a fan or potential fan/user I want to be able to check Damiens website on my mobile device as I do not own a laptop or desktop.
- The website is compatible and responsive on mobile devices.
- As a fan or potential fan/user i want to be able to listen to his music or watch videos on the site.
- I can do this by visiting the Music or Video sections of the website, or by clicking on the Spotify, Youtube or Itunes icon at the bottom of the page.
- As a fan or potential fan/user I want to see a contact form so I can contact the artist or his to team to answer any questions that I cannot find the answer too on the website.
- A contact form is available in the contact section and can be used to submit and questions you may have that are not already answered on the site.
My project was developed using GitHub IDE, committed to git and pushed to GitHub. The following steps where taken to deploy my project.
- Logged into GitHub.
- Selected repository from the GitHub dashboard.
- Selected Settings at the top of the chosen repository.
- Scrolled down to GitHub Pages section.
- Under Source I clicked the drop-down menu and selected master branch.
Website is now deployed and is available Here
For this project, local deployment was not required.
-
The quote i used on the homepage for my hero image i copied from here
-
The text for the about section on the homepage was copied from the Wikipedia Early Life
-
The text for the discography section is a mix of my own and copied from Wikipedia Damien Dempsey Discography
-
The Homepage photo used in this site was obtained from Damien Dempseys official website and permission was given from his management team. Although it is for educational purposes i thought it would be a helpful learning process to go a step further and get permission for the image i have used. See Here
-
The Tour section image is from a photographer known as Sean Smyth who also gave me permission to use his images for my project.
-
The Music & Video Section images are from The Last Mixed Tape I did make contact with the site to ask for permission but as of now i have not received a reply.
-
All my other images are from various online outlets who i also contacted for permission to use the images but have not received a reply to date. As it is for educational purpose and not for profit i was made aware that it may not be neccessary to ask for permission.
-
The Videos i used on the website where attained from Damiens Offical Youtube
For assistance i have used the following sites:-
A special thanks to my mentor, Ali Ashik for his support, time, suggestions, and constructive feedback throughout my project.
Also another Special thank you to David Rowell of Autonomy Music Group & Sean Smyth of Sean Smyth.ie for also allowing me to use his images. I also want to thank them both for coming back to me in a swift and timely manner.
Finally a thank you to all the Code Institute community of Slack for there ongoing advice & help.