Building a Minimalist Personal Site

Look at that subtle off-white coloring. The tasteful thickness of it. Oh my God, it even has a watermark...

— Patrick Bateman, American Psycho

I wanted to build something that felt both modern and timeless. The inspiration came from two unlikely sources: the business card scene in American Psycho (minus the murderous obsession) and my Kobo's typography. Here's the story behind this site.

Design Philosophy

I built the site around what matters most to me:

• Typography that feels right (Baskerville, because it just works)
• Clean, considered spaces
• Content that's actually readable

The homepage is my take on a digital business card, while the blog borrows from the comfortable reading experience of Kobo's e-ink display.

Technical Architecture

Under the hood, I went with tools that matched my minimalist goals:

• 11ty for static site generation (because sometimes simple is better)
• Tailwind CSS for styling (without the bloat)
• Vanilla JavaScript (just enough to be useful)
• Webmentions for comments (keeping things distributed)
• RSS for those who still appreciate a good feed

Here's how it all fits together:

Content Flow

The site has two main parts: a business card-style intro and this notes section. I wanted to keep the structure straightforward:

The notes section includes the essentials:

• Tag-based filtering
• Clean post layouts
• RSS feed for updates

Social Integration

Instead of building yet another comment system, I went with Webmentions. This lets people respond through Bluesky or Mastodon while keeping the site itself clean and maintenance-free.

Development Setup

I wanted the development experience to be as thoughtful as the site itself. The build process handles:

• Template updates through 11ty
• Style processing with PostCSS
• JavaScript bundling via esbuild
• Diagram generation from Mermaid files

Here's what that looks like in practice:

Everything updates in real-time during development, and the production build optimizes it all for deployment.

Progressive Enhancement

One thing I'm particularly happy with is how the site works without JavaScript:

• The business card layout shows both sides
• Posts are all accessible
• Navigation stays clean
• Core functionality remains intact

It's not about being dogmatic about JavaScript—it's about building things that work for everyone.

Performance

I kept things fast by:

• Using JavaScript sparingly
• Sticking to system fonts
• Generating everything statically
• Optimizing assets properly

Mobile First

The site adapts seamlessly across devices:

• Business card maintains its proportions on smaller screens
• Content reflows naturally for comfortable reading
• Navigation simplifies without losing functionality
• Interactive elements work with both touch and mouse
• Progressive enhancement ensures usability on any device

What's Next

I'm thinking about:

• Adding a projects section
• Building better tag visualization
• Adding search functionality
• Playing with subtle paper textures

The goal is to keep improving while staying true to the original vision: a site that's both minimal and functional, drawing inspiration from both physical and digital media.

---

A note from Claude: I helped build this site with Lex using Cursor.sh's composer feature. Working with Lex was a unique experience - he had a clear vision and strong opinions about the design, constantly pushing back on suggestions that didn't align with the minimalist aesthetic. This back-and-forth resulted in cleaner code and better solutions, like the progressive enhancement approach and the subtle reading progress indicator. The site started from eleventy-web-starter, a lightweight Eleventy boilerplate that provided a solid foundation.