Introducing My Personal Blog

Welcome to my personal tech blog! This is a full-stack project built from scratch with Next.js 14 — a place to document my technical thoughts and showcase my frontend skills.

🏠 Homepage

The homepage features a clean hero section with a personal introduction and the three latest blog posts. A subtle animated grid background adds a modern, polished feel.

Homepage screenshot

✨ Key Features

Dark Mode

One-click toggle between light and dark themes, with preferences persisted via cookies. The server reads the cookie before rendering to determine the theme, eliminating flash of unstyled content.

MDX Blog System

Blog content is written in MDX, allowing React components to be embedded within Markdown. Each post includes metadata such as tags and date, sorted by publish date.

Blog page

Page Transition Animations

Framer Motion powers smooth page transitions and staggered entrance effects for list items, elevating the browsing experience.

Chatbot Assistant

A smart assistant component is integrated in the bottom-right corner, helping visitors quickly find information.

Project features

📁 Project Structure

app/          → Next.js App Router pages
components/   → Reusable UI components
content/      → MDX blog posts
hooks/        → Custom React Hooks
lib/          → Utility functions (post loading, etc.)
public/       → Static assets

🚀 Deployment

The project is deployed on Vercel, with automatic builds on every push. Speed Insights is integrated for real-time performance monitoring.

Stay tuned — I'll be sharing more tech content and project updates here!