My New Portfolio

Imgur

Today, let's talk about how I built a portfolio for myself.

Background of myself

I am a front-end web developer and I spend most of my time on Polymer, Progressive Web Apps, and Firebase. Those are the latest technologies by Google.

Back in 2014, the first time I built my own website (portfolio), I knew this is the best place for me to experiment those latest, awesome, cool web technologies.

I have rebuilt my portfolio a couple time, some using Bootstrap, some are Progressive Web Apps, some built with Polymer. Those are awesome, it looks beautiful and I really like it. This is what it looked like:

Imgur Imgur Imgur Imgur

Preparation

Let's go back to 2003, the time where all the websites are small, fast (except the slow Internet connection) and it doesn't rely on JavaScript most of the time.

So I set a few goals for my new website:

  • Lightning Fast
  • Super Small
  • Don't use Javascript if possible
  • Responsive
  • Try to use (at least one) Google Technologies if possible

Coding Time

So I created a blank HTML file, that's all. Then I started to write the content without CSS.

Imgur

After few minutes, this is what I got. The website is lightning fast, super small, no Javascript but it's ugly as hell. Ok, right now what I need is CSS. So I started to style my website. 10 minutes later, I got this:
Imgur

Better, This is something I want. The website is lightning fast, super small, beautiful, responsive, no Javascript.
Meme

Emoji and how to improve it

But I want more. I want a better-looking website. So I decided to add some icons or graphics to my website. Then I got an idea: EMOJI! and this is the result:
Imgur

So I added 6 (separate) images to my website. But always remember: #perfmatters, so I need to reduce the amount of requests for my website (eh, if you're using HTTP/2, it's not necessary actually). Solution? CSS Image Sprites.

CSS Image Sprites: An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

Ok. Got it. I combined all the emojis into one single file. And this is the current status of my website at the time:

  • Fast (Loading time: <800ms)
  • Small (around 20KB)
  • 3 Requests
  • Responsive
  • Clean and Simple
  • Emoji !!!

Firebase and Server-Side Rendering

Right now the content of the site is all hardcoded, means it's not so convenient for me to update the content. So what should I do? How about Firebase?

Firebase is awesome, but there is a small problem, I don't want use Javascript. So how? The answer: server-side rendering.

Server-side rendering is the best method for me since it won't make the website bigger and slower.

So the server will fetch the content from Firebase and everything will happen on the server. By the way, I am using Google App Engine (Python) for this.

To update the content of the site, what I need to do is go to the Firebase Console. From the console, I can update the content directly.

Imgur

Conclusion

Imgur Imgur

Now, my website is done. It's fast (less than 900ms on Regular 3G), small (30.7KB), responsive, beautiful, and it's using Google Technologies: Google Cloud Platform and Firebase.

Link to my portfolio: limhenry.xyz

Note: Anyway, you definitely should read this: Best motherfucking website and I'm a fucking webmaster.