Building a “SMART” Online Portfolio in 6 steps.

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
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)

--

--

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.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tomasz Mieczkowski

Tomasz Mieczkowski

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.