Hello World

This weekend was dedicated to refreshing my website - something I've been meaning to do for a long time. My previous site was built many years ago while I was still in architecture school, and I had really no knowledge of front end development at all, so it was built with Squarespace. Since then, I've built several sites for various projects, including the Monoql landing page and app, each experience deepening my appreciation and understanding of front-end technologies. While I primarily focus on distributed systems, backend, and AI, diving into UI design and front-end frameworks has been both challenging and rewarding. I've been lucky enough to explore NextJS, Svelte & SvelteKit, Remix, and HTMX+Askama+Axum.

Table of Contents

• The Stack
• Design Principles

The Stack

• Next.js
• NextUI
• Tailwind CSS
• MDX
• next-mdx-remote
• Vercel

The core technologies powering my site are Next.js, MDX, and Tailwind CSS, hosted on Vercel. The choice of Next.js was influenced by a desire to deepen my understanding of the framework, inspired by its use in the Monoql app and the T3 Stack. For content management, MDX is rendered server-side with the help of next-mdx-remote.

I've typically used shadcn/ui in the past, but I really wanted to test out a more opinionated component library, so I decided to try out NextUI for this site. I'm not completely sure how I feel about it yet - I really love shadcn/ui and the flexibility it provides. My gut feeling is that I much prefer shadcn/ui, but so far NextUI is working out alright.

My approach to building this site was inspired by a desire to simplify the content creation process, minimizing dependencies. This led me to adopt a straightforward method for managing MDX content, influenced by leerob's strategy, focusing on simplicity and efficiency.

import fs from 'fs';
import path from 'path';

function getMDXFiles(dir) {
  return fs.readdirSync(dir).filter((file) => path.extname(file) === '.mdx');
}

function readMDXFile(filePath) {
  let rawContent = fs.readFileSync(filePath, 'utf-8');
  return parseFrontmatter(rawContent);
}

function getMDXData(dir) {
  let mdxFiles = getMDXFiles(dir);
  return mdxFiles.map((file) => {
    let { metadata, content } = readMDXFile(path.join(dir, file));
    let slug = path.basename(file, path.extname(file));
    return {
      metadata,
      slug,
      content,
    };
  });
}

export function getBlogPosts() {
  return getMDXData(path.join(process.cwd(), 'content'));
}

I have no need to display tweets or page views, so I removed that functionality. I also have no need for Fast Refresh, so I stuck to bare next-mdx-remote.

Design Principles

When I set out to redesign my website, I wanted to keep things straightforward yet impactful. The goal? To make sure anyone visiting could quickly grasp who I am, what I do, and what I'm passionate about. But more than that, I wanted to create a space that felt welcoming, like having a chat over coffee rather than presenting a formal resume. Here’s the essence of what guided me:

1. Simplicity is key. I aimed to strip away anything that felt unnecessary or distracting. I wanted each visitor to have a clear path to discovering my projects, reading my thoughts, and understanding my journey without getting lost in a maze of flashy elements or complex navigation.

2. Content takes the spotlight. Whether it's a deep dive into a project I've poured my heart into or a casual blog post musing about the latest tech trends, I wanted my work and words to stand front and center. This website is my digital home, and these stories are the artwork I choose to hang on the walls.

3. Accessibility for all. It was crucial for me that anyone, regardless of how they access the web, could interact with my site comfortably. I believe in the power of the internet to bring us together, and that means making sure it's inclusive, with text that's easy to read and navigation that's easy to follow.

4. A touch of personality. I wanted my site to feel like an extension of me. That means not just the professional side but the quirks, the hobbies, and the little things that make me, well, me. Whether it’s a preferred color scheme, a fondness for a particular font, or the occasional dad joke hidden in a footer, I wanted bits of my personality to shine through.

5. Open lines of communication. I believe in the power of conversation and community. That's why I made sure it's easy for you to reach out to me, whether you're interested in collaborating, have feedback, or just want to share your thoughts. Social media links, a contact form, or just a simple email address – I'm here, and I'm listening.

By weaving these principles into the fabric of my site, my hope is that you find it not just a place to explore my work, but also a space where you feel seen, heard, and maybe even inspired. So take a look around, make yourself at home, and let's connect. After all, it's the human connections that truly make our digital world meaningful.