The idea came along when Brijan wanted to take a break from client work to do something fun and collaborative with a few developers. So I threw my name in the hat and was one of the lucky three chosen.
At the time I had already been working on a design for my portfolio site. I thought it was looking okay, but up until that point every website that I had made for myself was a quick over-the-weekend site I threw together for job interviews.
I was thrilled at the opportunity to work with Brijan on a website that we both hoped would gain us recognition in the web community.
About a month later, on a whim, I decided to quit my job to start my own company doing freelance web development. You can read more about that experience in my journal The One Year Plan. So what was to be my personal portfolio site would now become my company website — lucky!
When Brijan sent over the initial concept I felt inspired. The design had bold colors and type with a simplistic 3d layout. My company name was also shown which made everything feel very real. My first reaction was — am I really cool enough for this to be my website?
Next he showed me the about overlay and journal listing page. Typography is a pillar of design that can often times be an afterthought. I could tell that in these designs type was brought to the forefront. We felt that the bold design choices would set it apart from other websites.
Brijan is a legend in the design world with many years of experience to back up his opinionated stance on design. He’s one of the best designers around, and I knew he’d be expecting the same level of quality from me.
While working with Brijan I found him to be nice, respectful, and encouraging. Any feedback he gave was constructive and I could tell he wants whatever he works on to be great. You’ll never get anywhere if you don’t push yourself.
“ Animated typography is the anchor of the design and shows off the work Eric has done and is capable of doing.— Brijan Powell
We conceptualized the intro of the website starting with the project names entering like a spiral staircase. Each project name rotating independently from one another. The text angled away providing a sense of depth. Hovering over the names would outline the type as it rotates forward. When selected it would rotate until parallel with the screen, and everything would transition out to the case study page.
A smooth scrolling technique mixed with custom eased animations makes the site feel smooth, refined, and natural. Hovering over the links and scrolling at the same time can create a wave like effect. One of the most challenging parts of development was anchoring the perspective of the text to the edge of the screen independent from scrolling.
There are many animated nuances throughout the site and in UI interactions. I wanted the website to feel more like an app, where hovers and transitions between content felt fast and fluid. It's easy to go overboard with animation – I prefer to take a more meaningful approach.
In the original design you might have noticed the blur on the text. I believe the only way to create that effect is with WebGL, and my knowledge of that is limited. If any developers reading this have any suggestions, or want to attempt something similar I’d love to hear about it.
I also explored the idea of making the site have color schemes that could change the look of the website’s background, text and UI colors on the fly. Like what happens on this page and the case study for The Brigade. We came up with an Easter egg to do this for the entire website — can you find it?
Brijan and I worked together to make a website that we can both be proud of, but most importantly had fun making. This is the most proud I've been of a website I made for myself. Huge thanks to Brijan for making it possible.
If you're a hard working developer and want Brijan to design your next portfolio then give him a shout. He’s also always looking for great client projects to work on too. Hopefully we’ll get to collaborate on more projects in the future!