Add documentation for development processes and optimization guidelines

- Created CLAUDE.md to provide guidance on development commands, high-level architecture, content structure, and component relationships.
- Added dev/optimization-guidelines.md outlining performance principles and best practices for high-performance web code, inspired by McMaster-Carr's website.
- Introduced a new blog post, 'Building Your Own Tools: From VFX Artist to Developer', discussing the transition to self-hosting and AI development.
- Included a new asset, claude-nuke.png, for use in the blog post.

CLAUDE.md

@@ -0,0 +1,93 @@
+```
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+### Build the project
+```bash
+npm run build
+```
+
+### Run development server
+```bash
+npm run dev
+```
+
+### Lint the codebase
+```bash
+npm run lint
+```
+
+### Run tests
+```bash
+npm run test
+```
+
+### Build and preview a specific page
+```bash
+npm run build:page <page-name>
+```
+
+### Preview the blog section
+```bash
+npm run preview:blog
+```
+
+## High-Level Architecture
+
+The website follows a clean separation of concerns with three distinct layers:
+
+1. **Content Layer** - Markdown/MDX files containing structured content located in `src/content/**`
+2. **Component Layer** - Reusable UI components built with Astro, organized by purpose and functionality
+3. **Layout & Structure Layer** - Page templates that orchestrate component composition across different sections
+
+### Content Structure
+- All content is stored in Markdown/MDX format within the `src/content/**` directory
+- Organized into logical groups:
+  - `sections/*` - About, Experience, Skills, Featured Project
+  - `pages/contact.mdx` - Contact form data
+  - `blog/*.mdx` - Blog posts with structured metadata and frontmatter
+
+### Component Structure
+The component architecture follows a consistent pattern with different types of components:
+
+**Core Components**: Reusable elements like `BlogCard`, `FormattedDate`, and `Navigation`
+
+**Section Components**: Page-specific sections like `Experience`, `Skills`, and `FeaturedProject`
+
+**Layout Components**: Base templates that provide shared styling and structure (e.g., `BaseLayout`, `BlogPost`)
+
+### Component Relationships
+
+**Blog Section Flow**: The blog page (`src/pages/blog/index.astro`) fetches all blog posts via `getCollection()` and organizes content into three distinct sections:
+- Featured post (first with `featured: true`)
+- Editor's picks (next 3 posts after featured)
+- Latest posts (all posts for filtering)
+
+**Content Rendering Pattern**: All components use a consistent data model where properties are passed through props. For example, `BlogCard` receives title, description, pubDate, and heroImage as parameters.
+
+### Data Flow Architecture
+```
+Content Files → Astro Content API → Page Components → UI Components → Final Render
+```
+
+- **Content Collection**: Configured in `src/content.config.ts` with schema validation for frontmatter
+- **Data Fetching**: Uses Astro's content API to load and transform data from Markdown/MDX files
+- **Component Composition**: Pages assemble components based on fetched data, creating dynamic and responsive layouts
+
+### Design System Elements
+- **Styling System**: Consistent use of classes like `.animate-on-scroll`, `.stagger-*`, and `.border-white/[0.1]`
+- **Navigation**: Responsive mobile menu with smooth transitions
+- **Accessibility**: Proper ARIA attributes, keyboard navigation support
+- **Performance**: Optimized image loading and lazy rendering (using AVIF/WebP formats)
+
+### Technical Features
+- **AI Integration**: Blog post highlights AI/ML usage in technical workflow
+- **Interactive Elements**: Form dropdowns, modal responses for contact form
+- **Animation System**: Scroll-triggered animations with staggered effects
+- **Responsive Design**: Mobile-first approach with viewport-specific classes and media queries
+
+The architecture is highly maintainable with clear separation of content from presentation. The use of Astro's data API and component system enables dynamic content generation while maintaining a consistent visual language throughout the site.
+```

src/content/blog/coder-to-orchestrator.mdx

@@ -0,0 +1,77 @@
+---
+title: 'Building Your Own Tools: From VFX Artist to Developer'
+description: 'Self-Hosting and AI Development in 2024: Why I build custom software instead of using cloud solutions, and how you can too without being a hardcore developer.'
+pubDate: 'Dec 8 2024'
+heroImage: '../../assets/claude-nuke.png'
+featured: true
+category: 'Development'
+tags: ['AI/ML', 'Self-Hosting', 'Open Source', 'Development', 'Automation']
+---
+
+## What's the deal? 
+
+I am a VFX Artist by trade and up until recently, *never considered myself to be a developer.*
+
+Just two years ago; the extent of my development work consisted of writing basic python and simple bash for artistic tools in Nuke,  fiddling with a basic html + css website and managing my company's infrastructure. (Nextcloud, Gitea, n8n).
+
+But since August of 2024 things have started to change rapidly, both in the world but also in my life:
+- I switched to Linux (Arch, btw)
+- AI switched from an interesting *gimmick* to a real tool in the software development world.
+
+And since then, more and more I find myself spending my time creating my own tools and software ecosystems, working with LLM's to write code, documents and streamline workflows.
+
+## The Cloud Trap
+
+Look, I get it. Cloud services are convenient. Google Drive, Notion, Motion - they all work great out of the box. Low barrier to entry, no server knowledge required, just sign up and go. There's real value in that.
+
+But here's the thing: everything's becoming a subscription. More importantly, we have zero control over what these companies do with our data. For some people that's fine. For me? Not so much.
+
+When you add it all up - cloud storage, document editing, video review, streaming, calendar, notes, AI task management - you're looking at hundreds of dollars a month. And you're still locked into their ecosystem, playing by their rules.
+
+## The Speed Factor
+
+I learned to code in high school. Started with Java, made some basic games, wrote little scripts here and there. It was fun being able to build things, but there was always this massive wall: time.
+
+Even professional developers with 20 years of experience could only automate so much in a 2-hour window. Want to build something actually useful? That's weeks of work. Want to build a Google Drive replacement? See you in two years, if you're lucky.
+
+And that's assuming you don't accumulate a mountain of tech debt halfway through that forces you to refactor everything. Which, let's be honest, you probably will.
+
+This is why I never seriously considered building my own tools. The math just didn't work.
+
+## Then Everything Changed
+
+Now we have AI that can generate code in a fraction of the time it used to take. I'm not talking about autocomplete. I'm talking about entire features, complex integrations, full applications.
+
+My role has shifted. I'm less of a hands-on coder now and more of an orchestrator, somewhere between a developer and a product manager. Do I miss writing code sometimes? Yeah. Has it probably made me a worse programmer in some ways? Probably. But I'm also building more than I ever have, and the tools I'm creating are genuinely useful to me.
+
+I've written n8n automations that would've taken weeks before. Now I knock them out in a weekend. I've integrated Nextcloud with Gitea, set up CalDAV sync, built email parsing agents. Things that used to feel impossible are now just normal Saturday projects.
+
+## Design First, Code Second
+
+As a VFX artist, I care deeply about how things look and feel. The visual design, the user experience - that's where I get my real enjoyment. I've never enjoyed writing database schemas or building auth flows (does anyone?), but I've always loved figuring out how to make a contact form feel special, how to make a user say "wow."
+
+Now I can focus on exactly that. I sketch in Figma, prototype in HTML, figure out exactly what I want things to look like, then I hand it off to AI agents to build. They handle the implementation, I handle the vision.
+
+This approach has taught me more about communication and project management than anything else. Getting AI to build what you actually want requires clear, detailed specifications. Turns out, humans might not always appreciate that communication style, but LLMs love it.
+
+## Context Engineering (Not Vibe Coding)
+
+Here's where things get interesting. Early on, I noticed that AI agents perform dramatically better when you give them thorough documentation and context. I started providing screenshots, copying relevant documentation, giving detailed examples, basically treating them like junior developers who needed proper onboarding.
+
+The results were night and day. I was one-shotting complex applications that I wasn't seeing anyone else build online. That's when I discovered people had already coined terms for this: "context engineering," frameworks like BEMAD, all these approaches that were suddenly becoming buzzwords.
+
+Some people call this "vibe coding." I don't love that term. It sounds too casual for what's actually a fairly rigorous process. I'm not just throwing vibes at an AI and hoping for the best. I'm orchestrating a team of agents with clear specifications and detailed context.
+
+The difference is that I actually enjoy providing that context. Before I make any point, I naturally provide extensive background. Humans sometimes find this tedious. LLMs? They thrive on it. And statistically, this approach gets better results.
+
+## Building What I Actually Want
+
+Here's what it comes down to: I don't want to use Motion. I don't want to pay for Notion. I like the systems I already have - Nextcloud, Obsidian, Gitea - and those products don't integrate with them anyway.
+
+So I'm building my own replacement. A unified system that connects everything I actually use into one framework, with an AI agent that integrates into every relevant part of my workflow. Not something I have to explicitly prompt, but something with actual agency that helps me plan, make decisions, track communications, and get my time back.
+
+Two years ago, saying "I'm building a Notion replacement" would've sounded delusional. Today? It just requires proper planning and time allocation.
+
+That's the shift. We've gone from "this is impossible" to "this is just a weekend project if I plan it right."
+
+And honestly? I'm excited to see where this goes. The next few years are going to be wild.