This is my website to present a portfolio for myself. As I do not have any software related work experience to share, I generated a list of software related skills I have learnt and projects to present on my website. The aim of the website is to essentially target any talent seekers, or any individuals or organisations who would like to contact me for any collaborations.

A live demo can be found here: https://www.github.com/amcali/project-1

Use this section to provide insight into your UX process, focusing on who this website is for, what it is that they want to achieve and how your project is the best way to help them achieve these things. I generated a simple design for my website, and aimed for a clean set of colours to complement one another. Prior to designing my website, I viewed other portfolio websites from which I decided to choose lighter colours for legibility purposes, and to complement the projects that were presented. In addition, the colour choices aimed to give the user a feel of my character.

Through interactive components such as the UX and the multimedia contents and links presented, the website is to give more the user an understanding of my skills.

My website has the following features:

The navigation bar has been placed to stay at the top of the webpage. The links it contains link up to the respective sections on the webpage:

• Home
• About Me
• My Skills
• My Projects
• Contact Me

This section is featured by a Bootstrap jumbotron. It contains a hero image, which was taken from pexels: https://www.pexels.com/photo/row-of-black-and-gray-polished-pebble-on-gray-surface-940271/

The motto "Stepping stones pebble milestones. Milestones mine gemstones." was created by myself. The idea was inspired on the thought of taking small steps at a time to achieve greater goals. The text shadow feature was incorporated from the website: https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow A screenshot of the coding is available here: https://github.com/amcali/project-1/issues/1

The hero image and the motto aims to give the user an idea of my persona. The intention of using the jumbotron was to give the website the ability to be mobile responsive; as a homepage, the image was to act as a home screen.

This is a brief and simple outline describing what I am currently pursuing and something that describes what I do in my past time. This section was created using a container and placing the text and image into different rows. I used the Boostrap feature of columns and rows to ensure the section could adapt as much as possible to being mobile responsive. The coding template was adapted from https://getbootstrap.com/docs/4.3/layout/grid/#equal-width-multi-row

This section is to display my software related skills. I used Bootstrap cards to present the skills. The image overlays set in the background were taken from pexels: https://www.pexels.com/photo/close-up-of-computer-keyboard-on-table-317353/

This section used the Bootstrap Card as an illustration means to portray the projects displayed. The coding template was adapted from https://getbootstrap.com/docs/4.3/components/card/ :

All photos displayed in the cards were taken from Pexels: https://www.pexels.com/photo/assorted-salads-on-bowls-1640773/ https://www.pexels.com/photo/person-holding-black-click-pen-697055/ https://www.pexels.com/photo/pile-of-books-159866/

The accessible links stated in each of the card belong to third party websites: https://www.drawinghowtodraw.com/stepbystepdrawinglessons/ https://elnacain.com/blog/getting-started-freelance-writing/ https://www.goodfood.com.au/recipes/recipe-collections

The Contact Me section comprises of a form for users to potentially send a message to me, or to alternatively connect with me via my social medial accounts.

The background image to this section was taken from pexels: https://www.pexels.com/photo/black-ball-point-pen-with-brown-spiral-notebook-733852/

The form coding template was adapted from Bootstrap Forms: https://getbootstrap.com/docs/4.3/components/forms/

All the social media accounts belong to me: LinkedIn: https://www.linkedin.com/in/arwa-mc-ali Facebook: https://m.facebook.com/mar.yam.5283#_=_ Instagram: http://www.instagram.com/arwa_m_ali

As the form is not able to function in sending messages created by the user, I implemented a modal for which the code was adapted from the following source: https://www.w3schools.com/bootstrap4/bootstrap_modal.asp

For UI purposes, I placed an empty footer spacing as a means to balance the colours on the webpage.

The contact form used Bootstrap Form: https://getbootstrap.com/docs/4.3/components/forms/ The submit button links to an acknowledgement webpage: https://www.github.com/amcali/thank-you.html

1. HTML
2. CSS
3. Bootstrap 4
4. AWS Cloud9

I used the following websites to aid me with my project: and to adapt codes, links and features: Bootstrap library and template codes: https://getbootstrap.com https://mdbootstrap.com HTML and CSS examples and code: https://www.w3schools.com Images used in for the website background-images, jumbotron, cards featured in "My Project" section: https://www.pexels.com Icon images in the "Contact Me" section were taken from Font Awesome: https://fontawesome.com/v4.7.0/ Image used in "About Me" section was taken from my personal LinkedIn profile: https://www.linkedin.com/in/arwa-mc-ali Colours chosen for the website: https://www.canva.com/colors/color-wheel/ https://coolors.co/

I would like to have the contact form to be linked to my email, so that I would be able to receive any messages sent via the form. I would like to have a means of validating the field contents prior to the message being sent.

I would like to in future be able to have actual projects by me in place of the current ones showing in "My Skills" section.

No immediate usage of JQuery was used in this project.

I have tested the appearance of my webpage on different media device screens to ensure presentation is appropriate according to the media device size. The attempted coding that contributes to the development of my webpage may be found here: https://github.com/amcali/project-1/issues/2

This site is hosted using GitHub pages, and it is deployed directly from the master branch. In order for the site to deploy correctly on GitHub pages, the landing page must be named index.html.

All contents written on the webpage were written by me. Aside from numerous third party websites giving me inspirations, I would like to particularly mention https://christyannejones.com and https://www.haleyschafer.com/ which gave me great contributing ideas on my webpage.

All photos were taken from Pexels: https://www.pexels.com, and my LinkedIn Account: https://www.linkedin.com/in/arwa-mc-ali. All graphic icons used were taken from Font Awesome: https://fontawesome.com/v4.7.0/.

The third party websites mentioned above that were used to create this webpage was purely for educational purposes.