Portfolio & Blog Site

January 15, 2024

ReactNext.jsTypeScriptTailwind CSSMDX

This portfolio site showcases modern web development practices using the latest Next.js features. Built with performance and SEO in mind, it includes a complete blog system powered by MDX.

Key Features

  • App Router: Leveraging Next.js 14's new App Router for better performance
  • MDX Integration: Content management with frontmatter parsing
  • SEO Optimized: Dynamic OG images, structured data, and comprehensive meta tags
  • Performance: Vercel Analytics and Speed Insights integration
  • Dark Mode: System preference detection with Tailwind CSS

Technical Implementation

The site uses a custom MDX processing system with frontmatter parsing for both blog posts and project documentation. Static generation ensures fast loading times while maintaining dynamic content capabilities.

export async function generateStaticParams() {
  let posts = getBlogPosts()
  return posts.map((post) => ({ slug: post.slug }))
}

The component architecture emphasizes reusability and maintainability, with shared utilities for date formatting and content processing.