Updating my Portfolio Website
Tags: career, beginners, resources
Published: 2019-09-01 19:10:05

---
title: Updating my Portfolio Website
published: true
description: A few resources I used to update my portfolio!
tags: career, beginners, resources
---

As I have been in the middle of my job hunt for the elusive first software engineer role I have been soliciting feedback from friends and mentors on my projects, resume and portfolio. With the gathered input on [my portfolio site](https://kcarrel.github.io/) I set aside some time to refactor my portfolio website from this:
![Screenshot of first attempt at portfolio website](https://thepracticaldev.s3.amazonaws.com/i/t46pktjyfwco304hd7sd.png)

to this:
![Screenshot of updated portfolio website](https://thepracticaldev.s3.amazonaws.com/i/az4ch4z0478rdmri6ju1.png)
This blog post will be going over the main problems identified with my original website and the resources I used to update it.

# Problem 1: Color scheme
The original color story I had utilized originally didn't provide enough contrast to be visually pleasing or in the case that a user was visually impaired it could prove more challenging to read. Utilizing the below resources I landed on a color scheme that I loved and accomplished the contrast I was looking for!

Resources used:
- [Adobe Color Picker](https://color.adobe.com/explore/?filter=most-popular&time=month)
- [VisBug: Visualize the changes in the browser before changing them in your code!](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en)

# Problem 2: Original background image 
The original image that I used for my landing page is from the wonderful open source illustration site [UnDrawn](https://undraw.co/illustrations). While I love UnDrawn's illustration it didn't fit what I envisioned for providing contrast to highlight the various links I wanted displayed. Thus I looked around for a vector image that suited the color scheme I was looking for and was eye-catching. 

Resources used:
- [Vecteezy](https://www.vecteezy.com/)
- [17 Free Vector Image Sites](https://www.justinmind.com/blog/17-places-to-get-free-vector-images-for-your-designs/)

# Problem 3: Portfolio, About Me and Resume hidden in menu
In my first iteration of my portfolio I only had links to these pages living in my hamburger menu rather than making it simple for the user by providing those links on the homepage. 

# Next update: Accessibility score 
This first refactor left me with a portfolio site that had around 87% total compliance rating for accessibility standards and definite room for improvement. Using the below resources I got scores and suggestions for ways to improve the accessibility of my website that I am working through now. You may be asking - What is accessibility and why is it important? In that case I suggest you check out this [friendly introduction](https://dev.to/maxwell_dev/the-web-accessibility-introduction-i-wish-i-had-4ope).

Resources being used:
- [Check your website's accessibility](https://webaccessibility.com)
- [W3: Make the Web Accessible](https://www.w3.org/WAI/)

I hope this is helpful for anyone looking to update their portfolio website!