My New Portfolio
Originally posted on blog.limhenry.xyz
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:
So I set a few goals for my new website:
- Lightning Fast
- Super Small
- Try to use (at least one) Google Technologies if possible
So I created a blank HTML file, that’s all. Then I started to write the content without CSS.
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:
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:
- Fast (Loading time: <800ms)
- Small (around 20KB)
- 3 Requests
- 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?
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.
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