A one-page portfolio website for a local electrical engineer to display his achievements. The scope of this project was to practice developing responsive designs using several techniques we learnt in our BCIT program, such as media queries, picture elements, and more. I developed complex custom animation based on the client’s request, and optimized them for different device sizes using conditional jQuery.
I chose to create a website for someone else to gain as much experience as possible working with a client and to practice creating a website that conveyed the right message. A personal portfolio site was simple enough in functionality but still had room for creativity.
The client had a very clear vision of the various animations he wanted on his website, so my wireframes served to plan out the structure of the website as affected by the animations.
He was open to design choices as long as they conveyed a “friendly but professional” vibe. We agreed that the first style tile had a more cohesive colour palette and font choice, so I designed mockups based on it.
The most challenging code to write was for the animations that the client requested:
On mobile, the client wanted the hero image to shrink and the circular profile picture to minimize into a sticky header when the user scrolls.
On desktop, the client wanted the circular profile picture to float into the side bar when the user scrolls past the hero image.