Katharine Arnold Circus Artist.

Aim of the site

A website dedicated to showcase and inform users of the site of Katharine Anrold’s ability of circus as her art form. It is a website built to inform and show videos, images and examples of Katharine’s circus work and experience.

With the easy and simple fixed navigation menu, the user can traverse through Katharine’s work and life of circus to see if they would like to hire her for events, projects or enquire about upcoming queries in events and entertainment. With the use of high quality and effective images we are trying to draw the user in and wow them with her skills and abilities.

I have used HTML, CSS and Bootstrap Framework to build this and the website will form part of my ongoing portfolio of work.

Demo

A live demo of the website can be found here.

UX

This is a website where the user can find information about the international circus artist Katharine Arnold.

• The visitors can submit their details to enquire about a job or event they might need Katharine’s skills for.
• The visitors can see a gallery of photos and links to video demonstrations of Katharine’s skills.
• The visitors can find out Katharine’s experience, work history and past projects.

In order to achieve this, the client wanted a website which meets the following criteria:

1. A 5 page website that included a strong but simple landing page, an About page to show a concise work history and projects she has collaborated on, A gallery highlighting skills and action shots of performance referenced in her about section, a video page to show full length acts easily to people enquiring; with risk assessment attached for technical requirements. Finally a contact page for people to be able to drop an enquiry. There is also a footer with targets to new pages of Katharine’s professional social media to showcase her talents more and give the visitor another platform to easily access. There is also an email link attached to her professional email, this also gives potential clients a chance to contact her directly if they need an immediate answer.
2. Plain simple black background, with vibrant and striking images theme the site, with white text to emphasise the simplicity of the site and focus more on the images and pops of colour the images produce.
3. Large amount of images with videos and video links to show rather than describe through text. Studies show bookers and producers usually want a quick way to access media to make a decision on whether they want to book a circus artist in the first minute of images and videos presented.
4. A concise but brief work history to highlight the best of Katharine’s career. Again the main career highlights have been picked out with a BOLD text to draw attention to them quicker if someone is doing a skim read of this history.
5. A form where the visitors can submit their details and comments to put forward queries to Katharine.
6. Final note during the initial design phase of the website. I wanted to use a simplistic approach so not to overwhelm the users with images and text which distracts their attention away from the actual content. Also a sleek and minimalist design gives the website a more modern feel.

Features

- A gallery of photos

• Responsive images retaining their height placed side by side for impactful collage effect on screen.

- Fixed heading and navigation bar

• This is to ensure easy access and navigation throughout the site. A visitor can easily jump between image, videos and contact pages without having to endlessly scroll. The Navbar will also have a background that has a gradient of light grey so users can easily read the text when scrolling through the site. It will be fixed to ensure users can jump quickly through the site if needed.

- Videos

• Links to videos and showreel acts as well as a pdf view link of a risk assessment to provide physical work of Katharine, as well as technical safety aspects required for her acts. Accessible in one place.

- Contact Form.

• A form where the visitor can submit their details and possible comment about the website or interest to book Katharine or consultancy queries. It has three input boxes containing text fields. These are for Name, Email and a message you want to send to Katharine.

- Address and Social Media links in footer

• The address and social media in the footer across all pages to ensure easy access to professional social media throughout the site. They will open on a separate page so they do not take viewers away from the site.

- About page

• Concise, informative and punchy resume and history of Katharine’s projects, and events as a circus artist. It highlights in bold the key elements of her resume and has eye catching performance shot at the side to aid the visual representation of her on stage presence.

Wire Frames

• The wireframes for the initial website were drawn by hand and can be located here.

• When designing the initial layout of the website I provided a sketch for how I envisioned the website to look on both desktops and mobile phones.

Future Goals

• The Gallery to be more responsive in the sense of when you hover over and image they grow and expand with the scroll over. Then decrease to their original size when the scroll goes away from them.

• The use of maybe a video heading showcasing sharp, powerful and dynamic shots of Katharine’s showreel to grab attention as soon as people arrive on the landing page. Will have to use python and java script to achieve this.

Technology Used

1. HTML - This was used for the overall structure of the website.

2. CSS - This was used for the overall and bespoke styling of elements on the website.

3. Bootstrap Framework This was used for Fixed navbar acroos all site.

