Back to projects

Building my portfolio website

This entry is a walkthrough through of my design process and inspiration for making this portfolio website. I am using Webflow's design and hosting service. My basic knowledge in HTML and CSS has come in handy to lower the learning curve of designing my first site with this tool.

Since this is my own personal website These are my goals for it:

Fit my personal aesthetics.
Have an eyecatching home page with my resume.
Keep the case study pages simple to not distract from my work.
Build a basic functioning website within a week to continue my job hunting.

Firstly I looked up examples online of other portfolio website designs to make a moodboard or inspiration board.

Next, I selected a color palette. This one was easy as purple is my favorite color so I built it arround it with a few color variations, checking for good contrast with some tools available online.

Color palette for this website. wersion 1

The constrast checkers I used are: Accessible color palette builder and WebAIM contrast checker. I determined, my original palette needed some adjusting so I lowered the brightness of the medium value purple color to be able to use it with large text against the dark purple background

I checked again and here are the results:

accessible color palette combinations according to the Accessible color palette builder tool. It features a grid of the colors and backgrounds that hold good contrast for text.

Here's the final adjusted palette:

Happy with the result, I proceeded to sketch out some quick wireframes on my iPad.

These sketches gave me an idea of general layout of the website so I could start with a figma mockup. My main goal for the figma mockup was to get a general look and feel of the website and design a hero banner for website's homepage. I also have a plugin to check contrast against different color blindness types. Technically any decorative graphics don't need to be complaint with minimun contrast requirements according to the WCAG guidelines, but I still check so elements don't blend in too much with the background.

color blind test of the homepage graphic using a figma plugin.

With this decided I began building the website in Webflow.

1 year after publishing my portfolio website I decided to give it a small re-design. I removed the big header image I designed in favor of a simpler header. Took away the description beside the work section as It was repetitive with the new header. I'm keeping the cats motive for now.

For the Work tab I went for bigger thumbnail projects. Must inspiration I looked for online had big banners and sections for each project but I want my projects to be viewable at a quick glance without much scrolling so I'm keeping the grid for this page even if its not "the standard".