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.