my-work

This website is primarily design to host projects and provide information, while also serving as an example of my work and design aesthetic.

UX

Design

The application utilises a custom responsive design with a Bootstrap base.

The goal of the apps UX design was to achieve a smooth and vibrant look and feel for the user through a combination of a consistent color-scheme, the use of rounded shapes e.g. in the particles animation and icons, the duration and speed of the animations used to usher in each section and a contrasting use of the white and off-white colors.

Additionally I wanted the site to feel dynamic and alive. Links and buttons react when the user interacts with them e.g. the social icons animate in response to a users hovering. I also made use of simultaneous motion, where multiple elements are in motion at once at different speeds e.g. the progress bars, section animations and particles animation. The key to this in striking a balance between having too much going on and therefore potentially distracting the user, and having too little and making the app feel static as a result.

Features

The application has a couple of features:

1. To host and display links to my projects and CV.
2. To provide information about me and my contact details.
3. To serve as an example of my work and design aesthetic.
4. To allow me to easily add additional projects.

Technologies Used

• HTML

  • The project uses HTML.

• CSS

  • The project uses CSS to style the website.

• Bootstrap

  • The project uses Bootstrap to style the site and user experience.

• JavaScript

  • The project uses JavaScript to use create and write the sites logic.

• React

  • The project uses React.js to render the site.

• SASS

  • The project uses SASS to preprocess the sites CSS.

• Jest

  • The project uses Jest to test the React components.

Testing

During the development of this application testing was conducted using Jest. The snapshots and tests can be found in the components folders.

Known Bugs

Upon running the tests, Jest seems to be unable to find the FontAwesome icons for an unknown reason, although every test still passes. Despite this the FontAwesome components have been manually tested and are working perfectly as intended.

Planning

Site Map

Prior to the sites development a site map was drawn up to plan the structure of the website aswell as map out each section and choose the color pallette. As this site map was a preliminary guide there are some changes between the finished project and this document most notably in the color pallette.

This document can be found at: https://docs.google.com/drawings/d/1OX-fk7kLvVUgvcJRtHm3J0_8WuXOplf3v4waYsJNsDc/edit?usp=sharing

Deployment

This project was deployed to Heroku using the create-react-app buildpack.

The Project can be viewed at: https://cians-work.herokuapp.com/

Credits

Acknowledgements

• The site map document was created using Google Drawings