David Caffrey Portfolio Site

Stream One Project: User-Centric Frontend Developement - Code Institute

This is a portfolio site to showcase my current and future projects. This site is for potential employers and freelance clients to view, so that they may see the technologies I have used and my design process. Included is a bio section, a downloadable version of my CV, a contact page and a page of projects.

Demo

A live demo of my portfolio site can be found here

UX

My primary focus for the project was to create a mobile reponsive site that would not require the end user to do too much navigation. I wanted the site to allow all users to view my previous work, my skills, info about me, and find my github page. For future employers I wanted to provide them with a downloadable version of my CV.

User stories

From an employers perspective I want to see a body of completed projects.

From a clients perspective I want to see functional visually pleasing sites.

From a recruiters perspective I want see a CV.

Strategy

My goal in the design of this site was to provide a mobile first, user friendly, visually appealing experience for the end users.

Structure

In the project/portfolio section the end user will be able to quickly get and overview of the types of projects I have completed. These technologies will be broken down into diiferent sections. Each project will have a link to live site and to the relevant Github page. The about me page will contain a little bio infomation. The contact page will enable the end user to get in contact via email, phone or social media accounts.

Skeleton

wireframes Here.

Landing Page:

Projects/Portfolio Page:

About Page:

Contact Page:

Surface

A modern look and feel through the use of soft pastel colors. Just a few animations to the cards(bootstrap) I used to add a little movement to the site without being overpowering visually.

Technologies

• HTML
• CSS
• BOOTSTRAP 4
• JAVASCRIPT

Features

The sites main focus being a crisp design, I used cards to provide me with the compartmentalization I desired. During the build I felt that the cards could do with something to make them standout and opted to give them a little animation.

Features left to implement

I will add more projects as they become available. Create some social media accounts for myself and connect links to my accounts.

Testing

The first phase of testing consisted of incrementally testing each new addition to the html or css in all screen sizes in the dev tools. Also testing that all links took the user to the desired location on the site or to the correct external links such as the social media links, even though I do not have accounts to some of those links at present. The next phase of testing consisted of testing on physical devices such as ipad mini,moto c plus,huawei mediapad and iphone 7.

Deployment

The site is deployed on Github from the repo page then to the settings and down to Github pages and selecting the master branch.

Credits

Content

All content in this site was provided by David Caffrey

Media

The photos/dummy images were taken from Pexels.

Acknowledgements

The cards were from the bootstrap website and their animations were adapted from the W3Schools website to suit my project.