A new beginning for new skills and tools

Six weeks ago I went freelance full-time. I left my agency role and moved from Bournemouth to London. One of the first tasks I set myself was to create a new portfolio website (this site). I had an existing (but slightly neglected) site which I hadn't done much to since it launched 18 months ago. I felt that with so many other changes in my life it was a good time to start fresh.

I took the opportunity to use some new tools, which have been on my 'to learn' list for far longer than I'd like to admit. This is a major part of the freelance 'dream' for me. Being a freelancer gives me the opportunity to refine my workflow and experiment with the tools that best suit how I want to work going forward.

I've been using Photoshop for over a decade, it's been a concrete part of my design process. I've always felt a little frustrated when designing visuals intended for the web, it's quite a bloated application trying to cater for too many things. I started to hear a buzz about Sketch App on Twitter. It looked interesting so I thought I'd try it out for the design of this site. I would describe Sketch as a cross between Photoshop and Illustrator, it's vector based so you get lovely crisp lines that can be zoomed into and still be left smiling. It's ideal for any kind of user interface design work.

While I've heard developers rant about having to write CSS, I'm always excited to write that first line and to see a web page transform. However, I know from experience how frustrating CSS can be, especially when it comes to maintenance. Sass is CSS with superpowers. I only got as far as using the x-ray vision, but that was more than enough to convince me I want to keep learning until I can fly. During this site build I made use of variables, nesting, and partials that all get imported into one stylesheet. No more scroll through thousands of lines of CSS! I hope to write more on SASS as I keep learning.

In the past I've been slightly embarrassed by my CSS. Coming from a busy agency environment when in most situations there the mentality of 'just get it done and we'll tidy it up later', which never seemed to happen. I wanted to go into creating this project using more maintainable markup (which SASS also helps massively with), to give myself a platform to keep learning from and shake off those my bad habits.

The purpose of OOCSS is to encourage code reuse, limit the specificity wars between styles and, ultimately end up with more efficient and maintainable stylesheets. It results in more classes within the HTML, but you end up with more modular and reusable CSS. I don't feel I completely mastered this technique on this build, but I know I'm making steps in the right direction.

I've kept my eye on this little CMS for quite a while. This seemed the perfect project to implement it. What's appealed to me about Perch over other Content Management Systems is it really is about your markup first, then the CMS plugs into the areas where you need it. It allowed me to create a site where I can keep the markup lean, resulting in speed improvement I wouldn't have seen with other CMS options. I've been able to achieve everything I wanted to do with this site using Perch.