How I built this portfolio

I wanted a site that was fast, easy to update, and let me publish articles by simply adding a file. Here's the stack.

The stack

• Next.js (App Router) for routing and static generation
• Tailwind CSS for styling, with a small set of design tokens
• gray-matter + react-markdown to turn .md files into pages

The blog pipeline

The whole "drop a file → get a page" trick comes down to reading the filesystem at build time:

export function getAllPostSlugs(): string[] {
  return fs
    .readdirSync(BLOG_DIR)
    .filter((f) => f.endsWith(".md"))
    .map((f) => f.replace(/\.md$/, ""));
}

Then the dynamic route pre-renders one page per file:

export function generateStaticParams() {
  return getAllPostSlugs().map((slug) => ({ slug }));
}

Markdown features that just work

Feature	Supported
Headings	✅
Code blocks	✅
Tables	✅
Task lists	✅

• Syntax highlighting
• GitHub-flavored markdown
• Your next great post

That's it. Clone it, make it yours, and start writing.