After nearly a year, I’ve launched my personal freelance portfolio here at hellogeri.com. Of course, I never meant for it to take a whole year. I’m sure many of you will agree that personal work often tends to take a backseat to other more important projects with immediate benefits (like getting a paycheque!). But, between balancing a day job at an advertising agency with evening freelance work, exercise, and personal time, it’s been at times challenging.
On top of that, the whole process of building this site has been a huge learning experience. Although I began to teach myself web design nearly twelve years ago as a hobby, I never really understood the concept of web standards until last year, when on my birthday, I bought a copy of Jeffrey Zeldman’s Designing With Web Standards before I took a trip to attend An Event Apart Boston. Needless to say, beyond being the best birthday present to myself ever, it really opened my eyes and made me realize how much I had to learn.
Energized and inspired from the conference, I returned home and settled in for the journey…
The design for my website is based around the design of my business card. Although it’s hard to tell from the photograph, the card is printed in a simple solid brown and teal except for an illustration printed as a spot UV overlay. Many people ask what the stuff in the illustration means — it’s simply a bunch of my favourite things.
I was tired of seeing lightbox-style gallery scripts and wanted to try something simpler, with more space to write about each project.
I went through a few rough Photoshop mockups before settling on the current design. Here’s a few that didn’t make the cut.
Behind the Scenes
I coded my site in lean, semantic HTML5 markup, with plenty of CSS3. It was definitely a real learning experience and I had a lot of fun figuring out ways to implement different CSS3 properties and how to take care of fallbacks through Modernizr. Below is an example of my implementation of the multiple background image, transform, transition, and text-shadow properties and how they differ between Safari 5 and Internet Explorer 8.
Not as nice in IE8, but will they know what they’re missing? Not likely.
And yes — viewing this site in Internet Explorer 6 will give you stripped down, content-only pages thanks to the IE6 Universal Stylesheet.
The majority of websites I’ve designed in the past have been handed off to a developer for coding and CMS implementation, so this was my first time giving it a try. My site is built on ExpressionEngine, and while the concept is a little confusing at first, it didn’t take long for me to get the hang of it after a crash course from Andy Clarke. I’m sold — I’ll definitely be using it on my next project.
Things I’d Do Differently
I have some media queries written for this site which haven’t been completely sorted out yet, so I decided to launch as fixed-width just for now. While they weren’t a total afterthought in my site design, next time I will be sure to give small screen implementations more consideration right from the start when I’m still sketching on paper. As I learned, adding them afterward can be complicated and I felt like I was trying to fit content into a small space for the sake of improving legibility, but it might not have been the most appropriate design decision.
While I’ve got many people to thank in the inspiration department, extra special thanks go out to: Andy Clarke for helping with some CSS issues and giving me a crash course in ExpressionEngine; along with Graham Smith, Petra Gregorova, Candi Ligutan and Anthony Calzadilla for lending me their eyes when mine weren’t working with code anymore.
Don’t forget to say hello on Twitter!