← Back to work

nateross.dev

Personal technical blog with 97 articles, interactive particle field, real-time multiplayer demos, and AI-assisted editorial workflows.

Next.jsReactTypeScriptFramer MotionMDXPusherVercel

The Challenge

Build a technical blog that doesn’t just publish articles — it demonstrates the skills it writes about. Interactive demos, physics simulations, real-time multiplayer, and a publishing workflow powered by AI.

What I Built

A full-featured technical blog and portfolio with 97 published articles across AI, cloud architecture, security research, and software engineering.

Content at Scale

  • Multi-part tutorial series — Building AI Assistants (6 parts), AI Security Research (7 parts), Prompt Engineering Expert (6 stages), Claude Code Tutorials (7 parts), SOLID Principles in C# (5 parts)
  • Deep technical coverage — OpenAI, Claude, LangChain, LlamaIndex, NestJS, vector databases, event sourcing, distributed systems
  • Cross-domain writing — from prompt engineering to Terraform to WebAssembly to political analysis

Interactive Experiences

The site includes custom interactive demos built with Framer Motion and SpriteKit-inspired patterns:

  • Particle field — click-responsive floating skill tags with physics simulation
  • Skills popping game — real-time multiplayer via Pusher WebSockets
  • Parallax scrolling — depth-layered backgrounds across the site
  • Space Invaders game — playable in-browser game demo

AI-Assisted Publishing

GitHub Actions workflows power the editorial process:

  • Claude Code Review — automatic editorial review on every PR (content quality, technical accuracy, publication readiness)
  • Claude Integration — triggered on issue/PR comments with @claude mention for collaborative editing

Technical Highlights

  • Next.js 14 with App Router, React 18, TypeScript
  • Framer Motion for performant animations and physics
  • Pusher WebSockets for real-time multiplayer features
  • MDX via next-mdx-remote for rich content with embedded components
  • shadcn/ui component library with custom theming (dark/light mode)
  • Vercel deployment with blob storage for images
  • Custom analytics tracking for navigation events
  • 97 posts with centralized metadata registry