My First Blog

The Stack Behind This Site

Hey there! 👋 In this post, I'll break down the tech stack and key features powering my portfolio website.

Core Technologies

Next.js 13

The site is built using Next.js 14's app directory, leveraging both server and client components for optimal performance. The app directory structure gives us:

• Built-in routing
• Server-side rendering
• Optimized image handling
• API routes when needed

Styling & Animations

• Chakra UI: Provides a robust component library and theming system
• Framer Motion: Handles smooth animations and transitions throughout the site

Blog Engine

The blog you're reading right now is powered by:

• gray-matter: Parses frontmatter metadata from markdown files
• react-syntax-highlighter: Handles code blocks

const example = "Like this one!";