Published in Journal, Technology & Work on A Place For My Head. Tagged , , , , , , , , , , , , , , , , , , and .

I published Available to Consult[1] in January last year to assemble a profile, of sorts, of myself as a developer. I thought it would be a more useful resource than a C.V. for anyone I spoke to who needed a sense of my experience and capabilities. I’ve now evolved that entry into a single-page website of its own: hire.shivjm.in.

Before I elaborate, thanks are in order. vrugtehagel, mateo, Adi, Thomas, uncenter, b-fuze, Fawad: thank you for the invaluable advice and suggestions that helped me turn boring text into something I’m quite excited to show off.

To my sister Aishwarya: never cross me again thanks for nudging me to reconsider the tenor of the text. I guess.

Available but not appropriate

The old article had a few inherent limitations. First, I deliberately made it specific and frank so it would discourage many prospective employers that I wouldn’t be a good fit for. It succeeded, but I’m coming to believe (and have been told categorically by several people!) it’s more productive for both parties to have a friendly discussion about those subjects after clearing all the other hurdles, so that we know we’re speaking in good faith.

Second, an article on a blog is not the right medium for something that ought to serve as a reasonably contemporaneous summary of my experience. Articles have dates, tags, streams, and so on. They’re updated when necessary, but the preferred method is to publish a new article and add a link in the old one. They’re not meant to be living documents.

Enter the Eleventy

As such, rather than contort the entry, I decided I needed a new single-page site à la shivjm.name. I began by copying the raw Markdown into a new Git repository. Next, I initialized it with pnpm and added Eleventy (which was always going to be the foundation) and set up remark with my custom extensions.

The first thing I had to do was change all the relative links to absolute links. Then I added my preferred CSS reset and edited the text to better stand on its own.

Groping in the dark for a vision

I’ve been gently and cautiously designing A Place For My Head for years. Even though the idea of giving it a bold new look is very attractive, I’m constrained by the many different kinds of writing I’ve published here. Part of the appeal of building a separate site is having the freedom to be more dramatic. I didn’t want there to be any visual similarities between hire.shivjm.in and this blog (apart from careful attention to typography and detail, of course).

Given my predilection for emphasizing text over everything else, I typically start the design process by picking typefaces. However, in this case, I didn’t yet have a clear vision. Therefore, after I had put in whatever came to mind immediately, I deliberately shifted my attention to its overall form, which I hoped would allow me to make useful choices when I returned to the faces.

Even then, all I did at first was experiment with sizes and spacing. Eventually, I realized that was getting me nowhere. I subsequently forced the issue by adding a yellow body inside a blue html. The colours were hardly unfamiliar to me, but it was a start. I also switched to a typewriter-esque font for the heading and put it inside a garish box.

A series of inspired ideas

I lamented to vrugtehagel that although I’d like to use green for a change, I couldn’t see how to do it in a pleasing way. They offered the idea of a paper-like æsthetic, because it would let me use whatever colour I like in the background. This is a concept I’ve often wanted to experiment with, although I was skeptical about whether it’d work for this site. Fortunately, when I tried that in combination with a banner-like presentation for the Hire me! heading, I was quite taken with the effect.

I shifted the hue of the outer area towards green and the inner area towards beige, with links turning green as well to match. I then undid my heading styles to make the heading sit inside the sheet of paper.

In between all that, I also went through hundreds of pages of typefaces, as is always the way. I confess I didn’t get past the letter h. Happily for me, that was enough to turn up FFF Professional, which evokes 16-bit video games, and ITC Cushing, which struck a chord with me, though I didn’t understand why until later: something about its proportions makes me think of the DOS font. Tragically, one flaw I had to make my peace with is that it lacks my beloved small capitals.

Thomas of hello, yes observed that FFF Professional looks out of place next to ITC Cushing, and I agree with him. I just find this odd pairing strangely compelling. (And I’m unwilling to compromise on the video game allusion, at least for the moment.)

Photo attached for your consideration

