Modern Personal Blog Site

My Digital Diary is a modern, high-performance blog platform built using a decoupled architecture with Next.js on the frontend and Sanity CMS as a headless backend.

From an engineering standpoint, the focus is on fast rendering, smooth navigation, and SEO-friendly content delivery through SSR/SSG strategies. Sanity provides a flexible content modeling system, making it easy to manage and scale blog content without touching the frontend code.

The UI is designed with a content-first approach—clean, readable, and optimized for developers and tech-focused readers, with a strong emphasis on performance and structured content organization.

Hero Landing & Dynamic Statistical Segment

The above-the-fold section uses Next.js static rendering for fast UI delivery, while key stats (articles, words, readers) are dynamically fetched from Sanity CMS using GROQ aggregation queries.

CTAs are styled with Tailwind gradient utilities, and the right-side widget links directly to the latest post route for quick content access.

Dynamic Blog Display Configuration

The content feed uses a responsive 3-column CSS Grid that maps directly over data fetched from Sanity CMS.

Each card is a reusable component built with the Next.js Image component, pulling optimized assets from the Sanity CDN. It also renders structured metadata like tags, author info, and relative timestamps for better content context and readability.

Global Footer

The bottom navigation includes a unified newsletter subscription module with an asynchronous input flow for seamless sign-ups.

Below it, a structured footer layout provides quick navigation links and external integrations to platforms like Upwork, Freelancer, Kwork, and Buy Me a Coffee, enabling direct routing to freelance and support channels.

Single Post Template Entry Header

The blog header uses Next.js dynamic routing with slug-based matching against Sanity CMS data.

It also includes social share actions that dynamically read the current page URL and pass it to platforms like Facebook, X, LinkedIn, and WhatsApp for seamless content sharing.

Article Reading Flow and Sidebar Grid Layout

The post body uses a two-column responsive layout combining Flexbox and CSS Grid for structured content flow.

Rich text from Sanity Portable Text is converted into semantic HTML for clean rendering, while the sidebar includes category aggregation and sticky reading metadata to improve navigation and content discoverability.

Author Profile Info

The post footer dynamically pulls author metadata via schema references linked to the current content node in Sanity CMS.

It also includes related tag blocks for content discovery and an inline newsletter field with basic email validation for direct user subscription.

Category Archive Filtering View

The category route uses dynamic Next.js routing to filter posts based on URL params.

It queries Sanity CMS to return only matching category/tag entries and updates the UI state, including post counts in the secondary navigation for a consistent filtered view.

Conclusion: Overall, the platform is a clean Next.js + Sanity CMS implementation focused on performance, modular content structure, and scalable architecture. It delivers fast, SEO-friendly pages with dynamic content handling, while keeping the UI minimal, responsive, and optimized for long-form reading and discoverability.