Overview – This is my voice over portfolio website. The goal of this website is to showcase my demos and promote my services.

The portfolio includes 5 main pages such as : Homepage (index.html) , an about-me page a demos page, a blog page as well as a contact me page with other additional pages such as a test page to verify the links work and several pages relating to the blog page.

Voice Actor Website

1. My goal for the design was to make sure the site feels familiar and intuitive when the user interacts with the website, so they are easily able to navigate through the portfolio .
2. I also wanted to use a simple but colourful design to convey my image/ brand to said viewer. By brand I mean who I am and what I’m about. This is important for a voice actor because a website is an opportunity to convey the right image and perception as appose to just using social media to do this because of its various limitations.
3. I also wanted to use the website as a means of clients contacting me directly as appose to being contacted through a direct message via social media which over time can become a block collection of non-assorted and unorganised text, so I implemented a contact form that requires an email, name and subject.

• As a first-time/curious visitor I would like to be able to read up about the Voice over artist to get an idea of who they are their background.
• As an agent/director I would like to view demos reels and see the Voice over artist’s work so I can decide if I want to use their voice for a project.
• As an agent/director I want to easily navigate through the site and find to find what I require.
• As an agent /director looking for casting, I would like to see some reviews/testimonials of the voice over artists previous work.
• As an interested client/visitor I would like to see some interesting content like a blog, so I can understand or learn from the Voice over artist thoughts, feelings and experiences.
• As a potential/future client, I would like to keep up with this Voice over artist via social media in order to see their recent activity and potentially contact them for a job in the future.
• As a returning client I want to be able to contact and converse the voice over artist easily to arrange an audition.

• Homepage
• About-me
• Demos
• Blog
• Blog-page
• Contact-me
• Navbar

Each page features a responsive nav and footer. Within the nav there’s a logo on the left. Within nav and footer there’s a “contact bar” and within this contact bar is social media links and contact info such as email and phone number. Within the footer there’s a copyright info. All the pages feature a header to indicate what page you are on except the home page. The home page has a jumbotron which intuitively indicates “homepage” as this is commonly done on most webpages.

• Navigation bar- This is used on each page and allows the user to easily traverse through the website and access each page quickly.
• Logo – This is used on each page; this allows the user to recognise and remember the brand. The logo also returns user to the homepage which is a feature the user would be familiar with as this is a staple on most websites.
• Contact-bar This is used on each page at within the nav on the right side when the screens large and in the middle when the screens in the mid to small range, and within the footer; this allows the user immediate access to contact info when they are finished scrolling down the page without having to recall where to get said contact info.
• Header and footer social media icons- This is used on each page to allow the user to access the social media platforms the artist uses.
• Footer copyright info- This is used on each page to protect the business from plagiarism.
• Homepage- features a jumbotron to call special attention to the voice artist allowing the viewer to know what this website is about when they first enter page.
• The homepage features snippets of the demos page. There are audio boxes which allows the viewers to listen to quick sample demos so they can get an idea of what the VO can do.
• There’s a testimonial section which allows the viewer to see what others have said about the VO.
• About-me- This features a different headshot of the VO from the one presented on the homepage, this is to give the viewer a sense of novelty which contributes to a positive emotional response. There’s also a brief bio of the artist which allows viewers to learn some background information on the artist. So, they can get an idea of who they are and connect with them.
• Demo – This page just features 3 audio boxes per row x 4. Each row is dedicated to one type of demo reel e.g. one for just characters, and one for just radio presenting; This allows the viewer to listen to a variety of demos to get deeper idea of the VO’s experience; This a step up from the snippet on the homepage.
• Blog – This blog page allows viewers another way to discover website and allows the viewer to learn from the thoughts and experiences of the VO This page and the actual article page features an archive to allow the user to traverse through the different months of blog posts.
• On the blog pages there will be 4 articles vertically stacked with a title and a clickable image which will lead to another page with the blog on it. I made the structure like this to make it visually easy to navigate and process to the viewer.
• Contact me- Features a contact form which includes form boxes that asks for the client’s name, email, subject and has a message box for the client to input request or message. This allows the client to communicate directly with the VO and inquire about potential projects.
• Back to top button – this allows the user to get back to the top of the page by clicking a button that appears, without having to scroll back to the top manually.

• A comments section on my blog posts.
• Add more blog pages and posts + images
• A pop that asks the viewer about cookies and sharing data
• A call to action button on the home page
• Add more demos to give the viewer a variety of my different services.

• Cloud- I used Cloud9 as the IDE while developing the website.
• This Website uses HTML and CSS .
• BootstrapCDN - The project uses Bootstrap4 for easy structuring and to make the project responsive .
• FontAwesomeCDN - The project uses FontAwesome to provide icons .
• Google Fonts - The project uses Google fonts to style the website fonts.
• Javascript - The project uses brief Javascript to create a back to top button.

Click here to get to testing page.

I used Github pages to deploy the site.

• Log onto GitHub.
• on the left side of the screen, select the repository with the name "Voiceover-Artist"
• Then from the menu items, select Settings.
• Keep scrolling down till you get to the GitHub Pages section.
• within that section, click the button under source labelled None and select Master Branch
• when you select the master branch the page will be freshed and the website would then be deployed. deployed.
• Scroll back down again to the GitHub Pages section and click the link to the deployed website.

To deploy this site locally follow these steps:

• Click this link to the repository https://github.com/xxkaminaxx/Voiceover-Artist
• Then click the "clone or download" button on the right side of the screen.
• Copy the link given then open up the IDE you wish to clone the repository in
• Within the terminal in the repository, type in "git clone " then paste the link next to git clone and press enter
• You should have the folder in your IDE.

From the development stage to deployment stage.

I made some changes during the decvelopment from the initial designs see in the wireframe mockups:

• Homepage- I took out the extra links to the other pages on my site because I didn't want to cause information overload to the viewer by presenting too many options.
• About me - originally i was going to make it so the image and the text box on the page would change positions as the screen size changed but I thought this was unnecessary and could be made simplier, so i kept the page the same even when the screen size changed.
• Blog - originally i was going to change the structure of the boxes on this page on the desktop view but decided against it because i wanted to keep the page simple, so i kept the structure the same even when the screen size changes.

• The text used for this site was taken from google fonts library

• The photos used in this site were taken by myself, Stephen kasolo
• The background image used throughout each of the pages was taken from https://www.freepik.com

(This snipet of code was taken directly from my JS script.)

"window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 700 || document.documentElement.scrollTop >700) {
    document.getElementById("TopBtn").style.display = "block";
  } else {
    document.getElementById("TopBtn").style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

//This code was taken and modified from https://www.w3schools.com/howto/howto_js_scroll_to_top.asp"

I got my inspiration and ideas from looking at other voice actor sites. Particularly from these two sites:

• 1)http://www.rachaelcharles.com - Rachael Charles
• 2)https://kimhandysidesvoiceover.com/ - Kim handysides

Disclaimer

• The content for this Website is for educational purposes only.