I updated my personal website the other day. Always a fun project since it’s one of the few where it’s 100% just me. It’s my own personal playground with no other goal than making the site represent me to have a little fun. It’s not a complete re-write, just some new paint.
I thought I’d document little bits of it here just to hone in on some of the bits of trickery in the spirit of learning through sharing.

Hoefler Fonts
I think the Inkwell family is super cool. I like mix and matching not just the weights but the serif and sans-serif and caps vs not.

I used Inkwell in the last design as well, but I was worried that it was a little too jokey for blog post body copy. My writing is extremely casual, but not always, and Inkwell is way too jovial for serious topics. I went with Ideal Sans for body copy last time, but the pairing with Inkwell felt a little off.
This time I went with Whitney for general body copy, which is still pretty lighthearted, but works when the copy is more straight toned.

Blogroll
If you’re going to zebra-stripe a table, you’d do something like…
tr:nth-child(even) {
background-color: var(--color-1);
}
tr:nth-child(odd) {
background-color: var(--color-2);
}
What if you wanted to rotate four colors though? It’s still :nth-child
trickery, selecting every four, and then offsetting. Here, I’ll do it with list items in Sass (the nesting is nice, not having to repeat the selector):
li {
&:nth-child(4n) a {
color: $blue;
}
&:nth-child(4n + 1) a {
color: $yellow;
}
&:nth-child(4n + 2) a {
color: $red;
}
&:nth-child(4n + 3) a {
color: $purple;
}
}
That’s what I did to build the colorized blogroll:

Note the Sass used above… I used Sass because it was already in use on the project. All I had to do was open CodeKit and the processing was ready-to-go.

Oh, and blogrolls are cool again.
Chill YouTube
I used this click-to-load-YouTube-(at all) technique which is still extremely clever. Having an <iframe>
that behaves just like a YouTube embed would but only loading a simple static image (rather than heaps and heaps of resources) is great for performance and behaves essentially the same as a normal YouTube embed does.
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/Y8Wp3dafaMQ"
srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe>

Custom Post Types everywhere
I’m a big fan of giving myself structured data to work with. In WordPress-land, that often means Custom Post Types paired with something like the Advanced Custom Fields plugin for just the right data needed for the job.

Then I can loop over stuff and output it however I want. This isn’t that fancy, but it opens up whatever future doors I want to a lot easier.

Build your own bio
There is nothing fancy about how this works:

I literally made 18 <div>
elements (3 lengths * 2 styles * 3 code types = 18) and swap between with a bit of JavaScript that calculates a class string based on the current choices, selects that class, and unhides it while hiding the rest.
$(".bio-choices input").on("change", function () {
var lengthClass = ".bio-" + $("input[name=length]:checked").attr("id");
var styleClass = ".bio-" + $("input[name=style]:checked").attr("id");
var codeClass = ".bio-" + $("input[name=code]:checked").attr("id");
var selector = lengthClass + styleClass + codeClass;
$(".bio").hide();
$(selector).show();
});
jQuery! That’s what was already on the site, and the site also uses the jQuery version of FitVids for responsive videos — so I figured I’d just leave it all be.
If I was going to re-write these bits of the site, I’d probably rip out jQuery and use this for FitVids. Then I’d find a way to only have three bios (maybe six if I can’t find a nice way to handle first vs. third person with word swaps) and then get the rest by automatically converting the formats somehow (maybe some cloud function if I had to).
ztext.js
I used ztext for the header! It’s this kinda stuff that makes the web feel extra webby to me. I’m not sure I’d do something with quite so much movement on a site like CSS-Tricks (because people visit it more often and the time-on-site is higher). But for a site that people might land on once in a blue moon, it has the right amount of cheerful levity, I think.
Background SVG
I was stoked to see the SVG Backgrounds site get an upgrade lately. I was playing around in there and was like YES, I’m doing this.

I went with a background-attachment: fixed
look, which I think I like. I also added the slideout footer effect on desktop, but I’m less sold that it’s working here. It’s more fun when the background changes, and that doesn’t happen here. I’ll probably either change the background of the footer, or rip the effect out.
Filter trick for links
Some of the different sections on the site use a different primary highlight color, and I’m having the links in those sections follow that color. That might be questionable (perhaps all links should be blue) but, so far, I think it makes decent sense (they still have hover and focus styles). When you have a variety of colors and styles for interactive elements though, it often means that you have to create special alternate styles for hover and focus. That could mean crafting bespoke color alterations for each color. Not the end of the world, but I really like this little trick for interactive styles that ends up with a consistent look across all colors:
a:focus, .button:focus,
a:hover, .button:hover {
filter: brightness(120%);
}
Anyway! This was just a couple hours of paint on this site. Mostly because blogrolls were the CodePen Challenge that week. But I can never touch a site I haven’t in a while and just do one thing. I get sucked in and gotta do more!
I really like this! For the Custom Post Types, any chance you can elaborate on what the “Re-Order” menu item does? I guess specifically I’m asking is that a plugin for ACF or something else? I use CPTs a lot and a request I hear all the time is how can my clients reorder their posts. Would really like to learn more about that!
It does exactly what you think it does! You go under the re-order menu and drag them around to whatever order you want. I think from there it uses the native ordering feature, so it doesn’t mean you can’t sort by date or whatever anymore, it’s just if you choose to sort by that order, it works.
@Chris
You are referring to Custom Post Types (https://css-tricks.com/little-things-on-my-personal-site/#custom-post-types-everywhere). At first glance you are using these posts only on listing pages. From a SEO perspective what are you doing with the detail post permalinks? Setting to noindex?
I’m not doing anything but I probably should be.
Fun stuff! I love the Build-Your-Own-Bio. I love seeing personal websites because they are often the most creative and fun places on the web.
I did notice a slight issue with the bullets next to the items under Do These Things; On my browser, anyway (Chrome), it wasn’t respecting the width of the pseudo element’s characters so it was overlapping with the text. Adding
width: .75rem;
to the:before
element fixes the issue.“Then I can loop over stuff and output it however I want.”
What do you mean by “loop over stuff”? Is this a reference to the WordPress “Loop”?
Exactly! Loop through custom post types and fields like you would any other post object and display it any way you’d like!
I would love to see blogrolls come back in earnest. They were a great way of finding new things on the internet when search engines were still in their infancy, and I miss them especially now that everything is ad bloat. I want a magical playground internet, gosh dangit.