Today is something of a milestone. For the first time in a long while, I have a new website. I'm not talking about a holding page, or link to a resumé, but an actual honest-to-goodness home on the internet.
More importantly than that, I have a personal blog for the first time ever.
It's been a while coming. As a freelancer your website can often be the first impression your prospective clients will get, so the pressure to get it right can be massive. Beyond that though, it felt important that I create something that reflects me and my values. Working on this site has been something of a labour of love for me, so what better way to kick off the blog than writing a little about how I got to this point?
Constraint breeds creativity. permalink
Without a shadow of a doubt, a blank canvas is an intimidating thing. It can feel especially daunting when it seems like there’s a new JS framework popping up every other day. Thankfully, over the years I’ve learned that I'm at my most creative when I'm working with restrictions. To get things moving, I sketched out a few constraints.
The site should:
- Convey a strong personality and a sense of place
- Showcase my interaction library and emphasise the kind of work I enjoy
- Deliver all of the core site assets in 100kb or less
With those targets in place, I set to work.
Finding inspiration. permalink
The design direction was the first thing I had to nail down. I knew that I wanted to keep things simple, but full of character. I also wanted to ground everything with a sense of place. But where to start?
I work remotely 80% of the time, so it made sense to try and bring something of my home environment into the design. I live in a small Welsh town, Abergavenny, which is surrounded by three distinctive mountains - Sugarloaf, Blorenge and Skirrid. No matter where you are in town, you can always see one of them. I figured that if these mountains can ground me, they could also ground my website.
I got out my sketchbook and before long I had roughed out three abstract representations of the peaks. Rather than pick one mountain for my logo, I decided to mimic the town and show all three, randomly swapping them on each page of the site.
The logo got things moving. The simple line-art style leant itself well to SVG illustrations, which would not only keep the page weight down, but also be a good way to inject a bit of character into the design. I sketched up a stylised self-portrait and several other scenes to accompany each page. To compliment the simple illustration style I opted for a 5-tone colour palette, adding a little texture with patterns and an off-registration shading effect.
Hello, Eleventy. permalink
If I wanted to keep this site small and snappy, I'd need to find an alternative.
Eleventy was the perfect fit.
Beyond the standard templating features, Eleventy allows you to write custom nunjucks partials (or shortcodes as they're known here). On the surface that might not seem too exciting, but by using shortcodes I was able to approximate a React-like developer experience by breaking my UI into a series of neatly reusable components. The real magic comes with the way Eleventy stacks template formats though.
If you write a markdown file it can optionally be parsed as one additional format defined in your
.eleventy.js config file - in my case, first as markdown, then as nunjucks. This means that these same shortcodes are also available within my markdown files allowing me to build more interesting layouts inside of blog content.
Getting animated. permalink
I love interaction design, and it was inevitable that my site would feature animation of some kind. The decision to use SVG throughout gave a simple way to add a little spark - I'd use Tornis to manipulate the position of the off-registration effect, and scatter an additional layer of interactivity throughout my illustrations.
I wanted the homepage to stand out in particular. The concept was simple - I'd have a stylised self-portrait track the user's mouse cursor around the site and a series of grouped paths and a bit of selective masking would create the illusion that the illustration was three dimensional.
Animating nested SVG elements directly can cause performance issues on some low-end devices, but this isn't the case with standard HTML. To make sure the animation would be buttery smooth, I first needed to separate each section of the illustration into divs and then stack them with CSS. From there I could start the interaction:
Tornis first captures the user's mouse position (or device tilt) as X and Y co-ordinates which I then convert into a percentage relative to the centre of the screen. Multiplying the positions of two extreme keyframes by this relative value, allowed me to gradually tween each section of the illustration between both poses. To sell the effect, CSS transitions smooth out the movement and make each keyframe blend seamlessly.
The results really surprised me. I found that approaching motion in this way - as a series of blended positions rather than individual animation sequences - makes for a much more organic feel. The gradual blending also means that you avoid any of the visible cuts you'd get when swapping between CSS animations.
Final Thoughts. permalink
So did I keep to my restrictions in the end? Broadly, yes.
Most of all though, I'm happy with the look of the site - it feels like home. Setting myself constraints early on really helped to focus development whilst still allowing me to explore the design. Similarly, putting aside my default tech choices has meant that I've been able to craft a comparable experience in a fraction of the filesize. I will definitely be using Eleventy for future projects.
Finally, as with any personal website, I wouldn't call it totally finished and I dare say that I'll keep on tweaking and updating things as it lives and grows. For now though, I’m really happy with how the final site has turned out. It's been a long road.