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.

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:  

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.  

With this decided I began building the website in Webflow.