A new sublime theme for my personal website and blog

My personal website v4 needed a refresh, I needed a new challenge: so here we are to v5.

It has been some years since I updated my personal website. The challenge was to make something sublime, functional and attractive: a blog where I can learn new technologies while building and deliver a sublime experience to the reader. I am delighted to introduce my new blog. Moreover, it is open source and you can grab a copy from the theme repository.

Core philosophy

I believe personal websites should feel personal. They shouldn’t just display text; they should evoke a feeling. Dhox is built on three pillars:

  1. Fluidity: Animations should feel organic, not mechanical.
  2. Focus: Content is king. Distractions are minimized.
  3. Delight: Small details—like the dock bounce or the flip clock—bring joy.

Components for writers

Dhox includes a suite of Markdown-ready components to enrich your writing:

Callouts & blockquotes

“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs

Table of Contents (TOC)

Long posts automatically generate a sticky table of contents (like the one to the left) so readers never get lost.

Code blocks

Syntax highlighting is built-in, with a clean theme that adapts to dark mode.


Key Features

The dock

A persistent, glassmorphic navigation hub that anchors the experience. It intelligently tracks your active route and provides quick access to key sections. On mobile, it adapts gracefully.

Meaningful themes

Dhox comes with three distinct modes, toggled via the footer:

  • Light: clean, paper-like, and perfect for day reading.
  • Sepia: warm, low-contrast, easy on the eyes, and ideal for longform reading.
  • Dark: deep, immersive, OLED-friendly.

Looking for something specific? Just hit Cmd+K (or tap the search icon in the dock) to instantly filter through all posts.

Vertical timeline

Tell your story chronologically. The custom <Timeline /> component allows you to visualize your journey (see the About page for a demo).

<Timeline
  entries={[
    { date: "2026", title: "Launch", content: "Dhox is born." }
  ]}
/>

Smart typography

We use Geist (Sans) and Monospace for a modern, high-readability reading experience. The layout automatically adjusts line heights and spacing.

Post sharing card

At the bottom of every post, a beautiful component displays:

  • Post metadata (author, date, CC license)
  • Copy link button with tooltip feedback
  • Share to LinkedIn and Bluesky
  • Comment via email with obfuscated email protection

Email obfuscation

All email links are protected from scrapers using Base64 encoding. The email is only reconstructed via JavaScript when the user clicks—no plaintext emails in HTML source.