Personal Portfolio

sketch icon photoshop icon illustrator icon github icon html icon css icon jquery icon

A portfolio website to showcase my web development and design projects. My vision was to create a clean, user-friendly website while still integrating subtle, unique elements, such as the logo animation, hand-drawn patterns, and hover effects . I also used this opportunity to develop a mobile-first experience, experiment with Bootstrap for layout, as well as continue practicing Github for version control.

View Live ‹ Back to projects



My initial sketches and brainstorms were aiming to showcase as much of my artistic background as possible, with ideas of fancy animated artwork and bold colours. After looking through examples of successful portfolio websites from past students, I realized usability and content were most important. I scratched ambitious ideas in favour of a clean, well-designed and developed website that functioned well and most importantly, highlighted the actual work in my portfolio.


With the focus on showcasing the work, I designed a clean and simple wireframe.

Portfolio Wireframe
Wireframe for desktop, tablet and mobile


I coded a few subtle animation using jQuery and CSS transitions to add a little interactivity to the website, but I wanted to the website to be overall quite static to be lighter and less distracting from the portfolio pieces.

Subtle fade in effect on scroll | jQuery

Show code
					// ----------------- FRONTPAGE PROJECT THUMBNAIL ANIMATION -------------------

					// If page is frontpage...
					if( $('body').hasClass('home')){

					// And if on mobile...
					if($(window).width() < 575){

					// Fade in projects when user scrolls

			// Otherwise, just show projects on normal

	// Helper function
	function fadeInProjects(){
	const $projectCaption = $('.project-caption');
	const $projectThumbnail = $('.project-thumbnail');
	const $projectThumbnailPos = $projectThumbnail.offset().top;
	const $scrollPos = $(window).scrollTop();

	if( $(window).scrollTop() > (( $(this).offset().top ) - 300)){
	// .parent().next().slideDown();

Hero image container dynamic resize | jQuery

I wanted to try a parallax effect for my hero/header image, but I wanted more control over how the css background hero image would appear in the container, so I coded a function to determine the height of the hero image container to ensure the whole photo would show even while resizing.

Show code
		/ ----------------- HERO IMAGE SIZING SCRIPT -------------------
		const $hero = $('.hero');

		// If page is a project single page...
		if( $('body').hasClass('single')){

		// Load the correct hero size

		// Incase the user resize the window, also load the correct size

// Helper function to load correct hero container size
function loadCorrectHeroSize(){
if($(window).width() < 640 ){

Show/Hide code | jQuery

Show code
				var $tab = $('.code-tab');
				var $code = $('pre');


				// Check if this code is already shown
				// If already shown, remove 'open' class and hide answer
				.text('Show code')
				// If it is not open...
			// Remove 'open' class from all other questions
			// Open this answer and add 'open' class
			.text('Hide code')


Final Website

Personal Portfolio Mobile
Personal Portfolio Tablet
Personal Portfolio Desktop
View Live ‹ Back to projects