Building a “SMART” Online Portfolio in 6 steps.

I’m a front-end developer, but it’s been a long while since someone asked me for a portfolio. For the past 16 years I’ve had employment opportunities line up (somewhat) back-to-back and now that I’m once again “on the market”, the obvious things like “a collection of your previous work” caught me off guard. Not to worry, I had it somewhere here… (oops)… no, that can’t be. All it is are bunch of logos linked to websites that may or may not be loading.

How my portfolio looked like in 2015 through 2020.

Step 1. Prepare database table

First things first, I looked over the current database table and it’s not the greatest. So I will go ahead and create a new one:

I think that should do it. (portfolio_projects)

Step 2. Populate the contents

For starters I can fill in “url” and “title”, which are obvious, and while I’m at it, add an “alt” so that images don’t have to re-use “title” as an alt tag. At a later point I can add a drag-and-drop functionality for these projects so that I can sort them easily, but I already sent a link to my portfolio to two different companies, so for time being, I will hand pick some of my more important projects and mark the “sort” value as 1 through 9.

Step 3. Get a nice screenshot

Here’s where “smart” part of the title kicks in. I don’t want just a boring old screenshot so I will implement a functionality that:

  • takes a screenshot of the website using screenshot layer API
  • embeds it into a nice browser-looking window on a new page
  • takes a screenshot of that embedded screenshot

Wait, did I lose you? Yes, if I want a nice design I could do it in Photoshop, but let’s say I want to modify this design tomorrow, that means taking a new screenshot, finding the design, going back to Photoshop, exporting the image and uploading it. Maybe the first few times it might be easy, but you know it all well that at some point you won’t remember to do it and the page will become outdated, right?

So this is how I approached it. A simple daily cron job takes a new screenshot of the website. If I make an update to the site, my portfolio will auto-update, and if it happens to be an older client of mine and they decide to shut down their website for any reason, I can also update “is_active = 0” so that I don’t actually send anyone to that link, but people can still see how the website used to look like. Two birds… one stone!

Here is a result of that “nested screenshot” :)

Step 4. Think of the user.

Now, the only thing that’s missing is some UX functionality. I don’t want to drop these people into my portfolio page and expect them to understand exactly what they are looking at, so let’s add some tagging and implement MixItUp. So first, obviously, two more tables:

Two new tables for tagging. (portfolio_tags AND portfolio_projects_portfolio_tags)

And that does it. Hopefully this might come in handy to some of you who find themselves in a need of a fresh looking front-end portfolio. And for the reveal, here’s the link to mine:

Thanks for reading!

I ■ PIXELS I just want to see how long this text could be. Is it 140 characters as the rest? If so, I could probably use this to put some useful information.

I ■ PIXELS I just want to see how long this text could be. Is it 140 characters as the rest? If so, I could probably use this to put some useful information.