A design of a portfolio website made as part of my CodeFirst Web Development course, using Cloudflare, Jquery and Bootstrap.
It is a work in progress and many pages are not as accessible or responsive as they could be.
Available to view at: https://emcglackenr1.github.io/Art_Portfolio_Website/
The homepage design utilised a dark theme with bold coloured icons to navigate to the three primary sections of the site. This design also highlights the art-deco style logo I designed myself.
Hovering over the navigation icons cause a tile the colour the unselected icon was to appear around the icon. The icon and description become white and grow as if they are moving towards the user.
Once the user has moved to the other pages of the website a navigation bar appears at the top of the screen to assist with usability.
The logo appears in the top right and when clicked leads back to the homepage.
The homepage can also be reached by clicking the clearly marked 'Home' tab.
The sections of the website are now indicated in the top left, with the text of the currently active tab highlighted a bright white. When hovered over, the link text becomes underlined and a brighter colour. This highlights it while also making it distinctive from the active tab.
The page are separated into two main sections using a grid. On the left is the name of the website section, with text utilising the same colour of the tiles on the homepage to assist with intuitive navigation and emphasise the distinctive sections and topics. The circular frame for the photograph mirrors the logo in the top corner and the homepage. Similarly, the icons underneath the image are a similar style of tile to the homepage. They link to the contact form, my Github and my LinkedIn profile. Similar to previous links the icons become a bright white when hovered over.
The right-hand section of the grid is the content. For the sake of the website demonstration, I utilised placeholder ‘lorem ipsum’ text.
This section uses a carousel to allow the user to navigate between the different work areas. Movement between these pages is achieved using the arrows on the left and right side of the screen. The carousel moves from one work type to another after 10 seconds.
The envelope icon visible on the home page and under the circular images on other pages is now larger and no longer possible to click. This is so that if users have navigated to contact using this icon it has a clear reference.
This section contains a contact form with a dropdown option for enquiry type. This would assist me with query organisation.
