This is Milestone Project 1: User Centric Frontend Development - Code Institute.
This is a website that functions as a portfolio for Joel Adrian, Stunt Performer. The portfolio enables all of Joels work to be gathered and shown in one place, in form of photos, videos and a resume. The website have five pages that shows a presentation of Joel, what kind of work he have done and how you can contact him or follow him on social media. Check it out here!
After doing research looking at websites from the Stunt Performer community and interviewing Joel about his wishes and needs with the portfolio, my goals with the design was set to:
- To make the design suitable for the stunt-community with fonts and colors that provides a feeling of a tough and rough edge, but still maintain a stylistic and clean design.
- To make 5 pages with it´s own categorical content on each page, to keep it easy to find what you want on the site and to maintain a clean impression with all the media content I´m including on the website.
-
As a colleague in the business I want to have a look at Joel Adrians work to find out what projects he´s busy on, befriend him on social media to expand my network in the business, and send him a message on the contact page with a collaboration idea.
-
As a martial artist or exreme sportsman I want to have a look at Joels videos, pictures and resume to get inspired and learn about a career in the movie industry.
-
As a coordinator, director or possible employer I want to have a look at Joels showreel and photos. I also want to read his resume and download it, so that I can hire him for a project.
-
As a fan of Joel Adrian I want to look at pictures and videos of him, so I can get to know more about him. I also want to find out where I can follow him on social media.
The wireframes I did as a part of the design process are saved as pdf documents and kept in a separate folder in this project, which is called wireframe. One is designed for desktop view and the other for mobile view. Check them out here. I worked with the wireframes in Balsamic.
- The About me page is the landing page and gives a short introduction to Joel Adrian.
- The My work page shows Joels resume directly on the page to be easily overviewed before you possibly want to download it. Under the resume it´s also possible to click on an icon to be able to download it. Underneath the resume area it´s also possible to click on another icon to get to Joel Adrians IMDB page.
- The Videos page include three videos that shows what kind of stunts Joel is able to do and clips from movies.
- The Photos page shows images in one row that is clickable and will show in a separate window if clicked on.
- The Contact page include a contact form that gives the opportunity to get in touch with Joel with collaboration ideas or job opportunities. The contact form is placed with no other content on the page to be easily accessed and also gives clear instructions so the users quickly can send a message to Joel if they want to.
- The navbar and the footer have the same color, so every page will give a sense of a familiarity, even though the content on the different pages are changing.
- The navbar collapse on smaller screens, which provides a discrete design and simple user experience with the menu items grouped together.
- A custom scrollbar is added, with a smooth scroll effect. I planned for the scrollbar to be discrete in it´s design. That´s why I chose a background color that is slightly darker than the navbar and the footer. I chose not to have the same color as them, so it won´t give the impression that they float together as one element.
- The fullwidth background image is supposed to remind the users what Joel is all about, a Stunt Performer with experience in the movie industry. The content scrolls infront of the image. It is the same image on all pages to give a sense of familiarity with the recognizable design.
- Joels name is not conventionally placed in the top left corner as a brand or logo, on purpose. After his wishes with a discrete design we agreed on only having his name in the title and on the landing page, and let the background image remind the users of who´s website they´re on.
- The Download my resume link and the Social links is placed in the footer to be easily accessed on every page on the website.
- The hover effects on the icons and navbar items is designed with a dark color to suit the users, and the transition effect is set to feel smooth.
- A Favicon added for a better overall look of the website.
- In the future I want to add more videos to expand the feeling of Joel as an experienced Stunt Performer. The videos that are included now are the ones that Joel currently wants to share.
- In the future I also want to change the current image grid to a lightbox, for the users to be able to see the images on the same page they are currently on. I want to test this to see if this technique changes the amount of clicks on the Photos page and to make the experience more user friendly on smaller screens.
- I would like to change the look of the embedded resume in the future, and implement it on the page with another technique to be more goodlooking on smaller screens.
- The languages I have used for this project is HTML5 and CSS3. I have used Bootstrap grid with the built in media queries for the content to be responsive on all screen sizes.
- The libraries included are the Javascript libraries JQuery and Popper.js. And also Fontawesome to add icons.
- Frameworks I have used is Bootstrap 4.3.1. I used the BootstrapCDN on this page
- Other tools I have used are Cloud9 IDE for the development of this site: writing, debugging and running my code. GIT was then used to push files to Github where the project is stored and deployed.
- As part of the design process i chose to use Balsamic to make my wireframes in a simple way with a goodlooking result.
Here I present how my website meet the needs of the different kinds of users that will visit the site, which I presented in the section UX: User stories:
-
As a colleague in the business I want to have a look at Joel Adrians work to find out what projects he´s busy on, befriend him on social media to expand my network in the business, and send him a message on the contact page with a collaboration idea. --> This information can be easily found since all page sections are clearly labelled in the navbar which is placed in the conventional place on top of the page. Since the footer is also placed in the conventional bottom of the page position, it will be easy to find the social links positioned there regardless on which page they are currently on.
-
As a martial artist or exreme sportsman I want to have a look at Joels videos, pictures and resume to get inspired and learn about a career in the movie industry. --> This information will be easily found in the clearly labelled page sections in the navbar. In the page My work they can have a look at the resume, without having to download it, and play the videos directly on the Videos page to see some clips.
-
As a coordinator, director or possible employer I want to have a look at Joels showreel and photos. I also want to read his resume and download it, so that I can hire him for a project. --> The showreel will be found in the Videos page, and the resume can be downloaded from the footer from any page, and to have a preview of the resume directly on the page before downoading it is intentionally made for this type of user.
-
As a fan of Joel Adrian I want to look at pictures and videos of him, so I can get to know more about him. I also want to find out where I can follow him on social media. --> The images and pictures are clearly labelled in the navbar to find, and the social links is possible to click on from any page, that the fans are currently on.
- I used this website to validate my HTML by direct input.
- I used this website to validate my CSS by direct input.
- The responsive navbar collapse as planned on smaller screens, and take place in the top center of the screen.
- The responsive image grid with the one column design looks good on smaller screens as well as the larger.
- The embedded videos also changes in it´s size when making the screen size smaller and is still good to watch.
- The embedded pdf resume document is responsive, and on smaller screens the scrollbars in the document appears even horizontally.
- The contactform act responsive when the screen gets smaller and still functions properly.
- Contact form
- Go to the "Contact" page
- Try to submit the form with all the fields empty, and verify that a relevant error message shows up.
- Try to submit the form with an invalid email adress (without the @ character), and verify that a relevant error message shows up.
- Try to submit the form with all inputs valid and verify that a success message appears in a new window.
- Try this process on smaller screen sizes and verify that the form is responsive and works on all sizes.
- Bug discovered, which is not adressed yet: When typing an email with the @ character but without the . dot the form could be submitted anyway.
- Download resume in footer
- Click on Download my resume in the footer.
- Click on the download icon, and verify that the resume in pdf format opens up in a new tab.
- Click on the download button in the top right corner of the document and verify that I can download it to my computer.
- At last close the tab and go back to the website.
- Download resume in My work page
- Go to the "My work" page and verify that the embedded pdf is showing, and that it´s possible to zoom and scroll in the document at the My work page.
- Click on download button on the embedded pdf and verify that it can be downloaded to my computer from here as well.
- Scroll down the page and click on the download icon under the text "Click here to download my resume!" located just under the pdf document, and verify that the pdf opens up in a new tab and is possible to download to my computer.
- Try this process on smaller screen sizes and verify that the pdf is responsive and that this works on smaller screens.
- Social links
- Click on the icons in the footer, on by one, and verify that they open up in separate tabs leading to the social links: Facebook, Instagram and IMDB.
- Click on the icons from all pages and verify that this is working.
- At last go to My work page and I click on the IMDB icon under the resume Pdf document, under the text "My IMDB page. Check it out here!, and then verify that this link is working.
- Bugs I came across while creating the site and while testing it
- One bug I found when testing the website on all of Google Chrome Dev tools: Toggle device toolbar, I found that on some of them the screen was showing a white thin edge to the right on the screen, or in the bottom. Most usual on Iphone 5/SE and Iphone 6/7/8. So far this is an unresolved bug not yet fixed.
This website is hosted on GitHub pages, and deployed from the master branch by following these steps:
- In the repository, click on settings in top right corner.
- Scroll down the page to GitHub Pages section.
- In the source dropdown you chose the alternative master branch.
- The published link will appear in the GitHub Pages section.
- Click on the link and you will reach the website.
Upon new commits to the master branch, the deployed site will automatically update. The landing page must be named index.html for the site to deploy correctly on GitHub pages.
To run locally- You can clone this repository directly into the editor you prefer by following these steps:
- Click on the green "clone or download" button on the repository page
- Or paste following:
git clone https://github.com/LivHed/joel-adrian.gitinto your terminal. Press enter, and your local clone will be created. - The last step is to cut ties with this GitHub repository. To do this type
git remote rm origininto the terminal.
The text on the About me page was written by Joel Adrian, sent to me in purpose to use on this website.
The photos used in this site were obtained from Joel Adrian, the owner of the photos. The videos used in this site were linked from Joel Adrians own Vimeo page, the owner of the videos. Here is one of them. and here is one more. Have a look here at the third video.
I Copied the code for the contact form from this page and then modified it to what suits my needs. The original code for the image grid was copied from this page and then customized for my one column-idea.