Personal Portfolio Project

A stylized website to showcase my work

home page
Image of Jasmine Kameya portfolio responsive website displayed on desktop, tablet, and mobile view

The Project

Going into this project, I understood that in this industry, having a live portfolio is vital because it is your chance to showcase the range and level of your talents and abilities. Initially I found creating my own portfolio a challenge, because in this unique case I was in charge of everything from content, to design, to development. This project helped me understand the scope of what is involved in creating websites, and it also gave me more experience in following a creative as well as technical process to ensure my work was organized and efficient. Considering that throughout the process of making the website I changed my ideas so often, I believe the design I was finally able to settle on (which is what you see here), will probably be different eventually anyways. This page is where I am able to describe my process and explain the design and development showcased on the website.

Toolkit

  • HTML
  • SASS
  • JavaScript
  • Illustrator
  • Photoshop

The Process

For my portfolio I started with a content list to organize what I wanted to showcase as well as any writing I would need to provide. From there I created rough wireframes to give me an idea of the layout of what was going on my site. Because I was working by myself I did not need to go through as many formal steps during the initial phase of brainstorming, however by creating these lists and mapping out what I needed I felt much more organized and was able to prioritize tasks more efficiantly.

The Design

I wanted to make my website colourful, while maintaining a bright and minimal feeling at the same time. I was also hoping to create a design that would reflect my own personal style. By using playful and bold fonts, combined with a soft, yet bright colour scheme, I was able to create a look that I believe represents my fun but quiet personality.

Colours

Fonts

Playfair Displaydisplay heading

Montserratmain heading

Latobody text

The Development

The development process for my portfolio was quite simple because the design did not involve much JavaScript, and the website was static so I was not required to build any templates using PHP. I still wanted to incorperate some small JavaScript and CSS animations, so I added a scroll function in JS to make the text fade in when that part of the webpage was visible, as well as some very subtle CSS animations throughout the landing page. I also installed a filter gallery using a JS Isotope plugin to categorize my projects on my work section.

The Result

Overall I was able to accomplish my goal of creating a minimal, bright, and colorful portfolio website. I found that although not everything worked out the way I wanted it to, this project was still an amazing way for me to learn more about the web design process and gain familiarity with the various tools needed.
If I were to go through the same project again, there are a few things I would probably do differently. For example, I built the website using simply HTML, but next time I would use PHP in order to maintain some consistency and organization to my files rather than having several repeating fields. I also would have spent more time checking the quality of the content, before putting so much effort into the design and development. That way I would have a stronger foundation when actually building the website.