Portfolio projects maintenance

published 22.5.2020

freelancelog
terminal

In early 2020, I revamped my website and decided to improve my portfolio presentation.

As part of that effort, I also wanted to provide better screenshots and more insights into scope of the work on individual projects and client work that I did. With over 80 projects to go through, this was and still is a pretty long term goal.

I dug through emails archives, my backup drives, and all my repositories, and decided to organize everything into a common structure.

Project folder structure

For each project, I use following folders:

project/
  backups/  
  code/
  docs and resources/
  screenshots/

Whenever possible, I use date stamps, so that I know what timeframe to align the project to. Each project also has a date in its folder name.

Code folder preparation

Most of my freelancing and contracting work happened during my studies, before I started working fulltime. At those days, I didn't worry about source control that much. And if I did, it was SVN, the most popular one in those days (I'm talking 2003 - 2011). Also, it was always just me working on code, so no sharing was required.

My backups from those times looked similar to this:

01 backup/
02 backup/
03 backup-live/
04 backup/
...

Yup, very basic. I wanted to move this into git repository, while keeping the dates relevant. I set up a plan consiting of following steps:

Find latest change date in the backup folder

First, I removed all meta files I was not interested in. */

// rm -r **/.DS_Store

/* Then, I prepared latest.sh script, to scan current directory and echo a file with the latest modified date and time. This took me some time to search and modify a script based on Emerson Farrugia's answer on SO.

#!/bin/bash

find . -type f -print0 |
  xargs -0 stat --format="%y %n" |
  sort -rn | head -1 | 
  cut -f1,2,4 -d" " |
  sed 's/.000000000//'

Some details:

Checking for duplicate backups

Because I had the backups from different computers and environments, it was not rare that I had duplicate backups, named in different ways:

24-backup/
20071021-backup-desktop/

Once I knew the latest modifications dates, I could easily compare directories that looked suspicious. I didn't automate this, as I thought it's not worth it. Also, some of the duplication could be caught by git itself, when I would prepare commits later.

To get a basic comparison of two folders, I used following command:

diff -qr dir_1 dir_2

Which provided differences in both structure and contents. This was good enough to serve the purpose.

Commit backups

Once I had project's history organized by date, I used vim to quickly create a script for easier git commits. In couple of projects, I had different subprojects over the time, and I decided to put everything together. Eg. for Czechwealth, I created system for automated sending of training materials in 2005, as well as improved their main site to include this system information:

git commit --date="2005-01-17 10:00:00" -m "main site"
git commit --date="2005-01-31 10:00:00" -m "clients section"
git commit --date="2005-02-01 10:00:00" -m "clients section"
git commit --date="2005-02-02 10:00:00" -m "main site"
git commit --date="2005-02-02 10:05:00" -m "main site"

Notice that I didn't care about time that much, and I only used it for situations when I had two backups from the same day.

Now, I just copied each folder into new git repo, added and committed the files using one of the lines from the prepared script. I didn't go over board with automation, as I still wanted to have some control over what gets committed. During this phase, it was nice to see if a commit is worth it, so I ended up discarding some of the older folder backups.

Screenshots

Gathering the screenshots was not that difficult. I already had several versions of my portfolio website, each showing some of the UIs.

What I didn't have were screenshots of CMS and administration interfaces, that I've been creating from scratch since my first project. For those, I had to get the old project up and running, and make screenshots manually. This was challenging mostly due to the age of some of those projects tech stack. I installed Xubuntu in my VirtualBox and spin up good old Apache with whatever stack I needed. Thanks to backups, I've been able to get up almost all projects up and running.

Once I had all the screenshots I wanted, I had to do some adjustments. The most common one was removing of white spaces. I used ImageMagick's mogrify tool for this:

# start at 0,98 and cut 1280x900 rectangle
mogrify -crop 1280x900+0+98 -path dest *.png

# remove 200 pixels from left and right side
mogrify -shave 200x0 -path dest *.png

Both are batch commands, working on each png file in current directory, and saving the results into dest/ directory under the original filename.

Conclusion

It is a nice practice in shell scripting, vim macros, batch processing and in making tech stacks from 2005 to work in current environments. There's been challenges with PHP versions, SQL imports, system libraries, etc.

Some of the practical benefits:

As a sample of reduced size:

Project 1

Project 2