NOTE: My website has been updated several times since this article was written.
In keeping with my brand guidelines, my website is designed to be fun, creative and professional. The site has been built to be compatible with a variety of screen sizes, from desktop to mobile, and at the core has been developed with performance and accessibility uppermost. The site has been created using HTML, CSS, jQuery and Javascript with minimal dependencies, utilising system UI fonts and lazy loading images. The load time of the website is very low.
The landing page has been created to provide fast access to the content users will be looking for in a minimalist and well-structured fashion. It features a call to action to direct users to my portfolio with a secondary button to immediately watch my showreel without having to leave the site. As well as this, the page outlines my skills and a brief description about me. To some extent the landing page acts as a digital business card.
The portfolio page features thumbnails of the previous projects I have completed organised into their respective category eg. videography, photography, graphic design etc. with a navigation bar at the top which, when clicked, sorts the projects into their categories. This allows users to easily find the content they are looking for. The thumbnails can be hovered over to reveal the nature of the project and its category. When users click on the thumbnail, they will be taken to their desired project page.
Depending on the project, the header will either feature an image or video. When an image is hovered over, it reveals a magnifying glass. When clicked, a higher quality, larger image loads in a lightbox, with smaller thumbnails below if there is more than one image on the page. The images can be zoomed in on and the user can navigate between images with either the arrow icons or the keyboard. The page also provides information related to the project such as the client, skills, date and the ability to share the page on social media as well as written content describing the project.
Rather than providing a link to a PDF version of my CV, I built the page to look like a CV. This way it will be a much better experience for users on mobile. The page features download and print buttons for ease of use. The CV outlines my skills and expertise as well as my education and previous work experience. It also conveniently provides my contact information.
The contact page lays out a simple form for users to fill out if they wish to get in touch. The form uses Google reCAPTCHA to help guard against bots. Fields turn red if they are not completed correctly. Once the form has been successfully submitted, I receive an email notifying me. On desktop the page features a photograph which I have taken, highlighting my photography skills. I chose this particular image as I thought a lighthouse was fitting for the contacts page.
