Introducing Blogfolio v5

This is my website refresh for 2024. And yes — I know it's 2025! This has been in the works for over 14 months, and I'm excited to finally get this online.

Welcome to the Evolution

If this is your first time on my website—welcome!

Each year, I rebuild my portfolio website (affectionately dubbed "Blogfolio") from scratch. And yes, I purposefully over-engineer it. Why? It creates a footprint of my technical and design evolution over the years, and most importantly, keeps me current with the ever-evolving landscape of web development.

Thought

I think you should build your own blog and website, too. Here's why.

Curious about my previous iterations? Check out my journey:

• 2023
• 2022
• 2021

A Fresh Design Direction

The most striking change this year: a completely fresh design approach. While last year embraced the dark side, 2024's iteration pivots to a clean, light-themed aesthetic.

For the first time, I collaborated with a professional designer from the early stages to inject distinct personality into my annual rebuild. The challenge was incorporating technical elements without being heavy-handed—moving beyond the typical programming symbols and node-based visuals toward something subtler yet instantly recognizable.

The result? A sophisticated grid-based container system that elegantly separates elements while masterfully managing white space. It's clean, sleek, and purposeful.

During the design process, I experimented with visualizing semantic HTML elements as integral components of the page layout. We played with "puck" designs to divide sections and illustrate how semantic HTML tags might function under the hood. Ultimately, this approach didn't achieve the cohesive feel I was aiming for, so I moved in a different direction.

Typography Refresh

While Inter has been my trusted typeface for several years, I've been seduced by Vercel's Geist typeface. I'm now using Geist for both headings and body text, bringing a fresh typographic personality to the site.

Embracing Bento Design

Bento design exploded in popularity throughout 2023, primarily in SaaS product landing pages, but I hadn't seen it applied effectively to personal portfolio sites. Major credit to Marcin Pankiewicz, who helped shape the individual experiences and design language for these bento boxes. His input influenced numerous variations that emerged later in the development phase.

Reimagined Features

None of this year's features are entirely novel—many have appeared incrementally over the past few years. The key difference is that every feature below has been rebuilt from the ground up with significantly improved implementation.

Enhanced Article Engagement

The article hit count returns—a fun interactive way to gauge a post's popularity. We'll talk about this more later, but I utilize Supabase to do this behinds the scenes.

Article reactions make a triumphant return with Blogfolio v5, now with expanded options: like, love, celebrate, and insightful! This year, I've taken it further with satisfying microinteractions that trigger after you've clicked the reaction.

Idea

You should give it a try! After reading this post, try clicking on some of the reactions!

A small but useful addition: estimated reading time now appears in the article banner, giving readers a sense of the time commitment before diving in.

Reimagined Code Blocks

I'm particularly proud of this revamp—code blocks have been completely reworked. They're more aesthetic, include line numbers, and offer greater flexibility, allowing me to control the language and display the filename when desired.

Example1.tsx
console.log("Do you see the file name in the codeblock header?");

<div>
  <h1>But this one does not</h1>
</div>

Info

Code blocks also include a handy copy button in the top right for easier snippet sharing!

Sleek Newsletter Integration

My newsletter signup form received a stylish redesign featuring my logo and an Easter egg animation when you subscribe—but you didn't hear that from me! 👀

Plus, the copy in the form subtly changes depending on which page you're viewing, so keep an eye out for these little differences!

The Interactive Community Wall

One of my favorite features is the Community Wall—essentially a virtual guestbook with personality. This year's upgrade allows visitors to do more than simply write a message; they can customize their note's color, pattern, and rotation for a truly personal touch.

Want to leave your own message? Give it a try!

Currently Playing: Music Integration

A standout addition to this year's build is the "Currently Playing" Bento card that displays my current Spotify activity. When I'm actively listening to music, it shows the song name, artist, and album. Hover over the Bento, and the vinyl record animates, rotating to simulate the song playing.

Not catching me during a listening session? The Bento defaults to displaying one of my recent favorite tracks.

