Landing Page

A one-page landing site to showcase my BCIT in-class projects. This was one of the first projects in our BCIT Technical Web Design Program, and we were given much creative freedom. I created a artistic site that illustrated each project as a whimsical house on a street. Though aesthetically pleasing, I have since learnt about accessibility, user-experience and responsive design, and would not create such a graphic-heavy site that relied so much on images as a form of navigation.

View Live

Process

Ideation

A large part of why I decided to learn web design was to fuse my artistic background with the technical opportunities of front-end development. Therefore, I saw this project as an opportunity to utilize my illustration background to create an eyecatching website.

Design

I created the houses on Adobe Illustrator, and created a mockup in Photoshop to visualize the design.

Landing Page Mockup
Landing Page mockup

Development

Cloud Animation

I created subtle cloud animation using css animation. I had ten cloud elements in total, each a different size and moving at a different spend to create the illusion of depth.

Show code
			
	/*-----------------------CLOUD CSS ANIMATION ---------------*/

	.clouds {
		-webkit-filter: blur(7px);
	}

	/* -- CLOUDS SLIDING RIGHT --*/

	@keyframes slide-right-01 {
		 0% {position: absolute; right: 60%; top: -160px;}
	    100% {position: absolute; right: -250px; top: -160px;}
	}

	#cloud-right-01 {
		opacity: 0.1;
		width: 250px;
		height: 85px;
		animation: slide-right-01 200s linear infinite;
		overflow: hidden;
	}

	@keyframes slide-right-02 {
		 0% {position: absolute; right: 100%; top: 40px}
	    100% {position: absolute; right: -300px; top: 40px}

	 }

	#cloud-right-02 {
		opacity: 0.3;
		width: 350px;
		height: 103px;
		animation: slide-right-02 100s linear infinite;
		overflow: hidden;
	}
			
		

Final Website

Landing Page Screenshot View Live ‹ Back to projects