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
- Use progressive enhancement to keep the site usable when JavaScript is not available
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
Before I started coding I knew that I wanted to build a JAMstack site and host it on Netlify. However the self-imposed 100kb limit meant that, right off the bat, using something like React or Gatsby would be tricky. Though it is possible with optimisation, the runtime JavaScript required for a single-page app would likely take up most, if not all of my initial load budget.
If I wanted to keep this site small and snappy, I'd need to find an alternative.
At the time I started the build, I'd been hearing a lot of buzz around a static site generator called Eleventy and decided to check it out. On the surface, it's closer to something like Jekyll than it is to Gatsby. Pages are constructed from Markdown files using one or more templating languages and then compiled into vanilla HTML, CSS and JS files. It's hugely configurable and crucially there's no clientside bundle either, meaning you're entirely free to add as much or as little JavaScript as you like.
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.
In-keeping with Eleventy's ethos, I've opted to kept clientside JavaScript to a minimum. To retain the feel of a single-page app, I'm using the history api to capture internal links and transition between pages and, to spice things up a bit more, CSS custom properties swap out the colour palette on each page transition. Aside from Tornis, I've kept dependencies light and the final JS bundle clocks in at only 17kb when gzipped.
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.
With a little help from Netlify hosting, the initial page transfer on the homepage clocks in at ~80kb (gzip) and, should the site load without JavaScript, everything is fully usable with an alternative layout. Ultimately, I have used some images on blog articles and the like which brings the individual page weight higher but I feel like that's still acceptable as the core assets are well within my target.
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.