Brylla Quiano

Skills Applied

  • Development Planning
  • Wireframing
  • Responsive Design
  • HTML
  • JavaScript / jQuery
  • PHP
  • Sass

Tools

  • Adobe XD
  • Adobe Illustrator
  • Adobe Photoshop
  • Figma

Version Control

  • GitHub
  • Filezilla

About the Project

My portfolio site showcases featured projects I have accomplished so far. Each project is unique because different skills and tools were applied and the process of building each was somewhat different from one another.

Design Process

Style Analysis

I looked for inspiration online and tried to "copy" those designs. I already came up with a mockup and started coding it but the longer I looked at it I realized that this design wasn't me.

Below is the previous design:

Previous design

I needed to change the design to something that would reflect who I am. I stuck with yellow (because I love yellow) and decided to make it "cartoon-ish". The design was inspired by a really cute illustration of the Vancouver skyline at Creative Market:

Illustration of the Vancouver skyline

I also wanted to show where I came from so I created Baguio City's (my hometown) skyline in Illustrator and placed that on the landing page:

Illustration of Baguio's skyline

Development

Animations. Animations. Animations.

Yes. Animations. I wanted my site to be engaging and fun so I saved the skyline images as SVGs and manipulated each element to behave the way I envisioned them.

Thanks to online resources such as Figma and Animista for making my job a whole lot easier. Below is a sample of how you could just select your desired animations and copy the keyframes for it using Animista:

Figma has a feature where you can export SVGs with an "id attribute" attached to each element. This made these elements easy to target especially I wanted different animations for each. However, this made my code chunkier than I expected.

Screenshot of how to export SVGs using Figma

I wanted the bouncing animation of the skyline images to happen simultaneously. I implemented that through the use of a setTimeout() function in JavaScript / jQuery:

When it comes to animating the Vancouver skyline, I want to make sure that the element is in the viewport before initiating the animations:

Animating sure was one of the trickiest part of coding this site. But I had fun nevertheless.

Insights

I'm very indecisive when it comes to a lot of things and it sure was a reflection of how I handled my work. I should have made a definite plan in the beginning to avoid delays. It was my first time submitting a project beyond its due date and I feel guilty for doing so. I value organizing things such as my files and schedule but organzing your thoughts should also be part of work.