Andrew's Portfolio

photoshop icon illustrator icon html icon css icon jquery icon

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.

View Live ‹ Back to projects

Process

Ideation

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.

Design

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.

Andrew's Portfolio Wireframe
Wireframe for desktop, tablet and mobile

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.

Andrew's Portfolio Style Tile
Style Tile v.1
Andrew's Portfolio Style Tile
Style Tile v.2

Development

The most challenging code to write was for the animations that the client requested:

  1. 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.
  2. On desktop, the client wanted the circular profile picture to float into the side bar when the user scrolls past the hero image.

Responsive Scroll Animations | jQuery

Show code
			
	// --------JAVASCRIPT/JQUERY CODE----------

	// Header scroll event handler

	const $window = $(window);

	$window.scroll(function(){

		const windowWidth = $window.width();

		if(windowWidth >= 1024){

			desktopScroll();

		}else{

			mobileScroll();
		}
	});


	// Scroll helper functions

	const $header = $('header');
	const $title = $('.title');
	const $profilePic = $('.profile-pic');
	const $main = $('main');

	// Desktop scroll function

	function desktopScroll(){

		const pos = $window.scrollTop();
		const $stickyTitle = $('.sticky-title');

		$header.css({"header": 400 - pos});

		if(pos > 170){
			$profilePic.addClass('sticky-pic');
			$title.hide()
				  .addClass('sticky-title');
			$stickyTitle.show();
			$header.fadeOut();
			$main.addClass('main-side');
		}
	}

	// Mobile scroll function

	function mobileScroll(){

		const headerHeight = $('header').height();
		const pos = $window.scrollTop();

		if(pos > headerHeight){
			$profilePic.addClass('sticky-pic');
			$title.addClass('sticky-title');
		}else{
			$profilePic.removeClass('sticky-pic');
			$title.removeClass('sticky-title');
		}
	}
			
		

Final Website

Andrew's Portfolio Mobile
Andrew's Portfolio Tablet
Andrew's Portfolio Desktop
View Live ‹ Back to projects