Creating My Developer Portfolio in 2019 — (source code included)
By: Aaron Mcguire
Tags: JavaScript, CSS, Lottie, Animation And Design, Interaction Design

Front page of my new portfolio.

The past year has been a wild ride. I got engaged, had all of my possessions stolen, moved to Los Angeles, and tried a million and 10 things to solve the digestive issues I’d been suffering from (shout-out to UCLA for the amazing help they’ve given me!).

I also tried a lot of new things professionally. I helped create a successful Kick-Starter campaign, which I helped shoot, edit and produce, along creating the supporting campaign assets. I also worked on Jameson Whiskey’s social account, making a bunch of crazy videos and supporting props.

Flash-forward to my new life in LA. It was time to rebuild my broke-ass portfolio and start getting work in Los Angeles. I really wanted to communicate that I can do a lot more than “just code.” I love all aspects of a creative challenge, and to do just one portion of it, isn’t using my skills in a resourceful manner. I also wasn’t interested in making a “grid of thumbnails” website. If you want that, just head over to Squarespace. Ultimately, I wanted to show that I have really diverse, useful talents. Not only that, but I can create a cool conceptual wrapper for them and tie it together with design. If you like that, hire me :)

I also wanted to HAVE FUN while making this portfolio site. I wanted to try things I haven’t done before and learn something new. In the rest of this post, I’ll go through my process and share the tools/resources that I used, along with going into some of the pitfalls of just how difficult it can be to make something good. I often want to be “good” at something right away. The “right away” is the problem, because it just takes time. I think we want it right away for the wrong reasons. For acceptance, fame, or just to be noticed. We often inadvertently miss opportunities to truly dig into the experience of making. I’m writing this as a reminder to myself, and for anyone else who feels life’s challenges in the creative process.

Design

I first started in my note book and outlined what I wanted to feature.

Outline of site

I kept trying to figure out what I wanted to feature, but was trying to do it all in my head, instead of breaking it down in a note pad. What I had spent ‘spinning my wheels’ on in my head, took an hour on paper and after, I was clear on what needed to be done. Just a good reminder for us to pick up the pen and translate the mush in our brains and crystallize it on paper.

As I came up with the concept, I realized I wanted to make sections that were “archetypal” parts of me. First I would Illustrate them and then I would animate them. I liked this direction and it allowed me to feel good enough about breaking the standard “grid of thumbnails” I mentioned earlier.

Onward —

While having design experience, I hadn’t exercised that muscle in a bit and wanted of course to make something that I was happy with but also in-line with the reality of my current design capacity. For that reason, I went for isometric projection because I knew could be successful at it if I worked at it, and I could use that talent in helping draw plans for building things in real 3D life. I found this skillshare tut that helped me out immensely. I took these virgin skills and sketched out my ideas in my notepad.

Rough sketch for the Animation, Exploring and Tinkering section.

Rough sketch for the developer section featuring the holographic web-page.

I used an isometric grid that was provided by the skillshare tutorial to re-do my sketch a few times. Working on these illustrations, I wanted to make them “perfect” the first time. I would finish and want it to be perfect! So much so that I’d almost talk myself into it, until I’d be honest with myself and say: “We’re new at this, we need to do a few more times before it’s going to look right.” You can see the evolution below.

Each step was such a huge improvement. On the 2nd, it took me so long that I remember doing all sorts of squinting and rocking my head side to side in-order to trick myself into seeing the proportions as correct. I didn’t want to go through with having to redo it, but as you can see, the difference is clear.

Once I had all my illustrations in place I figured out my color pallet with the help of Adobe Color (previously Kuler).

Example of all sections and picking the color pallets.

I usually design in Sketch, Figma or Photoshop but I needed the tools in Adobe Illustrator so often that I skipped transferring my vector files back forth. I have included the .AI files for you to poke around.

Animation

Next was to start “prototyping” the animations. I’ve used Lottie in a few projects all ready but there where some things I really wasn’t sure if Lottie could pull off. For example, my “Tinkering” section I wanted to have a motherboard ribbon cable flapping in the wind. I knew from previous attempts that things like zig-zag and wiggle paths (AE ‘effects) don’t work, also most layer effects will not work. I ended up for the ribbon and other ‘squggles’ I used pre-zig-zagged paths in illustrator. That I would loop the movement and use a mask to give the appearance that it was continuously looping. You can see the finished product here:

Example Lottie animation

A couple tools that I discovered that made working with Lottie a lot and I mean A LOT easier were these plugins. First Overlord, it allows you to move vector files from Illustrator to After Effects with ease (This should just be built in imop). Check it out:

Another plugin I used by Battle Axe is Rubber Hose. This plugin is incredible. It makes animating arms and legs a breeze and it works with Lottie out of the box (you’ll need to turn a couple settings in the export menu in bodymovin). I used it on the “Developer” section as the hand typing one key at a time and the robot arm in “Animation” section. Check it out!