Portfolio Design

Scroll Down

Situation

Just like for each design project, I believe that this portfolio's story is well worth being told from start to finish.

The previous site design for a school project was built from scratch and hosted on the school server however I wanted a design that best reflects who I am and makes my work stand out.

The old site can be accessed here >
"I do not like templates. Anything is better than a half finished work, even a blank canvas."
Previous site layout design built from scratch last year and hosting on the school's server knocked a few assets and fonts out

Personality

Personally, I do not want to fall into the typical black and white portfolio that seems to be the popular trend because it drains the creator's personal identity but I understand that it's main function is to focus on content rather than pure aesthetics.

Goals!

  • Playful, simple vibe but still professional
  • Some sort of interesting splash --> animation or depth?
  • Bombard portfolio with a lot of art to appease the soul :)
  • Simple geometric shapes, throw back to the old days!
  • S P A C I O U S for those who are DEFINITELY claustrophobic
  • Image heavy because there are a lot of visual people and I have lots of visuals
  • Articulate subtext for those who need lots of context to understand something (because I, too, struggle with vague descriptions)
  • Give the portfolio a character and story!
"Feeling cute, might delete later 🙃🙃🙃🙃"
Nav bar content and order was planned however it was scrapped because I didn't have clear categories for the projects

Planning Stage

Intense planning was done by sketching however, as time goes on, I couldn't stop myself from experimenting hence why the current splash layout is not found on either of these sketches.

Splash page layout designs and projects to include in the portfolio (some of them were cut out in the final process due to lack of space)

Building on Webflow

TOOLS: Webflow
SKILLS: CSS, HTML

Workflow on the Doodle Bank page with more images to add

Design Branding

Title Color
Text Color
Subtitle Color
Flaws Color
Goals/Future Color
Feats Color
Main colors are on first row for the overall theme while secondary colors are in second row for subtitle text (Feats, Flaws, Future, etc)
Shapes pattern with a grey background added for visibility
Chosen splash to represent my portfolio

Lil' Witch Games Special Edition

To play into the theme for Lil' Witch Games, I've decided to dedicate this special project a custom theme.

The project page's content is similar to a dark theme where the body is dark grey with light text and the red accent. Nonetheless, it was an extra quirk however I enjoyed making the custom edits!

Case study for Lil' Witch Games >
Dark theme applied onto the Lil' Witch Games page and red accent

Let's Talk!

Want to talk about a project?
Need a team member?
buuchau.chau@gmail.com

Website built and designed by Buu ⚡️