My Home Page, Reimagined

My home page is at mrwillcom.com. Last time I refactor my home page is over 3 years ago. That version was based on Markdown, written in Nunjucks and built by Eleventy. Information used to live in tables, which wasn’t eye-catching enough. All layouts were similar and boring. This prompts me to begin refactoring my home page again.

Designing

My idea is inspired by Vercel’s home page. Square and light borders can make the main area stand out and attract the visitors to focus the main area. I usd pure white for the main area, but a brighter black for it in dark mode, so the main area is always brighter than the underlying background.

For typography, I chose Inter for all sans-serif fonts and Geist Mono for monospaced fonts. These fonts behaves well even when they are small. Bigger font size ratio makes it more expressive.

Colors are chosen carefully in mind. The default text colors are subtler than normal, making space for the emphasized text. Font sizes everywhere are adjusted by hand, allowing them to fit the whole context. Many other details are also well-considered, including italics, cases, weights and more.

Technologies

This time, I selected Next.js as the framework. Next.js handles more at server side, so it performs better in client-side performance and SEO.

Tailwind CSS sucks. In order to boost my home page, I chose SCSS as usual, elegant and enhanced CSS that does not pollute your codebase.

In this project, I decided to use state-of-the-art web technologies. I believe these features will be available to more and more visitors.

sibling-index()

With sibling-index(), you will no longer need JavaScript for alternating delays of the sibling elements.

<div class="container si-demo">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

@keyframes si-demo-animation {
  0% {
    opacity: 0;
    translate: 0 16px;
  }
  50% {
    opacity: 1;
    translate: 0;
  }
  100% {
    opacity: 0;
    translate: 0 -16px;
  }
}

.si-demo > .item {
  animation: si-demo-animation 2s infinite;
  animation-delay: calc(sibling-index() * 0.1s);
}

If your browser doesn’t support this feature, you won’t see the demo correctly.

animation-timeline: view()

Yet another un-Javascript-ify feature. With this, you no longer have to use JavaScript for tracking the position in the viewport of an element.

<div class="container view-animation-demo">
  <div class="dot"></div>
</div>

@keyframes view-animation-demo-animation {
  0% {
    opacity: 0.6;
    width: 0%;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
    width: 100%;
  }
}

.view-animation-demo > .dot {
  animation: view-animation-demo-animation linear both;
  animation-timeline: view(block);
}

Looks like this:

If your browser doesn’t support this feature, you won’t see the demo correctly.

Optimizing

During the refactoring of my home page, I wished that my new home page can have a more excellent performance. So I improved my home page’s score according to the Lighthouse scores. The final result is stunning:

Tested on MacBook Air M4, the result of "Performance" may vary on different devices.

You can also view the full report with the report viewer.

Ester Eggs

I’ve set an ester egg in my new home page. Until now, only 3.73% of the visitors have discovered it. Have fun! 🥳