This project is built to showcase my own work as a digital illustrator and act as a portfolio in attracting new projects & clients.

The website provides a short introduction to my background & skills, displays my most recent works as well as gives the visitor a chance to get in touch via a couple of routes (i.e. email, form, social channels).

The website has the end goal of attracting new projects & clients. With this goal in mind, it has been designed to include all necessary information & features so as to facilitate potential recruiters in viewing examples of the work styles as well as reach out on any potential offers.

There are four key experiences which I wanted to make as seamless as possible for the end user/visitors to my website:

• As a user I want to easily navigate through the various sections of the website and be able to return to the initial starting point at any stage.
• As a user I want to read more about you, see your work and contact you - via the click of a button, as well as via the main navigation menu.
• As a user I want to have a nice experience of navigation on both desktop as well as mobile, without feeling like one is easier to use versus the other.
• As a user I want to submit a form and be notified if the information I'm inserting is not correct.

Existing Features

• Navigation - allows users to access the various sections of the website. It is fit for both desktop and mobile - with a hamburger version for mobile.
• Back to top button - allows users to return to the initial starting point at any stage of their navigation. Source > https://www.w3schools.com/howto/howto_js_scroll_to_top.asp.
• CTA Buttons - allow users to perform an action via clicking a call-to-action button (i.e. navigate through various sections acting as an alternative to the navigation bar).
• Contact Form - allows users to get in touch by submitting a form which indicates whether any information was not filled in correctly (i.e invalid email address). Validation script source > https://mdbootstrap.com/docs/jquery/forms/validation/.

Features Left to Implement

• A slide show gallery for the illustrations in the "My Works" section.

• HTML5 - this project uses Hypertext Markup Language for its markup.
• CSS - this project uses Cascading Style Sheets as the style languge to describe the presentation of the markup.
• JavaScript - this project usrs JavaScript for dynamic elements (i.e. back to top button, form validation).
• Bootstrap 4.5.0 - this project uses the Bootstrap framework to automate the responsiveness of the website.
• MDB - the project uses the MDB framework for implementing features.
• JQuery - the project uses JQuery to simplify DOM manipulation.

Conducted functionality testing on the featured of the website:

• Navigation - tested that the navigation menu works well on both desktop and mobile.
• Contact form: tested submitting the empty form to verify that an error message on the required fields appears. Next, tired to submit the form with an invalid email address and verify that an error message appears. Finally, verified that submitting the form with all valid fields renders a successful submission.
• CTAs & Buttons - tested that all calls to action and buttons are redirecting to the correct destinations.
• Responsiveness - tested that the media queries work as intended with the layout of the website adjusting according to the screen size of the device it is viewed on as well as tested compatibility with different browser types. Devices smallers than 800px width in screen size, will render in a one columm format, the title text would be centered and calls to action will float to the right hand side to account for ergonomics when using smalls devices.

This project is deployed with GitHub Pages, selected the master branch to enable GitHub Pages for this repository.

The photos used in this site were obtained from:

• Banner Image Source > https://www.drawkit.io/illustrations/server-woman-monochrome
• Images in "My works" section are my personal digital drawings

I received inspiration for starting to work on this project by the Code Institute project suggestions for "User Centric Frontend Development Milestone Project" as well as from researching through other digital illustrators' websites to inspire on the structure and layout.