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 ‹ Back to projects



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.


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

Landing Page Mockup
Landing Page mockup


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);


			@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