Ambar Agrawal

Welcome to the newly redesigned blog interface! This post serves as both a "Hello World" and a comprehensive visual guide to how MDX content renders within our new Tailwind typography architecture.

The goal of this redesign was to ensure that AI-generated content and hand-crafted markdown both render beautifully with minimal developer friction.

The Architecture Layer

The foundational architecture of this blog revolves around the Next.js App Router using React Server Components. By migrating away from client-side serialization, we've significantly improved hydration overhead and content delivery speeds.

Why Server-Side MDX?

We opted to use next-mdx-remote/rsc for processing markdown.

Performance Guarantee

Zero client-side JavaScript overhead just to render static text elements to the browser.

Robust Security

Markdown is compiled securely on the server ensuring no unwanted raw scripts leak through.

Content Simplicity

You can drop an .mdx file into a directory and instantly see a beautiful article generated automatically.

Design Philosophy

A great developer portfolio isn't just about showing code—it's about presenting thoughts in an environment that feels extraordinarily premium and responsive to interactions.

Code Formatting

One of the most critical aspects of a technical blog is how it displays raw code blocks. This blog leverages rehype-pretty-code which is powered by Shiki, avoiding the heavy bundles of classic code-highlighters.

Here is Python handling asynchronous file parsing:

import asyncio
from pathlib import Path
 
async def read_markdown(filepath: str) -> str:
    path = Path(filepath)
    if not path.exists():
        raise FileNotFoundError("Missing MDX source!")
        
    loop = asyncio.get_event_loop()
    # Read the file asynchronously without blocking the event loop
    content = await loop.run_in_executor(None, path.read_text)
    return content

We also fully support TypeScript and React natively!

import { MDXRemote } from "next-mdx-remote/rsc"
 
export default function ArticlePreview({ source }: { source: string }) {
  return (
    <div className="prose dark:prose-invert">
      <MDXRemote source={source} />
    </div>
  )
}

Typography and Blueprint Geometry

Good reading experiences require aggressive attention to vertical rhythm and line-heights. Notice how the H2 headers in this blog now feature the solid vertical accent line matching the CV inspiration's blueprint styling!

Dynamic Portfolio Components

To ensure this feels like a true engineering case-study site, we've implemented several specific data-display components.

▲Next.js 14☯Tailwind v4✧MDX※Framer Motion

Click to reveal details about the IntersectionObserver

The Table of Contents running on this page is powered by a custom React Client Component. It utilizes the native IntersectionObserver API to track exactly which header (H2, H3) is currently intersecting the top 20% of the browser window.

When an intersection triggers, it updates a local state variable which applies the active .border-accent class to the correct navigation item!

Summary and Next Steps

By unifying our prose stylings to inherit from our global Tailwind CSS variables, we ensure that when a reader switches smoothly into Dark Mode, the typography follows perfectly without needing a harsh page reload.

Take a look around, check out the navigation layout, and try resizing the window to see how the Table of Contents correctly collapses into the top "On this page" dropdown on smaller devices.