De-Bloating My Developer Portfolio
Tags: webdev, frontend
Published: 2017-07-13 18:48:00

---
title: De-Bloating My Developer Portfolio
published: true
description: "How I made my personal site a lean clean machine"
tags: web dev, frontend
---
![old site scores](https://cdn-images-1.medium.com/max/800/1*svBAS17YuEvbagcvR-gGLg.png)

*This originally was published [on my Medium blog](https://medium.com/@chinjon/de-bloating-my-developer-portfolio-f79f6a4d537)*

The eyes are the window to your soul and your personal site is the porthole to your code. As someone who is looking for their first developer position, [my portfolio](http://jonathanch.in/) is always on my mind. Every day I find myself wondering “should I re-do this thing?”. My day is riddled with anxieties and caffeinated streaks, so it is a bit much that something so nominal is taking up part of my day. Until a few days ago, my personal site has gone through two overhauls. The debut iteration came about when I had reached the half-way point of **Rutger’s Coding Bootcamp**. At that point, I had just gotten comfortable with server-side technologies and I was pretty stoked that I had all the necessary ingredients for bootstrapping a website.

![version one](https://cdn-images-1.medium.com/max/800/1*qP5z5PfZYrjUQH-sCXIsIQ.png)

It wasn’t an ambitious undertaking, I planned to keep it minimal and simple. Running on Express.js and templating with **Express-Handlebars**, I kept it a single-page website with some typing animations (because I thought it was cool) and a list of projects I made thus far. It was bland, with monospace font and Twitter **Bootstrap (3)** serving as the skeleton. Despite the unimaginative design, it was super responsive and I spent a good two hours resizing my browser window watching the media queries work their magic.

![version two](https://cdn-images-1.medium.com/max/800/1*cRgtFJoGNvH0QhG3J6L00g.png)  

After two months I had gotten tired of the design, those media queries could only keep my interest so far. So for the next version, I wanted to re-build it from the ground up. I was curious about **Bootstrap 4**, mostly because it was in Alpha for 3 years. Besides the easter egg that rained emojis to the page, I wasn’t attached to **v2**.

![easter egg](https://cdn-images-1.medium.com/max/800/1*QUI0gsvA2PIfCRI1NVSqrg.png)

**Problems with v2:**
- it’s slow
- it’s a glob of cringe design
- it’s lame
- too Bootstrap-y

**Goals with v3:** 
- make it simple
- snappy
- minimal
- responsive
- more like me  


### Milligram is choice

![milligram](https://cdn-images-1.medium.com/max/800/1*BjPbCQz7SVRfzUuaLIwRFQ.png)

The main problem with the more well-known frameworks is the bloat. [Bulma](http://bulma.io/) is a nice alternative but there are some issues and it’s still not out of alpha. I was considering using the markdown-inspired framework [Hack CSS](http://hackcss.com/) by [Egoist](https://github.com/egoist), but after working with it, the style looked a bit janky, and this is coming from someone who LOVES writing in markdown. Enter [**Milligram**](http://milligram.io/). I used it once before, but the lack of styling hurt me since I wasn’t that comfortable making components in CSS.

It’s only ***2kb zipped*** and its purpose is to lay the groundwork for your site without any intrusive styles.  


### The Declutter

One of the main problems with v2 is that it’s too gaudy, but without the bling or sleek design. It feels knobby and ogre-ish, like a PT Cruiser. I was thinking about React but I felt that it was overkill for something that just needed to be simple. Templating has gotten much easier for me now compared to a few months ago, so I went with Handlebars again. I was looking at Pug (FKA Jade) but since I was knee deep in the job search, this had to be done now rather than later.

![version 2 work](https://cdn-images-1.medium.com/max/800/1*dVHLrUC12HWyQw4k-PS9dw.png)

I caught a [thread on the /r/web_design subreddit about “ridiculously simple portfolio sites”](https://www.reddit.com/r/web_design/comments/6glc6i/best_ridiculously_simple_portfolio_sites/) and it got me thinking that I didn’t really need to make something so elaborate. I just had to make something that reflected me and got the message across, or just showcase my work and contact information. I really enjoyed the simplicity of **v1**, with gray text and a white background. Simple and straight to the point.

### Fresh Faced

![v3 1](https://cdn-images-1.medium.com/max/800/1*zHagMDhedpiuPuz9pWzirw.png)  
![v3 2](https://cdn-images-1.medium.com/max/800/1*A0Vfl1bd20hd6LuAT93u5w.png)
![v3 3](https://cdn-images-1.medium.com/max/800/1*UFFldOVdICmDisiwlrmz4A.png)

The result is just a three paged site with very little components, and it took me about three days. I decided against the single-page layout to keep everything cleaner and organized. The problem I had with the single-page layout is that you had to prioritize information and maybe the scrolling thing took too much work. But then, on the other hand, the three-page layout could also be a bust, as the visitor would have to click to fish for info. They both have trade-offs but they’re subjective. To make it a bit easier, I kept a persistent navigation bar with icons linking to my various online entities. I used **Font Awesome** since their overall style paired well with the font I decided on, **Ubuntu Mono**, and they had icons for everything. Benchmarked with **Google’s Page Speed Too**l, **v3**’s performance crushed the sluggish marks of **v2** so that’s a plus too, I guess. It’s also mobile friendly, thanks to **Milligram**’s use of flexbox.

![new speed test](https://cdn-images-1.medium.com/max/800/1*3YHOLu9TRDCvKaK2oEQQFw.png)

Is this a keeper? Probably not. Like with the previous overhauls, a developer’s personal site is like an artist statement, it reflects where you are in life and your frame of thought. Hopefully, for v4 I’ll brush up on my very bad design skills. But in the meantime, [take a gander](http://jonathanch.in/).