Next, I wanted to put in a picture of my smug mug to let visitors see whom they were dealing with. I would ideally have liked this to be a lo-fi headshot, in keeping with the overall theme, but I couldn’t find any easy way to turn the photo I had in mind—the same one I’ve been using in most places since 2021—into what I desired. I tried common techniques for pixelation and one or two (non-AI) converters, but nothing looked right. I compromised on a slightly blurry and pixelated version, which I later replaced with a colour half tone. In the end, I switched to a black & white half tone image that’s tinted (using mix-blend-mode and opacity in CSS) with the colour of the paper.

I styled the image to look like one from an instant camera, complete with a caption for which, with an uncharacteristically cavalier disregard for cohesion, I used a third font (Avondale). I initially had it on the left. At this point, I got some feedback from Adi that led me to interrupt the process: he urged me to tweak the text and add subheadings now as I intended to do in any case. I made some improvements and hurriedly divided the text into sections with the first subheadings that came to mind.

This was a positive change, but the photo interacted in a displeasing manner with the very first heading. I discussed my options with vrugtehagel. We looked over a version with the photo on the right. It wasn’t bad. They suggested moving it above the main text, which I was also mulling the possibility of, and then mentioned the delightful idea of adding a paper clip.

Implementing the clip seemed slightly complicated at first because part of it would need to go behind the photo, but I realized I could just erase that section. vrugtehagel was taken aback upon seeing my version and remarked that the clip was backwards. I agreed, but I pointed out it still functions correctly in that orientation and it’s easier to recognize.

The one thing that bothers me is the lack of a shadow (unlike the rest of the page). It’s complicated because of the split. I think I can fix it by breaking the image itself into three sections, two for the top half (moved above the photo with transform, the right one having a lower z-index than the image) and one for the bottom.

400 kB of fonts is not an option

I was close to having a first draft that I was willing to show a wider audience. The biggest obstacle was the size of the page, as I hadn’t yet added any optimizations at all. I’d left it to the browser to scale a 250 kB, 2,000-pixel photo down to something like 200 pixels, and when it came to fonts, the three OpenType files weighed nearly 400 kB in total.

I easily fixed the image by means of the Image plugin’s transform method. One catch is that, if multiple widths are specified, img elements must have sizes attributes, which the browser gives precedence over nearly any other form of sizing. I didn’t appreciate how it interfered with the values I set in the CSS. Fortunately, I knew I would only ever be showing the image at a tiny size, so I restricted it to just one 200-pixel version. This is too large for some devices, but the file is small enough—at 6 kB—to render it immaterial.

It was more complicated to optimize the fonts using eleventy-plugin-font-subsetting. I’ve written about that separately. Once I had set it up, however, I didn’t have to think about it again.

Launch

After speaking to Adi again, I tweaked the page title and added a subheading right afterwards to separate the pitch. I deliberately made it very aggressive to begin with. Then I went through a few cycles of tweaking sizes and spaces before refining the text. I kept fiddling with the subheadings, switching from the body font to the heading font, removing the slight outward movement, adding then shortening underlines (which I moved outwards instead), and making the text more concise:

Given that I was using an old-fashioned typeface for the title, I experimented with giving it an equally old-fashioned metallic look:

But neither could I find a pleasant colour scheme that suited the page nor, as vrugtehagel reminded me, did it fit thematically with what was fast becoming a cover letter of sorts.

Instead, I added a menu, together with a quick animation for target subheadings that I was quite proud of. Now I was ready to upload the first public iteration, not for widespread dissemination but for review. I pushed the code to a repository on GitLab, configured Netlify, and waited for the DNS to propagate.

As I did that, I undid the light-dark colours I had put in without any thought to the dark scheme while I was making dramatic choices, harmonized my link colours, and added a subtle dark mode:

I didn’t want a drastically different look. I just wanted to avoid assaulting anyone’s eyes. I’m quite happy with what I arrived at.

Reining myself in

I later implemented a typing effect that I was pleased as punch with:

