My Personal Website

The purpose of this website is to provide future employers and clients a working piece to showcase what I am capable of doing and to provide them with all of the necessary information that they require in order to make a decision on either to hire me for a job that I have applied for or for a client to hire me to do a job for them. I have keep it clean and minimalistic as this is the style that I prefer for my personal website.

UX

The purpose of this website is to provide future employers and clients a working piece to showcase what I am capable of doing and to provide them with all of the necessary information that they require in order to make a decision on either to hire me for a job that I have applied for or for a client to hire me to do a job for them. I have keep it clean and minimalistic as this is the style that I prefer for my personal website.

User Stories

• A potential employer would like to know more able myself and my work and education history, so they can go visit the ‘About Me’ section of my website to find all of the information that they require.

• A potential client would like to hire me for a job, however they would like to see what type of projects I have done before and am currently working on, so they can go to the ‘Projects’ section of my website to see the project that I have done to give them a better understanding of what I do.

• A potential client would like to get in contact with me to discuss details, so they are able to go to the ‘Contact’ section of my website where they will be able to contact me either via email, phone, GitHub or LinkedIn.

Wireframes

See all images located in the directory named ‘Wireframes’.

Features

- Navigation – I used HTML & bootstrap to create a responsive navbar so that people can easy navigate no matter what device they are on.
  
- Welcome Section – I used this section to welcome anyone who views my website to make it feel more personal.
  
- About Section – Here I provided all of the information about me including a profile picture and a personal summary so that viewers can get to know me better.
  
- Project Section – Here I have created a responsive grid showcasing all of the projects that I have done or contributed towards.
  
- Skills Section – Here I have used bootstrap to create progress bars in which I use to represent my comfort level with the associated languages that I use on a day by day basis.

- Contact Section – Here I have used fontawesome to represent ways in which viewers of my website can get in contact with me.

Features Left to Implement

In the future as my skills increase I would like to include a gallery section of all of the pictures I have taken myself so that others my see. I would either have this as a carousel or as a grid system where they can click on each to enlarge the images.

As I add more projects I would also like to implement the option for the viewers to either view the projects either in a grid or in a carousel and they can cycle through all of the projects that I have done.

Technologies Used

• HTML

  • I used HTML for the structure of the website as it is the best and easiest language to do so.

• CSS

  • I used CSS to style the Bootstrap skeleton template.

• Bootstrap

  • I used Bootstrap for the responsiveness of the website as many websites use family libraries to help with the styling and responsiveness of websites.

• FontAwesome

  • I used FontAwesome for all of my icons in my website.

• GoogleFonts

  • I used Google Fonts to pick the fonts for my website. The fonts that I have chosen are Raleway and Playfair Display.

Testing

The first thing that I tested on my website was to checked to see if my download button for my CV was working correctly. I then went to the ‘About Me’ section and scrolled down to where I could download the CV. I then clicked the button and it opened the PDF file in a new tab and from there I could view it and download it.

When I was testing the responsiveness of my website on mobile views I did noticed that the bottom border for the projects card and the button for viewing the project would collide with each other between the medium and small media breakpoints. I will address this issue my restyling the project card so that it does not collide with each other in a future update.

Finally when I was testing the responsiveness of my website, the background image that I have chosen for the welcome section does not scale nicely when I went onto smaller screens. This is something that I will be able to address for a future update.

Deployment

These are the steps that I had to take when deploying my website onto GitHub Pages:

• I first had to create a repository following this naming convention: username.github.io

• Once that was done, I then had to clone the repository onto my computer.

• I then had to copy all of the necessary files for the website to function.

• Once that was done, I had to add all of the files to staged changed. From there I then committed the changed with a message of “Initial Commit”.

• I then went and pushed the changes to origin master and once it was uploaded I went onto roymagnussen.github.io and saw that my website was live for everyone to see.

Credits

Media

• The photos used in this site were all sourced from myself.

Acknowledgements

• I received inspiration for this project from https://www.devonstank.com/ and http://www.garysheng.com/