Welcome to Dhox: a sublime theme

Welcome to Dhox, a delightful theme rich with smooth interactions.

🌟 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.

---

🎨 Key Features

1. 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.

2. Meaningful Themes

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

• Light: Crisp, clean, paper-like. Perfect for day reading.
• Sepia: Warm, low-contrast, easy on the eyes. Ideal for longform reading.
• Dark: Deep, immersive, OLED-friendly.

3. Integrated Search

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

4. Dynamic Dock

A MacOS-style navigation hub that floats at the bottom. It scales smoothly on interaction and adapts its size for mobile devices.

5. 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." }
  ]}
/>

6. Smart Typography

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

7. Post Copyright & Sharing

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

8. 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.

---

🛠️ 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

Code Blocks

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

Table of Contents

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

---

Why MDX?

MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into your Markdown content for things like interactive charts or alerts.

If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.

Example

Here is how you import and use a UI component inside of MDX.
When you open this page in the browser, you should see the clickable button below.

Click me - Embedded in MDX

More Links

• MDX Syntax Documentation
• Astro Usage Documentation
• Note: Client Directives are still required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no JavaScript) by default.