But after letting it simmer for a while and discussing it with uncenter and others, I had to admit it didn’t fit. I would expect most visitors to scroll quickly, meaning they might even miss my name entirely if it weren’t already on the page. I left just the blinking caret in place, letting it migrate to subheadings with the menu.

JavaScript (Boo! Hiss!)

I use Netlify’s builtin analytics on A Place For My Head since precise metrics aren’t particularly important here, but this new page is a different kettle of fish. It’d be quite useful to have a more accurate view of who’s looking at my profile. That (unfortunately) requires JavaScript.

Now, obviously, Google Analytics isn’t an option since I don’t want to run any Google code. I wanted something I could host in my Kubernetes cluster. That ruled out Fathom Analytics, which isn’t open source, and Pirsch Analytics, which appears to run on the server (though I admit I’m not entirely clear on this) and thus can’t be used on a static Netlify website. I’m not ready to run ClickHouse, which disqualifies Rybbit and Swetrix. These are the options I evaluated:

Umami sounds like the best option. I was able to deploy it to Kubernetes without fuss and put the code only on the production site. It worked. I ran localStorage.setItem('umami.disabled', 1); in the console to keep my own visits out of the counts. Sadly, customizing the script filename and endpoint had no effect for me, so I reverted those to the default after making a couple of attempts.

Incidentally, I believe the bounce rate will always be close to 100% since there’re no other pages to visit and no actions to take on the site itself.

The boring list

A conversation with mateo triggered an epiphany in my mind. I suddenly knew who my audience was and how I wanted to write. I ruthlessly edited and rewrote my text, removing everything that didn’t fit. In addition, while recruiters aren’t my intended audience, I now knew I needed to include a plain list of skills and technologies somewhere in the page to reassure anyone who reads it. If it happened to attract more visitors, so much the better.

I assembled a data file with a bunch of items in groups that are rendered as a list of lists inside a details element. I initially used the groups only for organization, but I quickly realized I should put a label on each one for clarity. I made it as absurdly comprehensive as I could bear.

I tried a few different ways of rendering it, including plain spaces between items, semi-colons, and vertical bars. I settled on checked boxes, for which I eventually wrote a custom SVG file by hand. (I wish I knew how to force it to look pixelated without drawing individual pixels.) I also made the labels all-uppercase with underlines to give them a more outdated look.

Finally, based on some advice from Fawad, I split the list into two parts: a few groups that are always visible and the rest inside a details element.

My favourite icon

The last thing I had to add before publishing it is a favicon. Had I been able to create a lo-fi version of my headshot as I wanted to, I’d have used that, but it wasn’t in the cards. For lack of any better ideas, I took the favicon from A Place For My Head and coloured it to match the links. It sufficed, I suppose, but I instantly disliked it.

It led me to wonder how it would look if I used FFF Professional to write out my initials. I felt indifferent towards that variant: it looked a bit awkward and didn’t create much of an impression. I reduced it to just S,[2] still in FFF Professional. It was better.

As soon as I saw it, though, I knew what I needed to add: a caret, like in the page itself. I did just that. I spent a little bit of time tweaking the colours so the favicon would be legible and easy on the eye in both light and dark modes (which unfortunately required me to sacrifice the integrity of the colours), with an almost imperceptible drop shadow to give it some depth. And there it was:

The finishing touches

I copied over the footer from here, removing the reference to Sass, which isn’t used on the new page. Then I added HTML beautification and Lightning CSS,[3] mostly for automatic prefixes but also for formatting.

I’m very happy with the page as it exists now. Without meaning to brag, I believe it looks good, it has personality, it’s designed appropriately for its target audience, and it carries a little something extra (the skills section) to increase my reach on top of all that. What’s more, even with the fonts and photo, the whole thing weighs in at just 77.26 kB before compression (56.11 kB after). How many pages can say that in the era of a 2 MB average?

Next up: designing an actual business card. It should be easier than the last one. I already have an idea of how it should look.

  1. Now archived.↩
  2. One could perhaps read something into the trend—so far, based on these two—of my deriving favicons from the first letter of my name.↩
  3. Trivial with the Eleventy plugin.↩