Nuxt Blog

Personal BlogAI

A developer blog with custom SCSS architecture and editorial design — built with Nuxt 3 and Payload CMS.

Overview

An editorial blog built from scratch

A developer blog with a custom SCSS design system, CMS-driven content, and attention to every typographic detail.

Built with Nuxt 3 and Payload CMS, this blog was revamped with a custom SCSS architecture — 13 modular partials covering tokens, layout, typography, components, and responsive breakpoints. The editorial design uses a warm palette with Inter for body text and JetBrains Mono for code.

Content is managed through Payload CMS with live preview, draft/publish workflow, and automatic cache revalidation. Articles support rich text with inline images, code blocks with syntax highlighting via highlight.js, and a copy-to-clipboard button. Locomotive Scroll v5 provides smooth parallax scrolling throughout.

The reading experience is polished: RSS feed for subscribers, dark mode with carefully tuned contrast ratios, and a full-screen mobile menu with staggered animations. Images open in a custom lightbox with spring-animated transitions.

Screenshots

A tour of the blog

From the homepage to article detail — every page designed for a great reading experience.

Homepage — hero section with featured article and responsive article grid

Articles listing — filterable list with search, sort, and tag-based filtering

Article detail — clean reading layout with prose typography and code blocks

About page — personal introduction, skills, and contact information

Key Features

What makes it shine

Every detail designed for a great reading and writing experience.

🎨

Custom SCSS Architecture

13 modular partials with CSS custom properties for design tokens. Warm editorial palette with Inter for body and JetBrains Mono for code.

🌓

Dark Mode

System-preference-aware dark mode with manual toggle. Every color variable re-mapped for comfortable nighttime reading — meets WCAG contrast requirements.

📝