Back to Garden
Product|February 7, 2026

Building AuraWorks: Anatomy of a Digital Studio

#Next.js#AI#Engineering#IndieHacker

How I built my own corner of the internet with Next.js, AI-assisted development, and an obsession for invisible performance.

For years I've been creating content across Medium, Twitter, and various platforms. But something was always missing: a space that was truly mine. Not just a blog—a digital studio. A headquarters that reflects how I think, how I build, and what I obsess over.

AuraWorks.dev was born from that need.

The Silent Engine

Before writing a single line of code, I defined one philosophy: silent power.

The site should feel like a high-performance IDE or a native macOS utility—quiet, precise, and blazing fast. No loud marketing. No cluttered layouts. Just an environment where the content speaks and the infrastructure stays invisible.

I call this design language Glass Garden: deep charcoal backgrounds, subtle transparency effects, and typography that feels developer-native. Every element follows this system. Nothing screams for attention; everything just works.

The Stack

I chose technologies that could deliver the "studio" feel without compromises:

  • Next.js 16 with App Router for robust routing and server-side rendering
  • Tailwind CSS v4 for rapid UI development and design token management
  • Framer Motion for physics-based, snappy interactions
  • MDX for content that can include React components
  • Vercel for seamless deployment

But the real differentiator wasn't the stack—it was the workflow.

Spec-Driven Development

In the era of AI coding assistants, the role of a senior engineer shifts from "writing code" to "architecting specifications."

I developed a methodology I call Spec-Driven Development. Instead of jumping into files and hacking away, I follow a strict cycle:

  1. Specify: Write detailed specs in natural language
  2. Plan: Create technical designs from those specs
  3. Task: Break work into small, independent units
  4. Implement: AI agents execute these tasks
  5. Verify: Review results against the original specification

This workflow lets me act as Creative Director while AI handles the implementation. It turned weeks of work into days.

The Bento Grid

The homepage centerpiece is a Bento Grid layout. Instead of a long, boring project list, I compartmentalized everything into modular cells—each containing a different project or content type.

Every card includes a subtle spotlight effect that follows the mouse cursor. It makes the interface feel alive without being distracting. On hover, cards slightly contract rather than expand—a "pull in" feeling that's more sophisticated than the typical "pop out" effect.

These micro-decisions add up. They're what separate a crafted experience from a template.

Performance as a Feature

A polished experience means nothing if it's slow. My benchmark was simple: if it's not instant, it's broken.

I optimized aggressively:

  • Automatic image format conversion for modern browsers
  • Self-hosted fonts to eliminate layout shifts
  • Dynamic imports for heavy components
  • Route-based code splitting

The result: near-perfect Lighthouse scores. The largest content paints in under 0.6 seconds. The site doesn't load—it appears.

What's Next

AuraWorks is now live as the headquarters for my projects:

  • AuraLyrics: A native macOS menu bar app for Spotify lyrics
  • The Garden: This blog, where I document my journey in public

Building this site reminded me why I love being an indie hacker. It's the freedom to obsess over a 1px border, the joy of shipping, and the thrill of building your own corner of the internet.

Check it out live: auraworks.dev