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:
- Fluidity: Animations should feel organic, not mechanical.
- Focus: Content is king. Distractions are minimized.
- 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.
Integrated search
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.