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.

Original PNG build with Illustrator & Photoshop

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.

JSX & CSS version.

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.

Code for Branding and Title.

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.

Gif of Navigation & animation.

Not super exciting, but pretty clean overall.

This is how I start my second session on my portfolio. Stay tuned for more!




Full Stack JavaScript Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Loop Through a List of Strings in VBA

#17. KISS — Keep it simple, silly!

Build a Portfolio Website in a Flash

River landscape in fall

How To Get Scandium Rates Using An API

How To Extract Brand Imagery From A URL For Free?

Python Functions…

How much does it cost to develop an app like Paytm

19 characteristics that make agile radically different to what’s gone before

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kyle Willard

Kyle Willard

Full Stack JavaScript Engineer

More from Medium

Controlled and Uncontrolled Components

Creating Light/Dark mode on a React App with Context

PJ’s Pooch Attires — An app built with React

PJ’s Pooch Attires Homepage with sliders that showcase store ‘all time favorite products” for customers to enjoy.

Here the things that I loved with Styled Components