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.
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.
backups/contains mostly sql exports, or fragments of data, that I used while working on the project
code/is a git repository with project codebase
docs and resources/includes designs, wireframes, static assets, text copy, or emails communication with clients. Everything I used to build the project, or that served as materials for improvements and fixes
screenshots/provides a peak into the project look and feel. In most cases, this also documents extend of the work, and in some cases, evolution of the project
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:
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//'
find . -type f -print0returns all the files within current directory and its directories, and prints it out.
print0flag is useful for proper filename termination (by 0x0 character), that is than leveraged by
xargs. This should prevent any issues with special characters in the file names.
xargs -0 stat --format="%y %n"runs
statcommand on each of the arguments (file names) passed in, and for
stat, I want to know time of last modification
head -1sorts all the stat information in reverse order (9..0) and by numeric sort - each item starts with last modification date/time, and only then it is followed by name
cut -f1,2,4 -d" "removes fields I don't care about from each row, using space as a delimiter
sed 's/\.000000000//'removes time precision that I don't need
Because I had the backups from different computers and environments, it was not rare that I had duplicate backups, named in different ways:
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.
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.
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.
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: