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. <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div> <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!

The above is the detailed content of Little Things on My Personal Site. For more information, please follow other related articles on the PHP Chinese website!