Building My Portfolio — Part One
As most software engineers know breaking into the industry, and finding work is rough. What most hiring managers are going to look at are our portfolios. The HR type folks are going to look to see if your skills reflect the needs of the company, the engineers that view it want to see your projects, and code.
With that said it has to be a happy balance to ensure that you are meeting a balance between clean solid code, and ensuring that you are hitting all the aesthetics to entice the no programmers into feeling comfortable.
I am very much not a UI/UX person. I have hints of what looks good, and I have done a lot of research to try and maximize the potential of my portfolio. So as I built out the newest version of my portfolio I wanted to make sure it was clean, and functional, both in code, and in looks. Ease of access to my social links, ease of access to the projects, and a crisp clean way to get in contact with me.
Please note that this article will be being written through the build process so will include images, and gifs that show aspects of my portfolio while explaining the why, and how.
First the Branding:
I have been using and playing with Photoshop and Illustrator for a number of years, and while I am not an expert I am fairly decent at creating things in both programs for websites. That was my initial approach to this site.
I liked this image, and it is still solid in my mind (minus the slightly jacked spacing). However, when I started thinking harder about my site, and how I wanted to build it out, I wanted to keep it stupid simple. So instead of using this PNG or the SVG I chose instead to use JSX and CSS to create the same basic design. Below is the result, with some additional modification on the color choices.
I chose to really soften the colors, and get rid of the red, which felt a bit much as I continued to stare at it.
Here is what this code looked like to get this accomplished. And it was a bit excessive, but overall it worked out.
I used display flex on the H1 and the H2 to ensure that we kept in line with the only use 1 H1 rule. It turned out solid.
The next thought was to build out a solid navigation to work things out. I knew that I wanted to make it fairly simple, but I also wanted to ensure that it was at the very least mildly flashy. To that end I built out my routing. I styled my React-Router NavLink with Styled-Components and then grabbed Framer-Motion to add in a simplistic defusing animation on hover on the links. I also used the NavLink activeStatus to ensure that the active link had a border top and bottom to make it extremely noticeable what link was currently active.
Not super exciting, but pretty clean overall.
This is how I start my second session on my portfolio. Stay tuned for more!
