Personal Website
Good is the enemy of great. And there’s no place where that principle resonates more than with designer portfolios. There’s a long trope within the creative community that building your own website, blog or portfolio is a sisyphean task. It brings little joy, and will never be finished.
What I made
I’m happy to announce that I actually did something. joshclement.com. It answers the brief, and hopefully communicates to readers who I am. The code is on GitHub. I can edit and push directly to my repo and see the changed in a few minutes.
Pre-History
Backing up a bit. I’ve owned joshclement.com for years. For most of the time, it’s been pointing at a Tumblr blog. Recently, I’ve ported my entire Tumblr onto blot.im, a lightweight blogging service. Why? With the future of Tumblr questionable, this seemed like an easy win, and saved me from going too deep into static site generators and stuff like that.
Anyway, with my writing now safely stored on joshclement.blot.im, I needed to think of what to do with my primary domain. I needed my own website, a place to plant my flag and tell my story. But what should I say?
Portfolio World
Building your own website as a designer can mean a lot of different things. For some, it’s a full on portfolio, for others, it could simply be their name and a contact link. I wanted something in between. I started with a bit of research, looking at 100’s of websites associated with ux designers. These ranged from comprehensive portfolios with detailed case studies to the classic “I’m happy with my current job” business card sites. I spent way too long at this step. There’s a lot of beautiful portfolios out there, and I should have been getting started.
An example I liked
Eventually a portfolio site by Aaron Moodie, showcasing a few project thumbnails broke me out of my procrastination. It’s since been taken down, but it showed a short bio and a few images of recent projects. This gave me the inspiration to get started building.
WYSIWYG
As I was looking around at what other designers were doing, I looked into Adobe Portfolio. It’s a new-ish product that gives creators wysiwyg tools to create their own online website. Since I already use Creative Cloud, and Behance to host my recent work, this was an attractive option to me. After playing around for a few hours with designs, I realized I was just reinventing the wheel. Behance does a good enough job to host my work, so I decided that my personal site would simply link out to Behance and that would be that. Plus, I get a real kick out of using git and html/css, so this could be an opportunity for me to do a bit of coding.
The MVP
Now that I’m settled on coding my own ‘one pager’, the next step is to figure out what the MVP might be. Thinking through the lens of a recruiter, I knew I needed prominent links to my resume, portfolio and potentially an email address, coupled with a snappy bio (a few sentences that describe my unique-ness) and maybe a picture of myself.
After that, the idea was to hero a few projects, maybe include some other links to peripheral work, and that’s it. I used Adobe XD to sketch a few simple concepts. This left things like ‘sticky nav’, dynamic layouts and branding elements off the table for V1.
$ git checkout -b landing-page
I started building out the site. I created a new branch, since I planned to host from a personal repo on Github. I used Tachyons since I had a little bit of experience with it, and it’s a really great way to bootstrap a project. What I love most about tachyons is some of the decisions made around the type scale, type measure. It’s easy to get the type working well, and it’s one less decision to make for a project like this. Looking back on this step, I should have focused on getting the writing to a good place before adding it into the code. Eg. Get the layout and design right, port in the text you are happy with, and then make smaller tweaks, rather than doing both at once.
Writing
For the most part, I’m writing copy on the fly. For a while I was using copywriting from vintage advertising as placeholder text, because it was fun, but I’m slowly thinking about what should actually be where. I want to sound smart, and different, but I think the right approach for V1 is to tell your story as simply, and clearly as possible.
I used copy from vintage advertising as my placeholder text, just for fun.
Refining
The plan from the start was to include 4-5 links to my projects. Each project would have a big cover image, a title and a short description, and link out to behance. Once I built it, I realized I had just recreated Behance. I stripped it back down to just a few sections. “My Work” which would be the sole link to Behance. “My Story” which was a short bio and picture. “My side projects” and “My writing” would be little article blocks that I could drop in. Next step was making sure everything was linked up, copy was final and I liked the overall layout. I decided on Work Sans as a hardy, bold font and included a CSS dot pattern for the article blocks. Purple was the highlight color, but aside from that the only color would come from the imagery.
Push master to origin
I shared the site with my girlfriend, a few friends. Most feedback was around the copy. So once I merged the branch to master and made the site live, I kept pushing copy edits for a few days.
Next Steps
I really don’t know who will see this thing. All I really wanted was for there to be a bit of substance on my personal domain. In a perfect world I would have my work, and writing all in one place, but in my experience, removing friction from sharing your personal work is more important than glossy, sexy systems. I’m able to blog with one click of a button and share work on behance with drag and drop. As long as a recruiter can see the things they care about (location, resume, linkedin, folio), that’s fine for me. Using GitHub pages has been super simple, and it’s been fun to crack open the text editor again!