4. Font Awesome – For Social media Icons in the footer.

5. Google Fonts - I used Google Fonts for "Raleway" and "Sans-Serif" fonts on the website.

6. GitHub - I used to store my repository for the project and record all my commits.

7. GitHub Pages - I used to deploy my website.

Testing

Manual Testing

• Manual Checking/Testing

  • I physically sifted thought to make sure that there were no unused classes within the HTML and that any class given was correctly linked to a style rule.

  • I tested every link within my website to ensure the links worked and are correctly linked to their relevant page.

  • I tested the responsiveness of the website to ensure that all content remains readable at various sizes, such as desktop, mobile phone and tablet.

  • I tested the menu function thoroughly at the various sizes mentioned above and that the buttons within the menu work as expected.

  • I tested the website within the Google Chrome, Mozilla Firefox and Microsoft Edge browsers to ensure it displayed correctly and address any issues that occur.

• I primarily built the website and tested each aspect of development through the use of Chrome DevTools to ensure that the website remains responsive at varying sizes. I used their pre-formatted screen size tool to check at what levels the website breaks and adjusted the code accordingly.

I also used the tools below:

• W3 schools to help me with media queries and to also help with basic stylings in CSS as I forgot how to underline text without using html. W3 Schools

• HTML formatter HTML Formatter to format my HTML code so it’s easy to read.

• Photo editor online to blur the edges of a photo to make it more visually appealing in about section Photo Editor

• Flexfroggy to help me with flex positioning of elements. FlexFroggy

Issues and resolutions

During my first conversation with my mentor he pointed out about the header and nav, as well as positioning of elements throughout the site on various pages. He suggested Flexbox research to help me overcome positioning with flexbox capabilities.

During the creation of the different feature I came across some issues:

• Positioning of elements I was using absolute positioning a lot throughout which would not be responsive with media queries and scaling down to different devices. After trial and error and research on Flexbox and W3 schools I was able to position elements throughout my site how I wanted them to appear on the pages, as well as enable them to be scaled up and down for various devices.

• The header and nav were originally fixed by myself through HTML coding and CSS stylings, however after them proving difficult to arrange other elements on the page without JS queries and making scaling to different devices difficult. I decided to go onto Bootstrap to use their fixed navbar setting to make scaling easier.

• When I coded the http links for the social icons, the icons turn blue instead of the white as intended. This was easily rectified by adding color:#ffffff to the icons class. As well as creating a class for the hover stylings over link elements so that there was not a blue highlight when hovering over them.

Deployment

I developed this project using GitPod IDE and enabled me to push through all commits to GitHub.

The live version of this website is hosted using GitHub Pages and is deployed 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 delpoy Circus Superstar Katharine Arnold from its repository in GitHub I completed the following steps:

1. Log into GitHub
2. From the list of repositories, select Michael-Standen/Circus-Superstar-Katharine-Arnold
3. Click on the settings button located just below the Fork option.
4. Scroll down the new page to GitHub Pages.
5. Select Master Branch from the dropdown menu.
6. After selecting Master Branch, the page will refresh and the site will be deployed.
7. If you scroll back down to the GitHub Pages section after the page refreshes, you can grab your live link to your deployed site.

To Run Locally

If you wanted to run this project locally and not use GitHub Pages, you can clone this repository directly into the editor of your choice by pasting git clone https://github.com/Michaelstanden/Circus-Superstar-Katherine-Arnold into your terminal. To cut ties with this GitHub repository, type git remote rm origin into the terminal.

Credits

Content

All the images have been obtained from Katharine Arnold: Video wimeo link obtained from Roger Robinson’s Vimeo account with permission of usage. Everything else provided by myself e.g. risk assessment.

• youtube links for videos on videos page.
• Hotel cart Here
• Duo aerial cage Here
• Vimeo video Here

Acknowledgements

• I would like to thank Akshat Garg(my mentor) for his quick and intuitive feedback, help and advice.

• Bootstrap for the fixed Navbar code.

• W3 Schools for CSS stylings and HTML queries especially with media queries.

• Flexforggy for the help with flex positioning of elements especially in the about.html pages and contact.html pages of my site.

Disclaimer

Please note the content and images on this website are for educational purposes only.