The Making of a Portfolio

Welcome to my blog! So in case you didn't notice I redesigned my portfolio, and even added this awesome blog to document my thoughts, case studies and projects. So before I get into the juiciness of Sass, Sketch and the like, let me tell you a bit about myself.

So I'm Marc. I really like product design and web development. My story starts with my dad, who introduced me to programming. One Christmas he got me this book, a book on how to build your own video game from scratch. I was so excited, having grown up with the likes of DOOM, Chrono Trigger and Banjo Kazooie. I hated it. At that point, teenage me was convinced programming wasn't for me, but fortunately my dad didn't give up.

One day, I was sitting in front of the computer, and my dad had installed textmate unbeknownst to me. He sent me an intro to ruby book as well as the first edition of the Ruby Cookbook, and told me to give the first few chapters a shot. From there I feel in love with programming and the web, and went on to learn Rails and the rest is history.

Design

So fast forward a few years, some internships and jobs later, I finally decided I needed a portfolio. I jumped into Sketch to start brainstorming.
Original Mock

So this was my rudimentary idea. A nice full background illustration, with animated CSS3 clouds, and a footer with social media links. The next step in that iteration was going to add a "see my work" button, with a page designed like this:

Original work page

So I posted for feedback and got a really great comment:

Feedback

So I went back to the Sketch drawing board and reworked the entire mock, with the idea of a more flatter look and came up with a more cohesive one page design for my portfolio. I decided that a very horizontal look, with full sized horizontal hero sections was the kind of look I was going for.

Livefire Box

You can see the full mock I made over at my Behance.

Development

Next step was implementing it. I decided to go with just a standard Rails implementation, I highly contemplated a Rails backend with an Ember front end, but I didn't really need anything beyond standard Sass and JavaScript, so went with simpler rather than more complicated.

CSS wise, I decided to go with a framework I was recommended called Bulma (http://bulma.io/), which is a really light weight flex box framework built in Sass. Created easily centered, and responsive content sections.

The clouds were done with CSS3 transitions using a linear infinite animation. Here's one of the clouds with accompanying keyframes:

.clouds-one {
  background:url("Cloud1.png");
  position:absolute;
  left:0;
  top:0;
  height:240px;
  width:300%;
  -webkit-animation:cloud_one 60s linear infinite;
  -moz-animation:cloud_one 60s linear infinite;
  -o-animation:cloud_one 60s linear infinite;
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
  -o-transform:translate3d(0,0,0)
}

@-webkit-keyframes cloud_one {
  0% {
    left:0
  }

  100% {
    left:-200%
  }
}

The next step was adding background color animations to navigation elements. I based those animations and the button hang directly off of the Hover library (https://github.com/IanLunn/Hover/), a pretty nifty animation library for buttons using CSS3.

Next pieces were the line animations I did on nav elements including the footer. These were relatively simple, just using some psuedo selectors to create line transitions:

.build:before {

content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width 0s ease, background .5s ease;

}

.build:after {

content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: #FA4388;
transition: width .5s ease;

}

.build:hover:before {

width: 100%;
background: #FA4388;
transition: width .5s ease;

}


.build:hover:after {

width: 100%;
background: transparent;
transition: all 0s ease;

}

The only Javascript I ended up needing was for smooth scrolling. I applied a smooth scrolling class to the navigation elements that needed it, and it did a standard jQuery transition.

Finally, I set up a blog using Ghost. Ghost is a pretty awesome blogging system based off of Ember. Next steps for my portfolio are adding color transitions to the mountain illustration for a day/night looking cycle, customizing the Ghost theme and potentially some more animation goodness.

I hope you enjoyed this quick tour of how my portfolio was built!