Portfolio Landing Page

Landing page created as a student profile to showcase student projects during my time in the Technical Web Designer Program at British Columbia Institute of Technology.

HTML5

CSS3

cascading style sheet icon
Javascript

Concept

My goal for the Portfolio Landing page was to create a digital experience that reflected my design voice, showcased my newfound skills in web development and would hold class projects whilst moving through the six-month intensive Technical Web Designer program at BCIT.

The inspiration behind the design was to translate the feeling of movement and tactility of the real world onto the screen. The movement was implemented using a smooth scroll effect with Javascript and the tactility was implemented with text-shadows and inset-box shadow to create the illusion of depth on components of the site that I wanted to highlight.

This project was also an opportunity to implement Google Analytics and to begin to develop my online presence and brand.

Development

The Landing page was built over the course of 2 weeks which encompasses developing a design, organizing the content and coding using a mobile-first approach.

The challenge of this project was to create a design that would achieve my goal of showcasing the multitude of projects, technical skills, and my own story as a web designer within the constraints of a single page.

For this to be achieved I asked myself repeatedly How can I keep this simple?

The solution was to create a design based on the idea of reusable components for each section. This way the design and the code once decided for one component could be reused repeatedly.

Reflections

I found it equally as exciting and challenging to develop an authentic brand for myself which merged both my self as an artist new identity as a web developer and translated it into a functional and engaging digital experience. What I learned most from the design and development process of this project was the benefit of thinking and designing in components.

view live