Expressive Callout Blocks

One of the benefits of using MDX as my content source is the ability to use custom components in my Markdown. When I need to highlight important information or share asides with readers, I can use my new Callout components!

Aesthetically, they're some of my favorite elements on the site. They continue the grid design language that helps separate them from surrounding content. I considered using this same approach for code blocks but decided it would be too jarring for code directly related to the content.

Idea

Here's an idea!

Thought

Here's an intruiging thought! 🤔

Info

Here's some additional information...

Warning

Hold up! I use this when I need to warn readers about something.

Rebuilt Connection Page

The Connections page has received a substantial overhaul since its 2023 debut. The new design better showcases contact details and photos, with people I've already met appearing first, sorted alphabetically.

The page serves as a public showcase of tech industry professionals I'd love to connect with. Not on the list and think you should be? Send me a DM!

Refined Changelog and Links Pages

Both the Changelog and Links pages have been updated to align with the new design language.

The Changelog is now more flexible, powered by MDX for easier addition of images and videos to document the site's evolution.

The Links page serves as my personal alternative to LinkTree—a centralized hub where people I meet at conferences and meetups can access all my social networks and content.

The Technical Foundation

When rebuilding my site, I survey the evolving web development landscape and select technologies that are either emerging or that I don't get to use in my day job. Here's what powers this year's iteration:

Next.js 15

I've returned to Next.js for this year's rebuild! I've always been a big fan, and with the recent additions of Server Components, Server Actions, and the new App Router, working with this framework has been nothing short of delightful.

Tailwind CSS

Anyone who knows me knows about my love affair with Tailwind CSS. While I'm still on v3 at launch, upgrading to v4 is at the top of my post-launch to-do list!

MDX + Velite

I've used MDX in past builds, but this year I'm pairing it with Velite, a build tool that transforms MDX content into high-performance data structures optimized for Next.js and React applications.

The initial setup had some rough edges, but it's been smooth sailing since! I can define content configurations for blogs or changelogs, specify frontmatter requirements, and everything just works. It's remarkably convenient.

Framer Motion

This marks the first year I've integrated a dedicated animation library—practically inevitable given the microinteractions I wanted to achieve.

While I wouldn't call myself a Framer Motion expert, I was able to implement most animations quickly, leaning on Copilot to help me through the learning curve.

Supabase

Supabase provides the backend muscle for tracking article hit counts and reactions. As an open-source Firebase alternative, it offers a comprehensive suite of services with a developer-friendly experience. I'll likely expand its role as I develop the upcoming Stats page.

Loops.so

Loops.so handles all my newsletter needs with its modern, streamlined approach to email marketing. I've been a customer since the beta and have no plans to switch anytime soon.

Iconic

Iconic simply offers the best SVG icons available. Crafted by my favorite designer James McDonald, these icons continue to earn their place in my tech stack year after year.

Vemetric

Vemetric is a new analytics platform developed by one of our own devs in the tech social community.

Looking Forward

For five consecutive years, I've rebuilt my portfolio from scratch, but I'm unsure if this tradition will continue annually.

Between family responsibilities, a full-time job, and various personal challenges, maintaining a strict 12-month rebuild cycle has become increasingly difficult. While rebuilds will remain part of my professional growth—I still believe in the value of over-engineering personal websites—I may need to adopt a more flexible timeline moving forward.

Appreciation Corner

I'd like to close with sincere thanks to those who helped bring this vision to life:

• Marcin Pankiewicz: The design mastermind behind this site—His early designs ultimately shaped the end product and I couldn't have created this without his expertise!
• Kuldar Kalvik: A kindred spirit who shares my love of tinkering and building cool things. Kuldar guided me through creating my Blogfolio trailer and provided code that formed the foundation of my Now Listening Bento. Check out his amazing personal site at kuldar.com!
• Dominik Sumer: The brilliant mind behind Vemetric and generous enough to give me a sneak peek into this exciting new contender in the analytics platform space!