Building a Personal Coding Portfolio Website
By: Alec Chen
Tags: Software Engineering, Programming, Tech, Web Development, Web Design

Why do I even need a site for my projects?

You don’t really need a personal site for your projects. You also don’t really need to make your resume look nice, or fill out your LinkedIn profile, but you do those things don’t you?

It’s common for employers to barely glance at a resume, and no way are they going to download your code from Github and run it. If they only spend on average less than 10 seconds on your actual resume, do you think they’re going to click through all your repositories to see your readme’s? Now if you had, say, a page with images or gifs showing off your projects’ functionality, a recruiter could glance at it in the milliseconds that they were going to give it anyway, but this time they’ll be able to see the results of your hard work, and the types of projects you like to work on.

Nowadays a lot of applications have an option for personal websites and other media links because these things help get a better sense of who an applicant is. Having a personal portfolio website is a great opportunity to bring life to the work you’ve done.

Where do I start?

So before you actually start making it, you need to know what you want it to look like. The average programmer doesn’t just have amazing design ideas to just throw around, so if you’re anything like me, you may need some inspiration. For this, you can go to places like behance, dribble, or really anywhere. I mostly took inspiration from a few websites I’d seen before.

I didn’t have a very detailed idea, but I knew I wanted to be somewhere in between the simplicity of riggraz.dev and the elegance of brittanychiang.com.

After that, I tried to draw it out on a piece of paper. Something like Figma is arguably better, but my site was going to be very simple, so pen and paper was convenient and good enough. Some people can manage it all in their mind, but I like to have at least a simple outline that I can reference along the way.

My general approach to the design

Personally, I just wanted a site that showed my work, with little to nothing else.

People like to have very fancy pages that look really cool, but I focused more on just making something that was concise, robust, and easy on the eyes.

Maybe my design itself won’t impress anybody, but the main focus is my work, and I think my design reflects that.

My first attempt at making it was actually kind of the opposite. Although I wanted to make the aesthetic of the design simple, I was going for a more fancy layout. After an hour or two of implementing that, I got sick of it and threw something together that was just meant to showcase my projects. I ended up liking it a lot better, and that’s the one I’ve stuck with.

Actual design advice

For the design, the more complex and fancy you want your site to be, the more difficult it will be to implement it. Animations aren’t too complex with just raw HTML/CSS, but I personally chose to just have everything be static.

For the actual aesthetics, I think getting just two things right can go a long way:

A nice font, or pair of fonts A simple color palette

If you have these things, I think the layout of your site can be mediocre and still look pretty good. I personally don’t think the layout of my website is anything special, but I think it looks clean because the fonts and colors go well together.

I kept it as basic as I could, so I went with Roboto as my primary font, and I chose Roboto Mono as a secondary font to give a bit of a typewriter-esque coder feel.

I think a good pair of two different font types (https://www.figma.com/font-types/) can go a long way in making something look good.

To get free fonts, and even find font pairings, it’s all on https://fonts.google.com/, and they have options for you to just import it directly into CSS, which is what I used.

For my colors, you can never go wrong with white, black, and gray. If you really want to have color, I would recommend choosing a single accent color and sticking to neutrals when in doubt.

For these visual aspects, experimenting, inspiration, and copying will be your best friends.