Zenith Reborn Blog System - From Idea to Production

Today we built something special: a fully automated blog system that seamlessly integrates with our development workflow. From the first idea to live deployment - everything now works automatically.

🎯 What Did We Build?

Blog Infrastructure

A complete blog solution with:

MDX Support - Markdown with React components
Syntax Highlighting - Beautiful code snippets in blog posts
Dark Theme - Perfectly matching the main website
Filtering & Search - Filter by project (SkillQuest, ZenFocus, etc.) and tags
Responsive Design - Works perfectly on desktop and mobile

Automatic Blog Generation

The unique aspect of this system is the full automation:

# In a project directory
/write-blog-post

That's it! Claude Code:

Analyzes git commits from the last week
Generates a professional blog post in English
Saves the post as an MDX file
Commits and pushes to GitHub
Vercel deploys automatically

No more manual steps!

🏗️ Technical Architecture

Frontend Stack

Next.js 15 - React framework with App Router
MDX - Markdown with JSX components
Tailwind CSS - Utility-first styling
TypeScript - Type-safe development

Blog Components

We built custom components for each part:

BlogCard Component

// Shows blog posts with project-specific colors
const projectColors = {
  SkillQuest: { badge: 'bg-gradient-to-r from-blue-600 to-blue-500' },
  ZenFocus: { badge: 'bg-gradient-to-r from-purple-600 to-purple-500' },
  'Zenith Reborn': { badge: 'bg-phoenix-gradient' }
}

Each project gets its own visual identity with gradients and glow effects.

BlogFilter Component

Real-time search through posts
Filter by project name
Filter by tags
Active filters are clearly visible

MDXComponents

Custom styling for all markdown elements
Code blocks with syntax highlighting
Responsive images
Beautiful blockquotes and tables

MCP Server Integration

The automation is powered by a custom MCP (Model Context Protocol) server:

Functions:

analyze_project_changes - Git history analysis
generate_blog_post - MDX generation with frontmatter
save_blog_post - Save to content directory
list_blog_posts - Overview of all posts

Tech Stack:

Python 3.13
GitPython for repository analysis
MCP SDK for Claude Code integration

🎨 Design Choices

Dark Theme

The blog uses the same dark theme as the main website:

Background: #0F0F0F (deep black)
Primary colors: Gold, orange, red (Phoenix gradient)
Accents: Semi-transparent cards with colored borders
Text: Light colors for optimal readability

An important design principle: you're never stuck.

On every page you can:

Click on logo → Back to homepage
Click on "Blog" → To blog overview
Click on section links → Directly to that section (even from blog)

Smooth scrolling ensures a premium user experience.

🚀 Deployment Pipeline

Git Workflow

Fully automated with Personal Access Token:

git add .
git commit -m "New blog post"
git push  # Happens automatically!

Vercel Integration

Push to GitHub → Vercel detects change → Builds automatically → Deployed!

Build time: ~2 minutes Uptime: 99.9% Global CDN: Instant worldwide

📊 Features Overview

Feature	Status	Details
MDX Support	✅	Markdown with React components
Syntax Highlighting	✅	GitHub Dark theme
Project Filtering	✅	SkillQuest, ZenFocus, Zenith
Tag Filtering	✅	Dynamic tag generation
Search	✅	Real-time search
Auto Generation	✅	Via MCP server
Auto Deployment	✅	Via Vercel
Mobile Responsive	✅	Perfect on all screens