The story behind the new look.

I launched my first portfolio site last August with the intention of getting a dev job ASAP. At the time, I was focusing more on code than design — so the site was designed completely in the browser and creative decisions were made during the build process. Naturally, as soon as it was launched I immediately wanted to redesign it — but it wasn’t until recently (over a year later) that I landed on a design I was proud of.


I’ve learned that when it comes to personal branding and selling yourself, it helps if you have a unique feature that makes you memorable. Whether it’s an iconic moustache, or a catchy name — you should use it to your advantage. For me — I chose my curly hair. There must be a way to emphasize “curly-ness” in my overall brand, I thought.

It was decided — I would create a digital portrait of myself. I wasn’t sure what style it would be in yet, but I knew I wanted to digitalize my face in a creative way. So, I did what any reasonable person would do — I took a selfie.


I realize I look super bored in this picture.

After importing my selfie into Adobe Illustrator, I used the pen tool to trace over my face. Eventually, I had a simple outline of my face and hair, and it looked… okay. I sat and stared at this version of my portrait for days, trying to figure out whether or not I actually liked it. I tried incorporating it into desktop layouts for my site — but couldn’t settle on a good one. On one hand, the illustration was simple and looked like me, but I couldn’t help but feel like it just wasn’t polished enough.

First version of digital self-portrait / sketch. Meh.


I decided to go back to gather more research and started putting together a “mood board” to brainstorm ideas. I began to think about themes that reflected who I am as a person, and settled on a few key concepts.

  • Pure geometry
    The problem I had with my current sketch is that it was too “organic”. It looked unpolished and unrefined, the lines without a sense of real purpose or direction. Perhaps if I used pure geometric shapes (circles), it would add that feeling of structure that was lacking.
  • Stained glass & architectural drawings
    My parents are artists: I grew up with an architect as a father and my mother is a stained glass artist. Because of this, I’m naturally drawn to designs that echo the same qualities that can be found in stained glass and structural drawings.
  • Stars and Constellations
    I love science fiction, and thinking about space exploration, science and our place in the universe has become an interest of mine recently.

Now that I had some direction, I was ready to make my sketch more geometric. I began by using the ellipse tool to create different sized circles, and placed them over my hair. Big circles for the major “bumps” in my hair, small circles to fill in the gaps.


I started to really like the way my bubbly hair was turning out — so from that point forward I used pure circles for every curve in the design (including the lines for the nose and mouth). I carefully cut each circle using the scissors tool and joined paths together to make more elaborate curls and swirls. This took a bit of time, but I also made sure not to give in to lazyness — I didn’t copy and paste once during the entire process. I wanted every curl to be unique, and it was very important to me that the final design not be symmetrical. I then added in the vertical lines to break up the “flowy” nature of the design, add more structure, and draw the eye.

I was happy with the result so far and knew I wanted to use it in my site layout. The obvious choice was to feature the illustration front and centre — it was detailed enough to hold it’s own. That’s when I decided to incorporate some content into the illustration — it was the perfect spot for an “about me” blurb, and perhaps I could also incorporate my headshot in there somehow.

After that, the design of the rest of the site fell into place — it made sense to include my portfolio pieces as similar, circular objects — and to continue using elegant line work and clean typography throughout. The two “OO”s in my last name made it easy to incorporate the curls and swirls into my logo — which uses one of my favourite fonts, Josefin Sans.

But now that the design was complete — how would I make it truly memorable?


I love working with animations, and this design was begging to be animated. I did some research into SVG line animations using stroke-dasharray (thanks CSS Tricks), and then began “chunking out” parts of the illustration that I wanted to animate in at different times.

In illustrator, I isolated “chunks” into layers and gave those layers a name. The name of the layers output as an id attribute on a <g> element in the SVG:

Because there were so many path objects to animate, I spent some time planning out what paths would animate at the same time and grouped them accordingly. Each <g> had around 6–12 different paths to animate. I also made sure not to animate every single path — both because that would take a tremendous amount of time and also I think it would be visually overwhelming. Therefore, most of the lines simply fade in slowly.

To make it easier on myself, I used the id’s to target the paths with CSS and changed the stroke colour when I worked on them. I would then isolate each path individually and adjust the animation-delay, stroke-dasharray and stroke-offset values based on line length. I found that the Firefox inspector was super handy for determining the perfect delay values for each line.

Yes, I manually adjusted the animation of each path. It was a labour of love.

/* CSS */
every animated path started with {
animation: draw 4s 1;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation-fill-mode: forwards;
stroke: rgba(224,224,224,0.8);
stroke-width: 1.5px;
fill: none;
stroke-linecap: round;
with the following basic keyframes:
@keyframes draw {
100% {
stroke-dashoffset: 0;
@keyframes fadeIn {
0% {
opacity: 0;
 100% {
opacity: 1;

Finally, all my “chunks” had been animated with CSS — the last step was to trigger the animations once the user scrolled, otherwise they could fire too early and the user would miss them entirely. Enter: jQuery!

With some basic scroll functions and a variable that calculates 50% of the user’s viewport height, I was able to simply display:block the various chunks of the SVG once they were triggered.

I also wrote a function that binds the mouse wheel to the vertical lines in my design by adjusting their y1 and y2 values. That way they will draw/erase when the user scrolls up or down.

Eventually, it started to come together…

This was my first time illustrating and then animating something so big. I realize after the fact that perhaps there may have been a better way to build this — if you’re an SVG/web animation guru, I would love feedback on the design and code if you think I can improve.

Overall, I’m feeling proud and excited that it’s finally launched — check it out if you haven’t already. I’m also on the hunt for my next full-time design job! If you’re looking for (or know someone who is looking for) a bright-eyed designer with coding experience, then let’s work together!