Little Things on My Personal Site

Recently, I gave my personal website a refresh – a fun solo project! It's my creative outlet, a space for self-expression and experimentation. This wasn't a complete overhaul, more like a fresh coat of paint. Let's explore some of the interesting techniques I used.

Typography with Hoefler Fonts

The Inkwell font family is fantastic! I love mixing weights, serifs, sans-serifs, and capitalization styles. While I used Inkwell in the previous design, I felt it was a bit too playful for blog post body text. My writing style is casual, but not always, and Inkwell's jovial nature didn't suit more serious topics. Previously, I paired it with Ideal Sans, but the combination felt off.

This time, I chose Whitney for the body copy. It maintains a lighthearted feel but works well with more straightforward content.

Styling a Blogroll with Sass

Zebra-striping a table is simple:

tr:nth-child(even) {
  background-color: var(--color-1);
}
tr:nth-child(odd) {
  background-color: var(--color-2);
}

But what about cycling through four colors? The :nth-child selector, with offsets, handles this neatly. Here's a Sass example for list items:

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;
  }
}

This approach created the colorized blogroll. I used Sass due to its existing presence in the project; CodeKit handled the compilation effortlessly. And yes, blogrolls are cool again!

Efficient YouTube Embeds

I employed a clever click-to-load YouTube technique. Instead of embedding a full YouTube iframe, which loads many resources, I used a static image placeholder. This significantly improves performance while maintaining a similar user experience.

<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Y8Wp3dafaMQ" srcdoc="*{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}<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'>▶</a>" title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition" width="560"></iframe>

Custom Post Types and Data Structure

I'm a strong advocate for structured data. In WordPress, this often involves Custom Post Types combined with a plugin like Advanced Custom Fields. This allows flexible data handling and simplifies future site modifications.

Dynamic Bio Generator

My bio section isn't complex: I created 18 <div> elements (3 lengths <em> 2 styles </em> 3 code types) and use JavaScript to switch between them. A class string is calculated based on user selections, revealing the corresponding bio while hiding others. <pre class="brush:php;toolbar:false">$(&quot;.bio-choices input&quot;).on(&quot;change&quot;, function () { var lengthClass = &quot;.bio-&quot; $(&quot;input[name=length]:checked&quot;).attr(&quot;id&quot;); var styleClass = &quot;.bio-&quot; $(&quot;input[name=style]:checked&quot;).attr(&quot;id&quot;); var codeClass = &quot;.bio-&quot; $(&quot;input[name=code]:checked&quot;).attr(&quot;id&quot;); var selector = lengthClass styleClass codeClass; $(&quot;.bio&quot;).hide(); $(selector).show(); });</pre> <p>I used jQuery because it was already integrated into the site (along with FitVids). A future rewrite might involve removing jQuery and streamlining the bio options.</p> <h3 id="ztext-js-and-Animated-Headers">ztext.js and Animated Headers</h3> <p>The header uses ztext.js, adding a touch of webby flair. This level of animation might be less suitable for high-traffic sites, but it works well for a site with lower visitor frequency.</p> <h3 id="SVG-Backgrounds-and-Footer-Effects">SVG Backgrounds and Footer Effects</h3> <p>I utilized the updated SVG Backgrounds site to create the background. I opted for <code>background-attachment: fixed, and included a slide-out footer effect on desktop. The footer effect might need refinement; it's more impactful with a dynamic background.

Consistent Link Styling with Filters

Different sections use varying highlight colors, and I linked section links to their respective colors. While this might be debatable (consistent link colors are often preferred), I find it visually appealing. The filter: brightness(120%); trick ensures consistent hover and focus styles across all colors, simplifying styling.

a:focus, .button:focus,
a:hover, .button:hover {
  filter: brightness(120%);
}

This was a relatively quick update, largely inspired by a CodePen challenge. However, as always, one small change led to another, and I ended up making more significant modifications than initially planned!